Overview
This design system provides a comprehensive set of reusable components, icons, and design patterns for building consistent interfaces.
Icons
Icon library using Huge Icons (primary) and Hero Icons (secondary).
TypeScript
TypeScript
TypeScript
TypeScript
xs (16px)
sm (20px)
md (24px)
lg (32px)
xl (40px)
Common Components
Reusable application components for consistent UI patterns.
Container
Responsive container with preset sizes (sm, md, lg, xl, full)
Container with max-w-2xl (sm)
Section
Page section with consistent spacing and container wrapper
Section component provides consistent spacing and container wrapper
Page Header
Consistent page header with title, description, and actions
Example Page
This is an example page header
Card Wrapper
Wrapper for Card component with consistent structure
Card Title
Card description
Card content goes here
Empty State
Component for displaying empty states
No items found
Get started by creating your first item
Loading Spinner
Loading spinner with different sizes
Loading...
SmallLoading...
MediumLoading...
LargeMessages
Error and success message components
This is an error message
This is a success message
Form Components
Reusable form components with react-hook-form integration. All form fields include labels, error handling, and validation automatically.
See components/forms/FORMS.md for full documentation.
Complete Form Example
Example form using InputField, SelectField, and TextareaField components
Badges
Badge component variants.
TypeScript
DefaultSecondaryDestructiveOutline
Need help? Check out the documentation or get started building.