Card
A container for displaying content in a distinct, elevated section with neumorphic styling.
Installation
$ npx shadcn@latest add "/r/card.json"
Usage
Card Title
Card description goes here.
Your main content goes here.
Variants
The Card component supports three visual variants.
Raised (Default)
Raised Card
Elevated with soft shadows for a floating effect.
Flat
Flat Card
Flush with the surface, defined by subtle borders.
Pressed
Pressed Card
Inset shadows creating a depressed or active state.
Props
Card
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "raised" | "flat" | "pressed" | "raised" | The visual style of the card. |
| className | string | - | Additional CSS classes. |
CardHeader, CardContent, CardFooter
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes. |
CardTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes. |
CardDescription
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes. |