Eased
Motion-first React components for shadcn: search, read docs and get install commands.
التثبيت
أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: .cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).
Remote (streamable-http)
Claude Code
claude mcp add --transport http eased 'https://eased.dev/api/mcp'إعداد JSON (Claude Desktop وCursor وVS Code)
{
"mcpServers": {
"eased": {
"type": "http",
"url": "https://eased.dev/api/mcp"
}
}
}التوثيق
مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على 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.
الأسئلة الشائعة
ما هو Eased؟
Motion-first React components for shadcn: search, read docs and get install commands.
كيف أثبّت Eased؟
يعمل كخادم بعيد. في Claude Code: claude mcp add --transport http eased 'https://eased.dev/api/mcp'. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.
هل يحتاج Eased إلى مفتاح API؟
لا يذكر إدراجه في السجل أي مفتاح أو سر إلزامي. قد تتطلب بعض الميزات حسابًا لدى الخدمة التي يتصل بها.
هل Eased مفتوح المصدر؟
نعم. شيفرته متاحة على GitHub بترخيص MIT.
من يصون Eased؟
ينشره easedui. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.
من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.