Contents
Why easeUI
Most animation libraries make interfaces feel busy. easeUI goes the other way. Every component is tuned so motion confirms what you did and then gets out of the way.
- Fast. Interface motion lands between 100 and 300ms, and exits are quicker than entrances.
- Honest. Animations use transform and opacity, ease out, and never bounce in product UI.
- Calm. Nothing scales on hover, presses settle at 0.97, and state changes crossfade instead of snapping.
- Accessible. Keyboard support and screen reader labels come built in, and motion turns off when the system asks for reduced motion.
- Yours. Components install as plain TypeScript files, so you can read and change every line.
What's inside
Two categories, both free and MIT licensed.
| Category | What you get |
|---|
| Components | Buttons, inputs and overlays, plus feedback like toasts and alerts. Includes a command palette, OTP input, number ticker, tabs, drawer, stepper, rating, tag input and avatar group. |
| Agents | Pieces for AI interfaces. A message bubble, streaming text and responses, a reasoning disclosure, loading states, a prompt input, tool approval and a task list. |
Every component page has a live preview, the full source, install steps and an API reference. The site always has the current list, so this file doesn't keep one.
What's new
New components land every few days. The latest:
| Component | What it does |
|---|
| Reasoning Disclosure | Shimmers "Thinking" while a model reasons, then folds into "Thought for 8s" once it answers. |
Every change, release by release, is in CHANGELOG.md.
Getting started
easeUI works in any React project that uses Tailwind CSS 4 and the shadcn CLI.
1. Set up shadcn if your project doesn't use it yet.
npx shadcn@latest init
2. Add a component. easeUI is in shadcn's registry directory under the @easeui namespace, so this works with no extra setup.
npx shadcn@latest add @easeui/toast
Installing from the registry URL works the same way.
npx shadcn@latest add https://easeui.dev/r/toast.json
3. Use it.
import { Toaster, toast } from "@/components/motion/toast";
export default function App() {
return (
<>
<button onClick={() => toast.success("Changes saved")}>Save</button>
<Toaster />
</>
);
}
Use it with your coding agent
Claude Code, Cursor and Codex can find and install easeUI components for you.
Connect the MCP server, so your agent can search the catalog and read each component's props.
claude mcp add --transport http easeui https://easeui.dev/api/mcp
Or add the easeUI skill, which tells your agent to reach for an existing component before writing a new one.
npx skills add rjcuff/easeui --skill easeui
The full guide, including llms.txt, is at easeui.dev/docs/ai-agents.
easeUI Pro
easeUI is free and stays free. easeUI Pro is the paid set, built for AI products, with the same motion rules.
- AI components. A model picker with real provider logos, streaming messages, tool calls, approval prompts, diff review, voice input and usage meters.
- Page blocks. Heroes, pricing walls, dashboards, settings, auth and agent consoles, wired together and ready to drop in.
- Templates. Whole apps you download and deploy, like an AI chat app and a personal site.
Everything in Pro installs the same way as easeUI, as source files you own. See the catalog.
Develop locally
easeUI is built with Next.js 16, React 19, Tailwind CSS 4 and Bun.
git clone https://github.com/rjcuff/easeui.git
cd easeui
bun install
bun run dev
The site runs at http://localhost:3000.
| Script | What it does |
|---|
bun run dev | Starts the dev server |
bun run build | Builds for production |
bun run typecheck | Checks types |
bun run lint | Lints with Biome |
bun run lint:shadcn | Lints components against shadcn registry rules |
bun run test | Runs unit tests |
bun run check:registry | Validates every registry entry, date and source file |
bun run check | Runs typecheck, both linters and the registry check together |
Project layout
app/ Routes, pages and registry endpoints
components/motion/ The installable components
components/previews/ Live previews shown on the site
components/app/ Site chrome, docs UI and the playground
lib/registry.ts The component catalog
lib/ease.ts Shared motion tokens
Adding a component
- Add the source file to
components/motion/.
- Add a preview to
components/previews/<category>/ and register it in components/previews/index.tsx.
- Add an entry to
lib/registry.ts and its dates to lib/component-dates.ts.
- Run
bun run check.
CONTRIBUTING.md has the motion and accessibility rules every component follows.
Contributing
Issues and pull requests are welcome. Read CONTRIBUTING.md before you start.
License
Released under the MIT License. Made by Ryan.
