Eased
Motion-first React components for shadcn: search, read docs and get install commands.
Installation
Ajoutez ceci à la configuration MCP de votre client (Claude Desktop : claude_desktop_config.json ; Cursor : .cursor/mcp.json ; VS Code et les autres utilisent la même forme « mcpServers »).
Remote (streamable-http)
Claude Code
claude mcp add --transport http eased 'https://eased.dev/api/mcp'Configuration JSON (Claude Desktop, Cursor, VS Code)
{
"mcpServers": {
"eased": {
"type": "http",
"url": "https://eased.dev/api/mcp"
}
}
}Documentation
Tirée du README du projet sur GitHub, actualisée chaque semaine. Les liens ouvrent GitHub.
Eased
Eased is a library of motion-first React components for shadcn, installed with the shadcn CLI.
eased.dev · Components · Docs
This repository is the free, MIT-licensed part of Eased: the source of every free component, its docs, and the registry JSON that eased.dev/r serves.
Install
Add a component with the shadcn CLI, by its registry name or by its URL:
npx shadcn add @eased/buttonnpx shadcn add https://eased.dev/r/button.json@eased/<name> works because Eased is listed in the shadcn registry index, so the CLI finds @eased without a registries entry in components.json.
The URL form needs the .json extension: https://eased.dev/r/button.json works, https://eased.dev/r/button returns 404.
The CLI copies the component's source into components/eased/<name>/, installs its npm dependencies and merges the Eased stylesheet into your global CSS. There is no CSS file to import. You own the code from then on.
Requirements
- React 19
- Tailwind CSS v4
- A
components.json. If your project doesn't have one, runnpx shadcn init.
The CLI installs each component's npm dependencies for you. Across the free components these are @base-ui/react (36), @tanstack/react-table (2), d3-scale (1), d3-shape (1), motion (55), shiki (3), with the number of components that use each.
Free components
Actions
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Button | button | An animated button for React and shadcn, with a loading state that keeps its width. | npx shadcn add @eased/button | Docs | Source |
| Undo Pill | undo-pill | An animated undo pill for React and shadcn, with a countdown ring that commits the action only when it runs out. | npx shadcn add @eased/undo-pill | Docs | Source |
| Kbd | kbd | An animated keycap for React and shadcn, pressing down when the real key does. | npx shadcn add @eased/kbd | Docs | Source |
Inputs
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Input | input | An animated text input for React and shadcn, with leading and trailing addons and an error state. | npx shadcn add @eased/input | Docs | Source |
| Textarea | textarea | An animated textarea for React and shadcn, growing with its text, with a character counter. | npx shadcn add @eased/textarea | Docs | Source |
| Field | field | An animated form field for React and shadcn, with a label, a control and one line for help or errors. | npx shadcn add @eased/field | Docs | Source |
| Slider | slider | An animated slider for React and shadcn, single or range, with a live value readout. | npx shadcn add @eased/slider | Docs | Source |
| Number Field | number-field | An animated number field for React and shadcn, with steppers that speed up while held. | npx shadcn add @eased/number-field | Docs | Source |
| OTP Field | otp-field | An animated one-time code field for React and shadcn, with autofill and paste across every cell. | npx shadcn add @eased/otp-field | Docs | Source |
| Date Picker | date-picker | An animated date picker for React and shadcn, with a calendar popover, typed dates and ranges. | npx shadcn add @eased/date-picker | Docs | Source |
| File Upload | file-upload | An animated file upload for React and shadcn, with a dropzone, per-file progress and inline reasons for refused files. | npx shadcn add @eased/file-upload | Docs | Source |
Selection
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Segmented | segmented | An animated segmented control for React and shadcn, for picking one option from a few. | npx shadcn add @eased/segmented | Docs | Source |
| Tabs | tabs | Animated tabs for React and shadcn, with an underline or pill indicator. | npx shadcn add @eased/tabs | Docs | Source |
| Toggle Group | toggle-group | An animated toggle group for React and shadcn, with single or multiple selection. | npx shadcn add @eased/toggle-group | Docs | Source |
| Radio Group | radio-group | An animated radio group for React and shadcn, with plain radios or selectable cards. | npx shadcn add @eased/radio-group | Docs | Source |
| Checkbox | checkbox | An animated checkbox for React and shadcn, with an indeterminate state for parent checkboxes. | npx shadcn add @eased/checkbox | Docs | Source |
| Switch | switch | An animated switch for React and shadcn, which becomes a full settings row when given a label. | npx shadcn add @eased/switch | Docs | Source |
| Select | select | An animated select for React and shadcn, opening with the chosen option over its trigger. | npx shadcn add @eased/select | Docs | Source |
| Combobox | combobox | An animated combobox for React and shadcn, with filtering, a clear button and multi-select chips. | npx shadcn add @eased/combobox | Docs | Source |
| Rating | rating | An animated star rating for React and shadcn, with hover preview, half steps and a read-only mode. | npx shadcn add @eased/rating | Docs | Source |
Navigation
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Breadcrumb | breadcrumb | An animated breadcrumb for React and shadcn, folding middle crumbs into a menu when space runs out. | npx shadcn add @eased/breadcrumb | Docs | Source |
| Pagination | pagination | Animated pagination for React and shadcn, with a width that never changes as you page. | npx shadcn add @eased/pagination | Docs | Source |
| Carousel | carousel | An animated carousel for React and shadcn, with scroll snapping, mouse drag and arrow keys. | npx shadcn add @eased/carousel | Docs | Source |
Overlays
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Popover | popover | An animated popover for React and shadcn, opening from its trigger, built on Base UI. | npx shadcn add @eased/popover | Docs | Source |
| Tooltip | tooltip | An animated tooltip for React and shadcn, with an optional shortcut, never shown on touch. | npx shadcn add @eased/tooltip | Docs | Source |
| Dialog | dialog | An animated dialog for React and shadcn, with alert dialogs and nested dialogs, built on Base UI. | npx shadcn add @eased/dialog | Docs | Source |
| Command Palette | command-palette | An animated command palette for React and shadcn, opened with ⌘K, where Enter runs the first match. | npx shadcn add @eased/command-palette | Docs | Source |
| Dropdown Menu | dropdown-menu | An animated dropdown menu for React and shadcn, with checkbox and radio rows, shortcuts and submenus. | npx shadcn add @eased/dropdown-menu | Docs | Source |
| Context Menu | context-menu | An animated context menu for React and shadcn, opened by right-click or long-press, with submenus. | npx shadcn add @eased/context-menu | Docs | Source |
| Sheet | sheet | An animated sheet for React and shadcn, sliding in from an edge and becoming a bottom sheet on small screens. | npx shadcn add @eased/sheet | Docs | Source |
Status
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Badge | badge | An animated badge for React and shadcn, for statuses and counts, with an optional live dot. | npx shadcn add @eased/badge | Docs | Source |
| Progress | progress | An animated progress bar for React and shadcn, with an indeterminate state that hands over to the real value. | npx shadcn add @eased/progress | Docs | Source |
| Spinner | spinner | An animated spinner for React and shadcn, that pauses off-screen and announces itself to screen readers. | npx shadcn add @eased/spinner | Docs | Source |
| Skeleton | skeleton | An animated skeleton for React and shadcn, where every placeholder on the page shares one shimmer. | npx shadcn add @eased/skeleton | Docs | Source |
| Avatar | avatar | An animated avatar for React and shadcn, with groups that spread apart on hover. | npx shadcn add @eased/avatar | Docs | Source |
| Alert | alert | An animated alert for React and shadcn, for context, success, warning and error messages. | npx shadcn add @eased/alert | Docs | Source |
| Toast | toast | An animated toast stack for React and shadcn, with an action button such as Undo. | npx shadcn add @eased/toast | Docs | Source |
Text and numbers
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Number Roll | number-roll | An animated number counter for React and shadcn, with locale-aware formatting. | npx shadcn add @eased/number-roll | Docs | Source |
| Text Swap | text-swap | An animated text swap for React and shadcn, for changing a label or value without its neighbours jumping. | npx shadcn add @eased/text-swap | Docs | Source |
Lists and tables
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Table | table | A hairline table for React and shadcn, built on TanStack Table with a sticky header and dense or comfortable rows. | npx shadcn add @eased/table | Docs | Source |
| Cells kit | cells | An animated set of table cells for React and shadcn, for names, statuses, numbers, progress, times and IDs. | npx shadcn add @eased/cells | Docs | Source |
| Accordion | accordion | An animated accordion for React and shadcn, built on Base UI Accordion. | npx shadcn add @eased/accordion | Docs | Source |
| Scroll Area | scroll-area | An animated scroll area for React and shadcn, with a thin overlay scrollbar and edge fades. | npx shadcn add @eased/scroll-area | Docs | Source |
| Tree | tree | An animated file tree for React and shadcn, with keyboard support that follows WAI-ARIA. | npx shadcn add @eased/tree | Docs | Source |
Chat
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Composer | composer | An animated chat composer for React and shadcn, with file attachments and a Stop button while a reply streams. | npx shadcn add @eased/composer | Docs | Source |
| Message | message | An animated chat message for React and shadcn, rendering AI SDK UIMessage text and file parts. | npx shadcn add @eased/message | Docs | Source |
| Attachment Chip | attachment | An animated attachment chip for React and shadcn, with image thumbnails, upload progress and retry. | npx shadcn add @eased/attachment | Docs | Source |
AI
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Shimmer Text | shimmer-text | Animated shimmer text for React and shadcn, for status labels while something is working. | npx shadcn add @eased/shimmer-text | Docs | Source |
| Thinking Bar | thinking-bar | An animated thinking bar for React and shadcn, showing how long a reasoning model has been thinking. | npx shadcn add @eased/thinking-bar | Docs | Source |
| Agent Orb | agent-orb | An animated agent orb for React and shadcn, showing whether an assistant is idle, listening, thinking or speaking. | npx shadcn add @eased/agent-orb | Docs | Source |
Charts
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Sparkline | sparkline | An animated sparkline for React and shadcn, a word-sized line chart with an optional scrub readout. | npx shadcn add @eased/sparkline | Docs | Source |
Code
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Code Block | code-block | An animated code block for React and shadcn, with Shiki highlighting, a copy button and collapsible long blocks. | npx shadcn add @eased/code-block | Docs | Source |
| Code Tabs | code-tabs | Animated code tabs for React and shadcn, showing several files or one command per package manager. | npx shadcn add @eased/code-tabs | Docs | Source |
| Snippet | snippet | An animated command snippet for React and shadcn, a one-line command with a copy button. | npx shadcn add @eased/snippet | Docs | Source |
Surface and focus
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Card | card | A card for React and shadcn, with shadcn's parts and an optional link that makes the whole card clickable. | npx shadcn add @eased/card | Docs | Source |
| Concentric Frame | concentric-frame | A layout frame for React and shadcn that keeps nested corner radii concentric through CSS variables. | npx shadcn add @eased/concentric-frame | Docs | Source |
| Progressive Blur | progressive-blur | A progressive blur for React and shadcn, fading content toward an edge under headers, bottom bars and composers. | npx shadcn add @eased/progressive-blur | Docs | Source |
| Image Compare | image-compare | An animated image compare slider for React and shadcn, with a divider you drag or move by keyboard. | npx shadcn add @eased/image-compare | Docs | Source |
Mac
| Component | Name | What it does | Install | Docs | Source |
|---|---|---|---|---|---|
| Mac menu popover | mac-menu-popover | An animated macOS menu bar popover for React and shadcn, for Tauri and Electron apps. | npx shadcn add @eased/mac-menu-popover | Docs | Source |
| Mac HUD | mac-hud | An animated macOS volume and brightness HUD for React and shadcn, as the classic square or the macOS 26 pill. | npx shadcn add @eased/mac-hud | Docs | Source |
60 free components in 14 categories. Each one also has a page in docs/components/.
For AI agents
- llms.txt: the index of the docs and every component
- llms-full.txt: the docs and every free component's page in one file
- Motion docs: the springs, curves and durations every component uses
- AI and MCP docs: the MCP server, the skill and per-client setup
MCP server
The Eased MCP server is at https://eased.dev/api/mcp. Claude Code:
claude mcp add --transport http eased https://eased.dev/api/mcpCursor, in .cursor/mcp.json:
{
"mcpServers": {
"eased": {
"url": "https://eased.dev/api/mcp"
}
}
}Skills
npx skills add easedui/skillsInstalls eased-motion: the motion rules only.
npx shadcn add https://eased.dev/r/eased-skill.jsonInstalls eased-skill: the full Eased design skill, written to .claude/skills/eased/SKILL.md.
Accessibility
Every animated component respects prefers-reduced-motion. From the motion docs:
Every animated component has a reduced branch. When the visitor's system asks for reduced motion, movement becomes a 100ms opacity fade (
reducedFade) or nothing, and looping animations stop.
Licence
The free components are MIT: see LICENSE. Eased Pro is a separate paid tier, at eased.dev. Pro source isn't in this repository.
What's here
| Path | Contents |
|---|---|
src/registry/eased/<name>/ | A component's source and its README.md (usage, props, motion) |
src/registry/eased/_primitives/ | Shared primitives the components build on |
src/registry/eased/lib/ | Shared helpers: springs and durations (motion.ts), press styles (press.ts), and DOM, platform and format helpers |
src/registry/eased/mac-*/ | Mac components for Tauri and Electron apps, each with its Tauri window config |
docs/ | The docs as Markdown: installation, theming, motion, AI and MCP, and one page per component |
public/r/ | The built registry JSON |
registry.json | The registry manifest. The Eased stylesheet is its eased-tokens item |
context7.json | Settings for Context7 |
Report an issue
Open a GitHub issue or use eased.dev/report.
Questions fréquentes
Qu'est-ce que Eased ?
Motion-first React components for shadcn: search, read docs and get install commands.
Comment installer Eased ?
Il fonctionne comme serveur distant. Dans Claude Code : claude mcp add --transport http eased 'https://eased.dev/api/mcp'. Pour les autres clients, collez la configuration JSON de cette page dans leurs réglages MCP.
Faut-il une clé API pour Eased ?
Son entrée au registre n'indique aucune clé ni secret obligatoire. Certaines fonctions peuvent tout de même demander un compte auprès du service auquel il se connecte.
Eased est-il open source ?
Oui. Son code est sur GitHub sous licence MIT.
Qui maintient Eased ?
Il est publié par easedui. AI.tn le référence sans le maintenir ni le recommander.
Issu du registre MCP officiel. Être listé n'est pas une recommandation : vérifiez le code et les permissions d'un serveur avant de lui donner accès à vos données.