Basic Design System

A semantic, docs-driven component library built with reusable design tokens and practical UI primitives. Explore documented components, preview live examples, and learn how the system fits together.

Browse components View blocks

Next.js 16 · React 19 · TypeScript · Tailwind CSS v4

Design tokens at a glance

system-basesystem-cardsystem-bordersystem-headingsystem-textsystem-errorsystem-successsystem-infosystem-warning

UI components

Design principles

The design system is built around a few core ideas that keep it cohesive, maintainable, and easy to use.

Semantic tokens

Styling is built around named tokens like system-card, system-border, and system-heading so the visual language stays consistent across every surface.

Reusable primitives

UI building blocks live in components/ui and are designed to compose into larger patterns without one-off overrides.

Docs-first workflow

Every component is paired with usage examples, live previews, and structured documentation that stays close to the implementation.

Consistent states

Focus, disabled, error, and status states share patterns and semantic colors so components feel like one system.

Component categories

Explore the library by category. Each section includes documented components with live previews, usage examples, and API references.

UI Components

Core interactive primitives that serve as the foundation for building interfaces.

Button
Input
Textarea
Checkbox
Radio

Blocks & Sections

Higher-level composition patterns that combine primitives into reusable layouts.

Card
Tabs
Sidebar

AI Components

Interface patterns purpose-built for AI-driven interactions and chat experiences. This section is growing.

AI Chat

See it in action

A curated look at the components and patterns available in the system.

Buttons

Form controls

Notification preferences

Email notifications

Push notifications

SMS notifications

Compositional blocks

System overview

Components are grouped into UI primitives, blocks, and AI patterns. Each category has its own documentation section.

Explore the system

Start with one of the documentation pathways below. Each section includes live previews, usage code, and API details.

UI Components

Core interactive primitives — Button, Input, Checkbox, Radio, Textarea, and more — each with full documentation.

Browse

Blocks & Sections

Higher-level composition patterns like Card, Tabs, and Sidebar that combine primitives into reusable layouts.

Browse

AI Components

Interface patterns purpose-built for AI-driven interactions and chat experiences.

Browse