Card

Auto-generated showcase. Regenerated on script run; customize source component or add lock flag to preserve edits.

Simple card

Use cards to group related content.

This is a minimal card. You can add more sections like actions or a footer.

Card with Action

Shows an inline action button.

Card content area can contain anything: lists, forms, descriptions.

Composable primitives
Accessible semantics
Consistent spacing

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>Body</CardContent>
</Card>;