Design System

Design System

Explore all available components with interactive examples and documentation

Color System
4 Tokens
CourtImmo brand palettes, semantic tokens, status colors, and data-viz series
OrangeTealRoseGraySemanticCharts
Icons
5 Levels
The CourtImmo icon system: Lucide chrome, Tabler depth, MDI coverage, house-drawn custom, and animated icons — searchable, with a fintech-relevance filter
LucideTablerMDICustomAnimatedFintech filter
Layout Components
6 Layouts
Layout primitives for structuring pages and applications
AppShellDashboardShellSectionSplitSidebarLayoutDebug Overlay
shadcn/ui Components
62 UI
Complete collection of shadcn/ui components with interactive demos
Buttons & InputsData DisplayFeedbackNavigationOverlaysForms
prompt-kit Components
16 AI
AI-focused components for chat interfaces and LLM interactions
Chat ContainerMessageMarkdownCode BlockLoaderTool

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.