Elements
UI building blocks from individual components to complete page templates
Overview
Elements are the building blocks of your UI, organized by complexity and scope. Start with individual components, combine them into patterns, arrange them in layouts, and use templates as complete starting points for new pages.
UI: Individual UI primitives (Button, Card, Input)
Media: Audio, video, and MIDI playback components
AI Elements: Chat panels, messages, and prompt inputs
Charts: Data visualization with Recharts
Layouts: Page structure and composition components
Patterns: Component combinations for specific use cases
Templates: Complete page implementations
Element Hierarchy
Components
Atoms & molecules
Patterns
Organisms
Layouts
Page structure
Templates
Complete pages
UI
Reusable UI building blocks built on shadcn/ui and Radix primitives
- 45+ components
- Fully accessible
- Customizable
- Dark mode ready
Media
Audio and video playback components for rich media experiences
- Audio player
- MIDI player
- Transport controls
- Waveform display
AI Elements
AI assistant UI components for conversational interfaces and chat
- Chat panel
- Message bubbles
- Prompt input
- Streaming support
Charts
Data visualization components built on Recharts with RDS theming
- Bar & line charts
- Area charts
- Tooltips
- Legends
Layouts
Page structure components for consistent application layouts
- Page headers
- Composition pattern
- Responsive design
- Slot-based API
Patterns
Common UI patterns that combine components to solve specific problems
- Form patterns
- Data display
- Navigation
- Search & filter
Templates
Complete page templates ready to use as starting points
- Dashboard
- List views
- Detail pages
- Settings