Design with AI
Design Systems for AI

AI Design System

A design system optimized for AI-assisted workflows.

LLM Written
Human Reviewed

Danger

This is still in development
  1. Data Table — Core to B2B; supports sorting, filtering, pagination, batch actions, and inline editing
  2. Button — Primary, secondary, tertiary, danger, and ghost variants
  3. Text Input — Single-line form fields with validation states
  4. Dropdown — Single-select menus for filters and form fields
  5. Modal — Confirmations, forms, and detail views overlaid on content
  6. Notification — Inline, toast, and banner alerts for system feedback
  7. Header — Top navigation shell with product name, nav links, and action icons
  8. Side Nav — Left-rail navigation for multi-section enterprise apps
  9. Breadcrumb — Wayfinding in deep navigation hierarchies
  10. Tabs — Organizing content sections within a page or panel
  11. Form — Structured layouts for data entry with validation
  12. Select — Native-style dropdowns for simpler form contexts
  13. Checkbox — Multi-select options in forms and table filters
  14. Toggle — Enabling/disabling settings and feature flags
  15. Tag — Status labels, categories, and metadata chips
  16. Loading / Skeleton — Spinners and skeleton screens during data fetches
  17. Pagination — Navigating large datasets in tables and lists
  18. Overflow Menu — Contextual action menus on table rows and cards
  19. Date Picker — Single and range date selection for filters and scheduling
  20. Search — Global and scoped search inputs with typeahead support

The top tier for most B2B apps would be: Data Table, Header, Side Nav, Form components, Modal, and Notification — you'll find those in virtually every enterprise dashboard or admin interface.