# Installation

> Add a piece with the shadcn CLI, or by hand. Requirements, where files land, and what comes with them.

## 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:

```bash
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](https://obsydeui.com/docs/pro).

## Where files land

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

```text
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:

```tsx
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:

```text
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](https://obsydeui.com/pricing).

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.