# Introduction

Eased is a library of motion-first React components. You install each component with the shadcn CLI, so its source lands in your project and you can change any line.

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

Every component uses React 19, Tailwind CSS v4, Base UI and Motion.

## What Eased gives you

- **Tuned motion.** Three named springs and a small set of curves, chosen per interaction. Exits are faster than entrances, and you can interrupt any animation halfway without a jump. See [Motion](/docs/motion).
- **Concentric corners.** An inner corner radius is the outer radius minus the padding between them. Components set `--radius-outer` and `--pad`, so anything you nest inside them gets the right radius. See [Theming](/docs/theming).
- **Every state designed.** Hover applies only on pointer devices. Press feedback scales to the control's width. Keyboard focus shows a ring. Disabled and loading states keep their width. Every animated component has a reduced-motion branch.
- **Agent support.** An MCP server, a Markdown version of every page and `llms.txt` let your coding agent find, read and install components. See [Quickstart for agents](/docs/agent-quickstart).

## Free and Pro

| | Free | Pro |
|---|---|---|
| Licence | MIT | Eased Pro licence, unlimited projects |
| Install | `npx shadcn add https://eased.dev/r/<name>.json` | `npx shadcn add @eased-pro/<name>` with a token |
| Source | Yes | Yes |
| Light and dark | Yes | Yes |
| Agents (MCP) | Docs and source | Docs, plus source with a Pro token |

Free components cover the parts every app needs: buttons, inputs, tabs, popovers, tables, the chat composer, thinking states and more. They install from the public registry with one command.

Eased Pro adds the showpieces, such as Spotlight Tour, Scrub Label, Group-by List and Gliding Focus Ring, with source included. You pay once for every current and future Pro component, and install them from a private registry with a personal token. See [Pro components](/docs/installation#pro-components).

## What you see is what you install

Every demo on eased.dev is the component itself, running. The site reads the same stylesheet that the registry installs into your app, and the library's light and dark themes come from the same tokens.

## Next steps

- [Quickstart for agents](/docs/agent-quickstart): give your coding agent one prompt.
- [Installation](/docs/installation): add your first component by hand.
- [Theming](/docs/theming): change colours, radii and the brand.
- [Motion](/docs/motion): the springs, durations and rules every component follows.
- [AI and MCP](/docs/ai-mcp): the MCP tools, Pro tokens and Markdown pages.
- [Components](/components): every component, grouped by what it's for.