Card

stable

Solid content container. Composes with CardHeader / CardTitle / CardContent / CardFooter.

shell

pnpm dlx shadcn@latest add @webzenia/card

preview

Card title

Solid surface — content cards never use glass.

props

(composition)Card · CardHeader · CardTitle · CardContent · CardFooter

Compose the sub-parts; each forwards a ref and className.

accessibility

Card is a container, not a region — add a heading inside for screen-reader structure.

If the whole card is a link, wrap it in one anchor; don’t nest interactive elements.

usage

tsx

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

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