Components
Loading preview...
Displays a card with header, content, and footer. Groups related content and actions into a bordered surface, with polymorphic sub-parts (header, title, description, action, panel, footer).
npx shadcn@latest add https://21st.dev/r/extend-hq/cardimport {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
export default function CardDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center p-8">
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>Deploy your new project in one-click.</CardDescription>
<CardAction>
<button className="text-sm font-medium underline-offset-4 hover:underline">
Sign Up
</button>
</CardAction>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
Name your project and pick a region to get started.
</p>
</CardContent>
<CardFooter className="flex justify-end gap-2">
<button className="rounded-md border px-3 py-1.5 text-sm font-medium">
Cancel
</button>
<button className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground">
Deploy
</button>
</CardFooter>
</Card>
</div>
)
}