Docs
Introduction
What Eased is, what is free and what is Pro, and where to start.
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.
npx shadcn add https://eased.dev/r/button.jsonEvery 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.
- Concentric corners. An inner corner radius is the outer radius minus the padding between them. Components set
--radius-outerand--pad, so anything you nest inside them gets the right radius. See 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.txtlet your coding agent find, read and install components. See Quickstart for agents.
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.
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: give your coding agent one prompt.
- Installation: add your first component by hand.
- Theming: change colours, radii and the brand.
- Motion: the springs, durations and rules every component follows.
- AI and MCP: the MCP tools, Pro tokens and Markdown pages.
- Components: every component, grouped by what it's for.