Card
Default
A simple card with default padding, border, and shadow.
KPI Card
Total Revenue
$45,231
+20.1% from last month
Subscriptions
+2,350
+180.1% from last month
Active Now
+573
+201 since last hour
Dashboard Card
Monthly Revenue
Jan – Dec 2024
Hover Shadow
Hover over this card to see a subtle shadow fade in.
Fullscreen
Expandable card
Click the icon in the top-right corner to expand this card to fullscreen. Press Escape to exit.
Ghost (fullscreen container)
Total Revenue
$45,231
+20.1% from last month
Subscriptions
+2,350
+180.1% from last month
Active Now
+573
+201 since last hour
Bounce Rate
34.2%
−2.4% from last month
Avg. Session
4m 12s
+0m 18s from last month
New Users
1,892
+12.7% from last month
Accent Border
Left accent
Default side — indigo left border.
Top accent
Amber top border.
Right accent
Emerald right border.
Bottom accent
Red bottom border.
asChild (semantic list)
- Design
- Engineering
- Marketing
Card
A fundamental layout primitive for grouping content. Adapts Tremor's Card with project CSS variable tokens — white/dark background, border, rounded corners, and a subtle shadow.
Usage
import { Card } from "@/components/ui/card"
<Card className="max-w-sm">
<p>Card content</p>
</Card>
{/* Render as a different element */}
<ul>
<Card asChild>
<li>List item styled as a card</li>
</Card>
</ul>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ghost | boolean | false | When true, renders the card without background, border, shadow, or padding — invisible container. Useful for grouping content or enabling fullscreen without a visible card shell. |
| enableFullscreen | boolean | false | When true, shows a fullscreen toggle button in the top-right corner. Clicking it expands the card to fill the viewport via a portal. Press Escape to exit. |
| hoverShadow | boolean | false | When true, applies a subtle shadow on hover with a smooth fade-in transition. |
| accentColor | string | — | Any valid CSS color value. When set, renders a 3px colored border on the side specified by accentSide. |
| accentSide | "top" | "right" | "bottom" | "left" | "left" | Which side of the card the accent border appears on. Only relevant when accentColor is set. |
| asChild | boolean | false | When true, merges Card props onto its first child element instead of rendering a <div>. |
| className | string | — | Additional Tailwind classes to customize the card. |
| ...props | React.HTMLAttributes<HTMLDivElement> | — | All standard div props are forwarded. |