Components
Card
Groups related content. 24px padding, hairline ring, optional inset image.
Install
npx shadcn@latest add @stardust/cardExamples
Stat card
Image card
An image as the first child sits inset with an 8px frame and concentric corners.
Template
Revenue dashboard
MRR, churn and cohorts on one page.
SD2.4k uses
Examples are React. The Vue components take the same props and variants; only the template syntax differs.
Usage
Do
- Use CardHeader, CardContent and CardFooter so spacing stays consistent.
- Put the card's main action in the footer or CardAction.
Don’t
- Don't nest cards inside cards.
- Don't add custom padding; use the size prop for compact cards.
Accessibility
- Give the card title a heading level that fits the page outline when it is a section.