Auth Form Example
Drop-in form with email/password and clear affordances.
Sign in
AuthForm.tsx
export function AuthForm(){
return (
<form className="space-y-3">
<input className="w-full rounded-md border px-3 py-2" placeholder="Email" />
<input className="w-full rounded-md border px-3 py-2" placeholder="Password" type="password" />
<Button className="w-full">Continue</Button>
</form>
)
}Pricing Card Example
Show plan features and action in a clean card layout.
Pro
$24 / mo
- Unlimited projects
- Priority support
PricingCard.tsx
export function PricingCard(){
return (
<Card>
<CardHeader><CardTitle>Pro</CardTitle><CardDescription>$24 / mo</CardDescription></CardHeader>
<CardContent><ul><li>Unlimited projects</li></ul></CardContent>
<CardFooter><Button className="w-full">Start</Button></CardFooter>
</Card>
)
}Dashboard Card Grid Example
Responsive grid of metric cards ready to drop in.
Revenue
—
Active Users
—
Conversion
—
Latency
—
DashboardGrid.tsx
export function DashboardGrid(){
const items = ['Revenue','Active Users','Conversion','Latency']
return (
<div className="grid grid-cols-2 gap-3">
{items.map((k)=>(
<Card key={k}>
<CardHeader><CardTitle className="text-sm">{k}</CardTitle></CardHeader>
<CardContent><div className="text-lg font-bold">—</div></CardContent>
</Card>
))}
</div>
)
}