Card

A composable card container with header, title, description, action, content, and footer sub-components, supporting a compact "sm" size variant.

Default
Monthly Summary
Overview for May 2026

$4,820.00

+12% from last month

Last updated: today
Content Only

Deployment checklist

  • Database migration

    Completed 9:14 AM

  • Deploy to staging

    In progress · ~4 min left

  • Run integration tests

    Blocked — waiting on staging

Uptime

99.9%

Last 90 days

Grid Layout
Total Users
Registered accounts

24,891

+5.2% vs last week
Just now
Orders
Placed this week

1,340

+11.8% vs last week
5 min ago
In Transit
Active shipments

482

-3.1% vs last week
1 hour ago
Sizes

size="default"

Project Alpha
Active — 3 contributors

A standard card with default sizing. Padding, gap, and font sizes are at their base values.

Updated 2 hours ago

size="sm"

Project Alpha
Active — 3 contributors

A compact card with reduced padding and tighter spacing — ideal for dense list-style layouts.

Updated 2 hours ago
With Action
Revenue
Last 30 days

$18,240

+8.4%
vs. previous 30 days
Active Users
This week

1,042

-2.1%
vs. last week
With Image
Mountain landscape
Mountain Retreat
Elevation 2,400 m · 3-night trip

A scenic alpine getaway with panoramic views, guided hikes, and stargazing each evening.

$320 / nightAvailable June–Sept
Forest lake
Forest Lake
Day trip · 12 km trail

A peaceful lakeside loop through old-growth forest.

Free entry

Installation

npx shadcn@latest add @byronwade/card

Props

PropTypeDefaultDescription
size"default" | "sm""default"Controls padding and text size across all child slots; "sm" produces a more compact layout.
classNamestring—Additional CSS classes merged onto the root div.
childrenReact.ReactNode—Slot content — typically CardHeader, CardContent, CardFooter, and related sub-components.