Skip to content
SevenUI
Sign in

Card components

14 free, copy-and-go React Card examples built on the SevenUI Card primitive. Install any of them with the shadcn CLI.

Read the docsBrowse Pro blocksShare on X (opens in a new tab)
On this page

Stat card

A revenue metric card with a month-over-month trend delta.

… add @sevenui/component/card-01
Monthly recurring revenue
$48,290
+8.2%vs. last month

Team members

A card listing team members with an invite action in the footer.

… add @sevenui/component/card-02
Team members
People with access to this project.
EW
Emma WilsonProduct Designer
JC
James CarterFrontend Engineer
SR
Sofia ReyesProduct Manager

Project card

A project card with a labeled progress bar and a status and due date footer.

… add @sevenui/component/card-03
Design system refresh
Unify tokens and components across the product.
Tasks completed
x
In progressDue Sep 30

Media card

An article card led by a full-bleed cover image, with a category badge, read time, byline and a two-button footer.

… add @sevenui/component/card-04
Wireframes for a three-step onboarding flow pinned to a whiteboard
How we cut onboarding drop-off by a third
Fewer fields, deferred verification, and a checklist that survives a page refresh.
Case study7 min readBy Hannah Lee, Sep 18

File card

A compact file card with a type icon, an overflow actions menu in the header action slot, and shared-with avatars.

… add @sevenui/component/card-05
Q3 board review.pdf
4.2 MB · Edited 2h ago
Leadership team
View only

Selectable cards

Plan options rendered as separate cards driven by a radio group, with a selected ring, focus ring and live confirmation.

… add @sevenui/component/card-06

Pro plan selected, billed monthly.

Card states

One support tickets card previewed in ready, loading, empty and error states.

… add @sevenui/component/card-07
Preview state
Open tickets
Billing queue · Assigned to you
  • Refund not showing on my cardOlivia Martin · T-1042
    4m ago
  • Can't export reports to CSVNoah Brooks · T-1039
    1h ago
  • Change billing email addressAva Thompson · T-1031
    Yesterday

Collapsible card

A build settings card whose header chevron expands a panel of command inputs.

… add @sevenui/component/card-08
Build settings
Using framework defaults for Vite.

Horizontal card

A podcast episode card that stacks in narrow containers and switches to media-left at a container breakpoint.

… add @sevenui/component/card-09
Podcast cover art for Shipping Weekly
Feature flags without the flag debt
Shipping Weekly · Episode 42 · 38 min
Two platform engineers on expiring flags, ownership labels, and the cleanup ritual that keeps their codebase honest.

Link cards

Whole-surface link cards for developer guides with hover lift, arrow nudge and a keyboard focus ring.

… add @sevenui/component/card-10

Event ticket

A conference ticket card with event details, a perforated divider, an entry code and wallet and calendar actions.

… add @sevenui/component/card-11
Config Summit 2026
General admission · 2-day pass
Confirmed
Date
Thu, Oct 16
Doors
8:30 AM PDT
Venue
Pier 48, San Francisco
Attendee
Emma Wilson
Entry QR code for ticket CS26-0412-GA
Ticket numberCS26-0412-GAShow this code at the entrance. Badge pickup opens at 8:00 AM.

Plan usage

A billing usage card with meters for API requests, storage and seats, a seat-limit warning and an upgrade action.

… add @sevenui/component/card-12
Usage this cycle
Pro plan · Resets on Oct 1
12 days left
API requests842k of 1000k
x
Storage38.4 GB of 50 GB
x
Seats10 of 10
x

All 10 seats are taken. New invites will stay pending until you add seats.

Next invoice $240.00

Board column

A kanban column of compact issue cards with priority, labels, subtask and comment counts, due dates and assignees.

… add @sevenui/component/card-13

In progress2

  • Retry failed webhook deliveries with exponential backoff
    High priority
    ENG-482BackendWebhooks
    Subtasks3/5Comments7Overdue, was dueOct 2
  • Show sync status in the workspace sidebar
    Medium priority
    ENG-469Frontend
    Subtasks1/4Comments2DueOct 9

Deployment status

A deployment card with live status, a copyable URL, commit details, build step timings and redeploy and visit actions.

… add @sevenui/component/card-14
storefront-web
Production deployment
Ready
storefront-web.acme.app
Source
maina3f9c21Fix cart total rounding for tiered discounts
Created
14m ago by Sofia Reyes
Duration
  1. Install12s
  2. Build31s
  3. Deploy5s
Visit

Components are the parts. Blocks are the page.

Pro blocks are whole sections and pages — heroes, pricing, dashboards, auth — composed from the same primitives and themed by the same tokens you already use. Install one and it is yours.

Browse blocksGet Pro — $99

One purchase, yours forever. $99 at launch instead of $249.