Sage Design Engine (@thesage/ui)

---

Sage Design Engine is a component library and design system built on Radix UI primitives and Tailwind CSS. 48+ accessible components, three distinct themes with runtime switching, and a user-controlled motion system — all wired through a 4-layer design token architecture.

Features

- Accessible by default — Built on WAI-ARIA standards via Radix UI. Keyboard navigable, screen reader compatible, WCAG AA contrast.
- Three themes, real personality — Studio (professional), Terra (organic), Volt (electric). Runtime switching via CSS variables, light and dark modes each.
- User-controlled motion — A 0–10 intensity scale that respects prefers-reduced-motion. Intensity 0 works perfectly — no degraded experience.
- Modular imports — Core stays lean. Heavy features (forms, dates, tables, drag-and-drop, WebGL) ship as optional subpath exports — install only what you use.
- Type safe — Written in TypeScript with full type inference. React 19 ref-as-prop pattern throughout.
- Design token system — Colors, typography, spacing, motion, and syntax tokens. Change one primary color, everything updates.

Installation

``bash
pnpm add @thesage/ui
`

Sage requires Tailwind CSS as a styling engine:

`bash
pnpm add -D tailwindcss@^3.4 postcss autoprefixer
`

$3

Install peer dependencies only for the features you need:

`bash


Forms (react-hook-form + zod validation)

`js
/* @type {import('tailwindcss').Config} /
module.exports = {
presets: [require('@thesage/config/tailwind')],
content: [
"./src/*/.{ts,tsx}",
"./node_modules/@thesage/ui/dist/*/.{js,ts,jsx,tsx}"
],
}
`

$3

`tsx
import '@thesage/ui/globals.css';
`

Usage

`tsx
import { Button, Card, ThemeProvider } from '@thesage/ui';

export default function App() {
return (




Welcome to Sage

`tsx
import { useMotionPreference, useTheme } from '@thesage/ui/hooks'
import { ThemeProvider } from '@thesage/ui/providers'
import { cn } from '@thesage/ui/utils'

// Optional feature imports
import { Form, FormField } from '@thesage/ui/forms'
import { DatePicker } from '@thesage/ui/dates'
import { DataTable } from '@thesage/ui/tables'
import { SortableList } from '@thesage/ui/dnd'
``

Component categories

| Category | Examples |
|----------|----------|
| Actions | Button, Toggle, ToggleGroup |
| Forms | Input, Select, Checkbox, Switch, Slider, SearchBar |
| Navigation | Tabs, Menubar, Breadcrumb, Pagination, NavigationMenu |
| Overlays | Dialog, Sheet, Popover, Tooltip, ContextMenu, HoverCard |
| Data Display | Card, Avatar, Badge, Table, ScrollArea, Carousel |
| Feedback | Alert, Progress, Skeleton, Toast (Sonner) |
| Layout | Accordion, Separator, ResizablePanels, Collapsible |
| Features | Customizer, ThemeSwitcher |

Bundle size

Core and optional entry points are independently tracked via size-limit:

| Entry point | Brotli size |
|-------------|-------------|
| Core | ~146 KB |
| Hooks | ~40 KB |
| Providers | ~60 KB |
| Tokens | ~70 KB |
| Utils | ~25 KB |
| Forms | ~9.4 KB |
| Dates | ~29 KB |
| Tables | ~8.3 KB |
| DnD | ~8.3 KB |
| WebGL | ~1.1 KB |

License

MIT © Shalom Ormsby