Patterns
36 theme-agnostic patterns. Compose core atoms, reference tokens, adapt to any theme.
Heroes
Cards
AuthCard
Authentication form card with dynamic fields, submit button, and footer slot.
ContactCard
Person or record card with avatar, status badge, and contact info.
FeatureCard
Feature highlight card with icon, title, and description text.
MetricCard
Dashboard KPI card with label, value, change indicator, and trend direction.
PricingCard
Pricing tier card with price, features list, CTA, and highlighted variant.
ProfileCard
Person card with avatar, bio, and action buttons.
TestimonialCard
Quote card with attribution, avatar, and role.
Data
ComparisonTable
Feature comparison matrix across multiple products with badge support.
DataTableFull
Full data table with sortable columns, badge cell values, and optional caption.
DataTableRow
Single data row with label, value, optional secondary text and status badge.
FieldRow
Label-value pair for displaying key-value information.
StatsRow
Horizontal row of statistics with labels, values, and trend indicators.
Navigation
Communication
ActivityItem
Timeline or feed entry with user avatar, action text, and timestamp.
AlertBanner
Full-width notification banner with message, variant, and optional action.
CommentThread
Comment with user avatar, body text, timestamp, and reply action.
NotificationItem
Notification entry with user avatar, message, timestamp, and unread state.
TimelineGroup
Groups timeline entries under a date heading.
Content
Carousel
CSS scroll-snap carousel with navigation arrows, dots, and IntersectionObserver-based slide tracking.
CodeBlock
Code display with optional filename header and copy button.
Footer
Site footer with column links, logo, and legal text.
SectionHeader
Section title with optional eyebrow badge, subtitle, and alignment control.
SettingsRow
Settings option with label, description, and control slot.
Forms
Form
Wraps FormField children in a <form> with Grid layout, gating submit behind validation of all registered fields.
FormField
Wraps a form atom with validation rules, managing dirty/touched/error state and injecting the resolved error string via cloneElement.
FormSection
Groups related form fields under a heading with optional description.