Installation

Requirements

• React 19 and TypeScript.
• A bundler that imports CSS from components: Next.js, Vite, React Router and most others do.
• Nothing else. No Tailwind, no runtime packages: the pieces ship their own CSS, fonts and motion.

Every piece is a client component. The CLI and the download add 'use client' to the files that need it, so in the Next.js App Router you can render a piece from a server component as is.

With the shadcn CLI

Free pieces install straight from their URL:

npx shadcn@latest add https://obsydeui.com/r/button.json

The same command is on every item page, with pnpm and bun versions. If your project has no components.json yet, the CLI offers to create one first. Pro pieces install by name, @obsyde/<name>, once your licence key is set up: see Pro and the CLI.

Where files land

A piece installs under your components directory, in its own folder:

components/obsyde/
  LICENSE.txt
  ember/
    shared/        tokens, fonts, springs and the accent ramp
    button/        the piece itself

Shared folders (ember/shared, and ember/viz-kit for charts) install once and every piece after that reuses them. Keep the layout: the files import each other by relative path. Then import the piece from its folder:

import { Button } from '@/components/obsyde/ember/button/Button';

export function Save() {
  return <Button label="Save changes" />;
}

By hand

Each item page has Download, a zip of the piece and its shared files:

LICENSE.txt
items/
  ember/
    shared/
    button/

Create components/obsyde/ in your project, move everything inside items/ into it, and put LICENSE.txt beside them. The result is the same layout the CLI writes, so the import above works as is. Pro pieces download once you have Pro.

You can also copy each file from the code view. Copied files don't get the directive: if your app uses React Server Components, add 'use client'; at the top of each .tsx file that uses hooks or event handlers.

Fonts

The pieces use Geist and Geist Mono. The styles bring both fonts with them, with their licence, so there is nothing to set up.