Layout tokens
Shared layout primitives for card and modal patterns. Import them from tokens and compose with cn().
Card layouts
Four layout variations built from the shared token classes. Each one styles Card's children, not the Card itself.
Weekly Steps
47,291
Goal: 50,000 steps
cardHeaderClass + cardContentClassh-10 bar
OS-style header bar with content below
Notifications
Choose push, email digests, or both.
cardBodyClassp-4
Standard headerless card
JD
Jane Doe
Senior Engineer
Leads the design systems team.
cardShowcaseClassp-4
Featured content: profiles, highlights
NotificationsOn
Security2FA
LanguageEnglish
<Card>structure only
Card adds no padding or gap; rows own their spacing
Token reference
Every layout export and its key classes.
| Token | Classes | Context |
|---|---|---|
| cardHeaderClass | flex items-center h-10 px-3 border-b border-border bg-muted | card |
| cardContentClass | px-3 pt-3 pb-4 | card |
| cardBodyClass | p-4 | card |
| cardShowcaseClass | p-4 | card |
| blurredOverlayClass | bg-black/10 backdrop-blur-md | all overlays |
Usage
import {
cardHeaderClass,
cardContentClass,
cardBodyClass,
blurredOverlayClass,
} from "@/registry/lib/tokens"
import { cn } from "@/registry/lib/utils"
<Card>
<div className={cn(cardHeaderClass)}>Title</div>
<div className={cn(cardContentClass)}>Content</div>
</Card>