# Installation

Eased components are shadcn registry items. The shadcn CLI copies each component's source into your project, installs its npm dependencies and merges the Eased stylesheet into your global CSS.

## Before you begin

- **React 19** and a framework that the shadcn CLI supports, such as Next.js, Vite, React Router or Astro.
- **Tailwind CSS v4.** Eased uses `@theme inline`, `@utility` and `@custom-variant`, which need v4.
- **A `components.json`.** If your project doesn't have one, run `npx shadcn init`.

You don't need to install npm dependencies by hand. Each component brings its own, usually `motion` and `@base-ui/react`.

## Add a component

1. Run `shadcn add` with the component's registry URL:

```bash
npx shadcn add https://eased.dev/r/button.json
```

2. Import the component from `components/eased/`:

```tsx
import { Button } from "@/components/eased/button/button";

export function Save() {
  return <Button variant="primary">Save</Button>;
}
```

Each component page shows its exact install command. To install several components, list their URLs in one command:

```bash
npx shadcn add https://eased.dev/r/tabs.json https://eased.dev/r/tooltip.json
```

Most components also have a demo item, `<name>-demo`, which installs the example from the component's page.

## What gets added to your CSS

The first component you install brings two shared registry dependencies:

| Item | What it adds |
|---|---|
| `eased-tokens` | The Eased stylesheet, merged into your global CSS: colour, shadow, radius, control-height and motion variables; the utilities `radius-nested`, `squircle`, `fade-x`, `image-ring`, `hit-area` and `focus-ring`; and the variants `hover-fine`, `group-hover-fine` and `reduced` |
| `eased-motion` | `components/eased/lib/`: the Motion springs and tweens (`motion.ts`), press classes (`press.ts`) and small DOM and platform helpers |

The stylesheet sits beside shadcn/ui without collisions:

- Every raw variable starts with `--eased-`, so your `--accent`, `--border` and `--radius` don't change.
- The utilities it adds (`bg-surface`, `border-line`, `bg-brand`, `text-ui`, `rounded-panel`, `shadow-raised`, `ease-standard`, `h-control-sm` …) don't exist in Tailwind's default theme or in shadcn/ui, so `text-base`, `rounded-lg` and `bg-accent` keep your values.
- It never styles a base element (`html`, `body`, `*`, `::selection`) and never resets a theme namespace.

You don't import a CSS file. Light theme follows `:root`. Dark theme follows a `.dark` class or `data-theme="dark"` on an ancestor, so it works with `next-themes` and shadcn's default setup.

## Pro components

Pro components install from a private registry, `@eased-pro`, with a personal token.

1. Sign in at [eased.dev/account](/account) and create a token. Copy it: the token starts with `eased_pro_` and is shown once.
2. Add the token to `.env.local`, which the shadcn CLI reads:

```bash
EASED_PRO_TOKEN=eased_pro_…
```

3. Add the registry to `components.json`:

```json
{
  "registries": {
    "@eased-pro": {
      "url": "https://eased.dev/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${EASED_PRO_TOKEN}"
      }
    }
  }
}
```

4. Install a Pro component by name:

```bash
npx shadcn add @eased-pro/spotlight-tour
```

The CLI fills in the token from your environment, so it never goes into git. You can keep up to 10 active tokens, so create one per machine or CI job, and revoke any token at any time.

Pro source opens with early access. Until then, the registry accepts a valid token but answers that Pro source isn't open yet.

## Troubleshooting

| Problem | Fix |
|---|---|
| Classes such as `bg-surface` have no effect | The stylesheet didn't merge. Check that your global CSS imports Tailwind v4 (`@import "tailwindcss"`), then run the install again. The CLI merges into the CSS file named in `components.json`. |
| Components render light inside a dark app | Dark follows `.dark` or `data-theme="dark"` on an ancestor. Make sure your theme switcher sets one of them. |
| `401` from `/r/pro` | The token is missing, mistyped or revoked. Check `EASED_PRO_TOKEN` and the `Authorization` header in `components.json`. |
| `403` from `/r/pro` | The token is valid, but its account has no Pro, or Pro access isn't open yet. |
| `429` from `/r/pro` | You sent more than 120 requests in a minute with one token. Wait a minute, then try again. |
| Animations don't play | Reduced motion is on in your OS. Every Eased component honours it and replaces movement with a short fade. |