Components
Loading preview...
Card component from Interfaces DS — a flexible card shell with header, action, content, and footer slots.
npx shadcn@latest add https://21st.dev/r/jshguo/interfaces-cardimport { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/interfaces-card"
import { MoreHorizontal } from "lucide-react"
export default function CardDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
<Card className="w-full max-w-sm shadow-sm">
<CardHeader>
<div>
<CardTitle>Pro plan</CardTitle>
<CardDescription>For growing teams that need more control.</CardDescription>
</div>
<CardAction>
<button
type="button"
aria-label="More options"
className="inline-flex size-8 items-center justify-center rounded-md border bg-background text-foreground hover:bg-accent"
>
<MoreHorizontal className="size-4" />
</button>
</CardAction>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-end justify-between">
<span className="text-3xl font-semibold">$24</span>
<span className="text-sm text-muted-foreground">per member / month</span>
</div>
<ul className="space-y-2 text-sm text-muted-foreground">
<li>Unlimited projects</li>
<li>Advanced permissions</li>
<li>Shared team library</li>
</ul>
</CardContent>
<CardFooter className="gap-3">
<button type="button" className="inline-flex h-10 w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
Upgrade
</button>
<button type="button" className="inline-flex h-10 w-full items-center justify-center rounded-md border bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent">
Learn more
</button>
</CardFooter>
</Card>
</div>
)
}