Installation

Prerequisites

Use React 19, Tailwind CSS v4, and an initialized shadcn project.

Register the namespace

Add the boxbox registry with the CLI:

bunx shadcn@latest registry add @boxbox=https://react-boxbox.vercel.app/r/{name}.json

Or add this to your components.json:

{
  "registries": {
    "@boxbox": "https://react-boxbox.vercel.app/r/{name}.json"
  }
}

Install the theme

bunx shadcn@latest add @boxbox/boxbox-theme

Add the dark class to <html> to use the dark palette.

Optional fonts

For the intended display and timing typography, install the font registry item.

bunx shadcn@latest add @boxbox/boxbox-fonts

Add a component

Choose a component page, then run its CLI command in your project.

bunx shadcn@latest add @boxbox/<component-name>

Without the CLI

Every component page has a Manual tab next to the CLI command. It lists the component and every @boxbox/* item it depends on as separate files, each with its target path, plus the theme tokens it needs and a Copy all files button. Paste them in and you are done.

The sources there already carry the two rewrites the CLI would apply on install:

• @/registry/boxbox/ui/<name> → @/components/ui/<name>
• @/registry/boxbox/lib/<name> → @/lib/<name>

@/lib/utils is left alone: shadcn already puts cn there. If your project has no components.json, the Manual tab's last step shows the helper to add.

Respect reduced motion

Components animate with motion. Wrap your app once so position and layout motion follows the visitor's system setting. Colour and opacity changes stay on, so every state is still readable.

import { MotionConfig } from 'motion/react';

export function App({ children }: { children: React.ReactNode }) {
  return <MotionConfig reducedMotion="user">{children}</MotionConfig>;
}