Get started
Introduction
What opendraft is and how it's put together.
opendraft is a personal design system for apps and agent interfaces. Behavior comes from Radix, the look comes from one token file, and every state change moves with the same set of springs.
Components install as source through a shadcn registry. You own the code once it's in your project, and token names match shadcn's, so stock shadcn components pick up the theme too.
How it's organised
components/ui holds the core set: buttons, inputs, menus, dialogs. components/motion holds animated and app-level pieces: the sidebar, data table, command palette and textures. components/agents holds everything for chat, tools, approvals and voice.
Tokens live in app/globals.css; motion lives in lib/motion.ts. Components never hard-code colors, shadows, easings or springs.