Patterns

Form Field

Label + control + helper text + error message composition with context hook.

Login Form

Email + password sign-in with remember-me, validated with react-hook-form and Zod.

Sign Up Form

Registration form with password strength meter and confirmation field.

Profile Settings Form

Multi-section settings form with Select, Switch, character counter, and dirty detection.

Contact Form

Name, email, subject select, and textarea with a post-submit success state.

Page Header

Title, description, breadcrumb, and actions slot for page-level headings.

Breadcrumb

Accessible crumb trail with configurable separator.

Section Header

Lightweight block heading with optional action.

Settings Section

Structured settings card: header, content body, optional footer.

Empty State

Icon, title, description and optional CTA for zero-data views.

Loading State

Centered spinner or skeleton-row variant for async loading.

Error State

Error icon, title, description and retry CTA.

Metric Card

Dashboard stat card: label, value, trend badge, icon.

Stat Group

Responsive grid of stat cards with labels, values, and delta indicators.

Data Table

Sortable, searchable, paginated table built on the Table primitive.

Activity Feed

Chronological timeline of events with user avatars and relative timestamps.

Table Toolbar

Search + filter + actions layout above a Table.

Filter Toolbar

Active filter pills with clear-all and additional filter slots.

Sidebar Nav

NavItem, NavGroup, and SidebarNav composable building blocks.

Color Picker

Hex color picker with native input, text field, and preset swatches.

Date Range Picker

A date range selector composing Calendar in range mode with a Popover trigger.

Multi Select

Combobox-style multi-select with removable tag chips and search.

Search Input

Enhanced search field with clear button, loading state, and keyboard shortcut hint.

Command Palette

Keyboard-driven ⌘K command palette with grouped results and fuzzy search.

Confirm Dialog

Reusable confirmation dialog for destructive or irreversible actions.

Notification Bell

Bell icon with unread count badge and a dropdown notification panel.

Profile Dropdown

User avatar trigger with name, role, and a dropdown of nav links and sign-out.

Theme Switcher

Light/dark/system theme toggle with dropdown and icon-only variants.

Inline Edit

Click-to-edit text field with save on Enter and cancel on Escape.

Sortable List

Drag-and-drop sortable list with keyboard accessibility via dnd-kit.

File Dropzone

Drag-and-drop upload zone with click-to-browse, type filtering, and size limits.

Upload Progress

File upload progress display with status icons and remove action.

Chat Message List

Chat message list with user and assistant bubbles, avatars, and timestamps.

Timeline Feed

Vertical timeline with date markers and event entries.

Stepper

Multi-step progress indicator with horizontal and vertical orientations.

Kanban Board

Drag-and-drop Kanban board with columns, cards, and drop-zone highlighting.