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 + cardContentClass
OS-style header bar with content below
Notifications
Configure how you receive alerts. Choose between push notifications, email digests, or both.
cardBodyClassp-4
Standard headerless card
JD
Jane Doe
Senior Engineer
Profile cards, feature highlights, and other visual showcase content.
cardShowcaseClassp-4
Featured content: profiles, highlights
NotificationsOn
Security2FA
LanguageEnglish
ThemeSystem
<Card>structure only
Card adds no padding or gap; rows own their spacing
Token reference
Every layout export and its key classes.
TokenClassesContext
cardHeaderClassh-10 px-3 border-b bg-mutedcard
cardContentClasspx-3 pt-3 pb-4card
cardBodyClassp-4card
cardShowcaseClassp-4card
blurredOverlayClassbg-black/10 backdrop-blur-mdall 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>