shadcn.io is not affiliated with official shadcn/ui
Card examples · Standard
Standard Card for React
A basic card with a title, a description, a content area and two action buttons.
Cards are everywhere: dashboards, profiles, product listings. This React card is the starting point, with a header holding a title and a description, a content area, and a footer with Cancel and Submit. Use it for any block of content that needs its own border and spacing, then fill each part with what you need.
Preview
Installation
FAQ
Which card parts does this demo use?
Card, then CardHeader with CardTitle and CardDescription, then CardContent with a paragraph, then CardFooter with two buttons. Every part is optional: leave out the ones you don't need.
How wide is the card?
Up to 350px: w-full max-w-[350px] on Card, so it shrinks on narrow screens. The parts stack in a column, and the card sets the gaps between them.
How are Cancel and Submit placed?
CardFooter is a flex row, and justify-between pushes the buttons to its two ends. Cancel is variant="outline" and Submit is the default filled button. Use justify-end with gap-2 to keep both on one side.
Can the header take the title and description as props?
Yes. Pass title and description on CardHeader and it renders CardTitle and CardDescription for you. Use the parts, as here, when the title needs its own markup.
Related
- Login CardA login card with email and password
- Meeting Notes CardA card with meeting notes, a numbered
- Image CardA listing card with a full-width photo
- Standard DialogA share dialog with a read-only link, a
- Standard Accordion with ChevronA bordered accordion of three questions
- Bottom-Sliding SheetA sheet that slides up from the bottom of