Get started

Installation

Add the registry to a project and install components.

1. Add the registry

In a project that already uses shadcn (Tailwind v4, a components.json), add the @opendraft registry:

components.jsonjsonReady

1{2  "registries": {3    "@opendraft": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/r/{name}.json"4  }5}

2. Install the theme, then components

terminalbashReady

1npx shadcn@latest add @opendraft/theme      # tokens, light and dark2npx shadcn@latest add @opendraft/button     # any single component3npx shadcn@latest add @opendraft/all        # everything

Dependencies come along automatically: installing chat-app also brings the sidebar, messages and the motion tokens it needs.

3. Wrap your app once

providers.tsxtsxReady

1import { MotionConfig } from "motion/react"23export function Providers({ children }: { children: React.ReactNode }) {4  // Respect the OS "reduce motion" setting in every component.5  return <MotionConfig reducedMotion="user">{children}</MotionConfig>6}

4. Fonts

The theme expects three font variables: --font-geist (interface), --font-newsreader (display) and --font-geist-mono (labels). In Next.js, load them with next/font/google and put their variables on <html>.