Patterns
Patterns are reusable compositions of core components that solve common UI problems. Unlike built-in components, patterns are meant to be copied and customized for your specific needs.
Why patterns?
Zen focuses on providing a minimal set of foundational components. Instead of shipping every possible UI pattern as a component, we provide examples showing how to compose our primitives to build common interfaces.
This approach gives you:
- Full control - Copy the code and modify it to fit your exact requirements
- No bloat - Your bundle only includes what you actually use
- Learning - Understand how components work together
- Flexibility - Adapt patterns to your design system
How to use
Each pattern page includes:
- A live preview of the pattern
- Complete, copy-paste ready code with imports
- Explanations of key concepts
- Variations for common use cases
Simply copy the code into your project and customize as needed.
Available patterns
Layout
Build application layouts and page structures.
| Pattern | Description |
|---|---|
| App Shell | Full-page layout with header, sidebar, and content area |
| Dashboard Grid | Responsive card grid for metrics/widgets |
| Page Header | Title, breadcrumbs, and action buttons composition |
| Sidebar | Collapsible sidebar for application navigation |
| Split View | Resizable two-panel layout (list/detail) |
Navigation
Help users navigate through your application.
| Pattern | Description |
|---|---|
| Command Palette | Keyboard-driven command search (⌘K style) |
| Nav Menu | Collapsible navigation menu with groups |
| Stepper | Multi-step form or process flow |
Data Display
Present information and content to users.
| Pattern | Description |
|---|---|
| Empty State | Placeholder with icon, message, and CTA |
| Icon Label | Icon and text paired together |
| List Item | Configurable list row with avatar, title, meta, actions |
| Stat Card | Metric display with label, value, and trend indicator |
Feedback
Communicate status and gather confirmation from users.
| Pattern | Description |
|---|---|
| Error Page | 404/500 error display with navigation options |
| Skeleton Loader | Content placeholder during loading |
Forms
Collect user input and handle form interactions.
| Pattern | Description |
|---|---|
| Filter Panel | Collapsible filters with chips for active filters |
| Login Form | Email/password with validation and social auth buttons |
| Settings Form | Grouped settings with sections and descriptions |