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:

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

2. Import the component from components/eased/:

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:

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:

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

EASED_PRO_TOKEN=eased_pro_…

3. Add the registry to components.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:

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