Card

A container for grouping related content and actions.

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsxEditable — live

render(
  <Card className="w-full max-w-sm">
    <CardHeader>
      <CardTitle>Upgrade to Pro</CardTitle>
      <CardDescription>Unlock every component and priority support.</CardDescription>
    </CardHeader>
    <CardContent className="text-sm text-muted">
      Billed annually. Cancel anytime.
    </CardContent>
    <CardFooter>
      <Button className="w-full">Upgrade now</Button>
    </CardFooter>
  </Card>
)

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/card

Or install the package and import it:

$pnpm add @stacklyui/ui motion

Usage

Import Card from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.