Design System

Design System

Explore all available components with interactive examples and documentation

Layout Components
6 Layouts
Layout primitives for structuring pages and applications
AppShell
DashboardShell
Section
Split
SidebarLayout
Debug Overlay
shadcn/ui Components
62 UI
Complete collection of shadcn/ui components with interactive demos
Buttons & Inputs
Data Display
Feedback
Navigation
Overlays
Forms
prompt-kit Components
16 AI
AI-focused components for chat interfaces and LLM interactions
Chat Container
Message
Markdown
Code Block
Loader
Tool

Layout Components

AppShell
Layout
Full application layout with header, footer, and main content

Features:

  • ✓Sticky/fixed header
  • ✓Footer at bottom
  • ✓Container wrapper
  • ✓Min-height viewport
DashboardShell
Layout
Dashboard layout with sidebar and topbar

Features:

  • ✓Fixed sidebar navigation
  • ✓Optional top bar
  • ✓Scroll management
  • ✓Mobile responsive
Section
Layout
Full-width section with optional inner container

Features:

  • ✓Full-bleed support
  • ✓Background styling
  • ✓Container wrapper
  • ✓Vertical padding
SidebarLayout
Layout
Two-column layout with sidebar and main content

Features:

  • ✓Left/right positioning
  • ✓Responsive collapse
  • ✓Configurable width
  • ✓Sticky sidebar
Split
Layout
Two-column split layout with flexible ratios

Features:

  • ✓Configurable ratio
  • ✓Responsive stacking
  • ✓Optional min-height
  • ✓Gap control
Debug Overlay
Layout
Visual layout debugger for development

Features:

  • ✓Container visualization
  • ✓Padding indicators
  • ✓Margin outlines
  • ✓Viewport info

About This Design System

This design system includes layout primitives, shadcn/ui components, and prompt-kit AI components. All components are fully typed with TypeScript, follow accessibility best practices, and support dark mode. Use the navigation above to explore each category.