Skip to content
SevenUI
Sign in

Layer Card components

10 free, copy-and-go React Layer Card examples built on the SevenUI Layer 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

Subrequests

Origins filtered by a search field and status tabs in the header, listed in a table panel.

… add @sevenui/component/layer-card-01
Subrequests
OriginRequestsDuration
200api.example.com1,20484 ms
200cdn.example.com86012 ms
401auth.example.com31241 ms
200search.example.com208160 ms
503billing.example.com372.1 s
404images.example.com199 ms
Showing 6 of 6

Collapsible build steps

A build summary whose step list collapses from a chevron in the header.

… add @sevenui/component/layer-card-02
Build #482
Finished in 1 min 12 s
  1. Install dependencies
  2. Type check
  3. Run tests
  4. Build
  5. Upload assets

Build log

A scrolling log panel under a fixed header with a live status badge.

… add @sevenui/component/layer-card-03
Build log
Running
Streaming…

Plan picker

Pricing plans as selectable panels backed by a radio group.

… add @sevenui/component/layer-card-04
Choose a plan
You can change it at any time.

Drop zone

A dashed empty panel inviting file uploads.

… add @sevenui/component/layer-card-05
Attachments
Drop files to upload
PNG, JPG or PDF up to 10 MB.

Notification settings

Stacked setting rows, each with a description and a switch.

… add @sevenui/component/layer-card-06
Notifications
Choose what reaches your inbox.
A weekly summary of activity in your projects.
Failed deployments and security notices.
New features and changes, once a month.

Nested cards

A project panel holding a nested inverse card of environment variables.

… add @sevenui/component/layer-card-07
Project
acme-storefront

Variables are encrypted at rest and exposed to builds and functions.

Environment variables
DATABASE_URLProduction
STRIPE_SECRET_KEYProduction
NEXT_PUBLIC_SITE_URLAll

Usage row

Plan quotas as a horizontal row of meters that stacks when narrow.

… add @sevenui/component/layer-card-08
Plan usage
Requests
x
Storage
x
Bandwidth
x
Resets on November 1

Navigation cards

A grid of titled cards whose panels link to each section.

… add @sevenui/component/layer-card-09

Danger zone

Archive and delete actions on a destructive-toned tray.

… add @sevenui/component/layer-card-10
Danger zone
These actions affect everyone on the team.
Archive projectHide the project and pause its deployments. You can restore it later.
Delete projectPermanently remove the project, its domains, and its build history.

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.