Make it yours.

1. Prepare your project

Use React, TypeScript and Tailwind CSS v4. Configure your project with the shadcn CLI, including a stylesheet and the @/ import alias.

npx shadcn@latest init

Start with the official shadcn installation guide for your framework. This library is developed with React 19.

2. Add a component

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/button.json

The registry includes its source, required primitives, exact CSS, shared motion utilities and licensed fonts. You own the copied files.

import { Button } from "@/components/ui/button";

export function ContinueAction() {
  return <Button onClick={() => console.log("Continue")}>Continue</Button>;
}

3. Choose the appearance

Set data-mode on the document element. Light and dark use the same spacing, typography and component structure.

document.documentElement.dataset.mode = "dark"; // or "light"

Keep one global stylesheet importing Tailwind and the styles added by the installer. The bundled font licences must stay with the distributed font files.

4. Give motion a character

Open Motion settings beside any example to try all nine selection presets. Glide is calm by default. Copy selection settings into your application, or install the Motion Adjuster for deeper control.

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/adjuster.json

Settings persist in this browser. Reduced motion takes priority, and Off keeps controls functional and still. The 3D scene loads Three.js only when you install and use that entry.