Introduction
The Harness Design System is built on a token-based architecture that ensures consistent styling across all components. Every component uses design tokens (prefixed with cn-) for colors, spacing, typography, and other visual properties, enabling seamless theme switching between light, dark, and high-contrast modes with multiple accessibility variants. This approach provides flexibility and maintainability while ensuring a cohesive user experience across the entire platform.
Examples
Components by category
Form & Inputs
Text Input · Textarea · Number Input · Search Input · Select · Multi Select · Checkbox · Radio · Switch · Slider · Calendar · Label · Caption · Form
Actions
Button · Button Group · Button Layout · Split Button · Toggle · Toggle Group · Copy Button
Navigation
Breadcrumb · Tabs · Sidebar · Pagination · Tree View · File Explorer · Link
Data Display
Data Table · Table V2 · Card · Card Select · Accordion · Stacked List · Draggable Card · View Only · Widgets
Overlays & Dialogs
Dialog · Alert Dialog · Drawer · Sheet · Popover · Dropdown Menu · Tooltip · Time Ago Card
Feedback & Status
Alert · Status Badge · Tag · Counter Badge · Progress · Skeleton · Toast
Media & Visual
Avatar · Icon · Logo · Illustration · Carousel
AI & Chat
Message Bubble · Prompt Input · Reasoning · Shimmer · Typing Animation