Card
Card is a surface that groups information and actions about a single subject.
Card uses elevation (shadow4) rather than a border to separate itself from the background. Compose it from CardHeader, CardPreview, CardContent and CardFooter.
Priya Patel shared a file
5 minutes ago
Q4 product launch plan. Please review and share feedback by Friday.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Card, CardHeader, CardPreview, CardContent, CardFooter } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Filled
Filled alt
Outline
Subtle
Appearance
filled (default), filled-alternative, outline, subtle.
Updated yesterday
Interactive
A clickable Card: elevation increases on hover. Wrap the content in an <a> or <button> for correct semantics.
Design system
Figma · 12 pages
With preview
CardPreview runs edge to edge across the Card to show an image or thumbnail.
Usage
Do
- Keep each Card to a single topic.
- Use outline when the Card sits on a surface that already has color or elevation.
Don't
- Don't nest a Card inside a Card.
- Don't put more than 2 Buttons in CardFooter.
Props
| Prop · Type | Default | Description |
|---|---|---|
| appearance"filled" | "filled-alternative" | "outline" | "subtle" | Default: "filled" | Surface style. |
| size"small" | "medium" | "large" | Default: "medium" | Padding and gap 8 / 12 / 16px. |
| interactiveboolean | Default: false | Enables the hover and pressed states. |
| CardHeader | Default: — | Header slots. |