Eased

dev.easedPublished by eased.devOfficial publisherv1.0.0Updated Nov 1, 2026

Motion-first React components for shadcn: search, read docs and get install commands.

VerifiedStreamable HTTPWeb executableDeveloper Tools Media & Design

Server details

Identifier: dev.eased/eased
Transport: Streamable HTTP
Runtime: Web executable
Trust: Verified
Published: Oct 18, 2026

Security note

MCP servers receive tool arguments from a conversation and may perform external actions. Review what a server can do before you enable it, and give it only the access it needs.

The registry verified that this server's namespace belongs to eased.dev, which also runs its endpoint. That identifies the publisher; it does not make the server's tools safe.

SourceWeft's checks cover whether the listing is complete and the endpoint answered; they do not review the server's code or what its tools do.

Add a badge to your README

Show readers this MCP server is listed on SourceWeft. The badge links to this page.

[![Listed on SourceWeft](https://sourceweft.com/badge/mcp/dev.eased%2Feased.svg)](https://sourceweft.com/mcp/dev.eased%2Feased?utm_source=readme&utm_medium=badge)

Overview

AI-generated overview

Eased MCP lets an assistant browse, search and read docs for motion-first React components for shadcn, and get install commands.

What you can do: Read the Eased design skill as Markdown, covering tokens, spacing, radii, springs and focus rules
List and search the component catalogue by need, interaction verb or industry
Read one component's docs, props, motion signature, install command and dependencies, plus source and demo for free components
Generate a single shadcn CLI install command for chosen components, tokens and helpers
When to use it: Useful when building or extending a React and shadcn interface and you want an assistant to pick suitable animated components, follow Eased's motion and spacing rules, and produce the right install command instead of guessing.
Requirements: Remote MCP endpoint at eased.dev over streamable HTTP; no authentication, environment variables or headers declared. The components it recommends need a project with React 19, Tailwind CSS v4 and a components.json file, and installing them uses the shadcn CLI with network access.

Before you install

The server only returns documentation and commands; the install command writes component source into the project, installs npm dependencies and merges the Eased stylesheet into global CSS, so review it before running. Pro components are listed but not installable from the public registry and require Eased Pro.

Installation

In SourceWeft

Open Eased in the dashboard and add it to a workspace.
Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/dev.eased%2Feased/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config.

{
  "mcpServers": {
    "eased": {
      "type": "http",
      "url": "https://eased.dev/api/mcp"
    }
  }
}

README

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:

@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, run npx 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:

Cursor, in .cursor/mcp.json:

Skills

Installs eased-motion: the motion rules only.

Installs 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.

Source: README.md at commit cc34c83

Tools

get_skill

Get the Eased design skill

The Eased design skill as Markdown: how to install and compose Eased components, the tokens, and the checkable rules every component is built on (alignment, the 1:2 spacing ratio, concentric radii, springs per role, enter and exit, focus rings, reduced motion). Call it first, before you build or change UI with Eased, and follow it while you work.

Takes no parameters.

list_components

List Eased components

List every Eased component (motion-first React components installed with the shadcn CLI) in catalogue order, with slug, title, one-line summary, tier (free or pro), interaction verb (Hover, Press, Drag, Slide, Select, Type, Loading, Scroll), the industries it suits and page URL. Use it to browse what exists, optionally for one industry (e.g. crypto, legal); use search_components to find one for a specific need.

Parameterstierindustry

search_components

Search Eased components

Find Eased components for a need, e.g. "loading state", "tooltip", "drag to adjust a number" or "tabs with a sliding indicator". Matches title, slug, interaction verb, description and README docs, best match first; pass industry to keep to one (e.g. "a swap UI" for crypto). Follow up with get_component for docs and source.

Parametersqueryrequiredindustry

get_component

Get an Eased component

Everything about one Eased component as Markdown: title, description, tier, README docs (usage, props, motion signature), install command and dependencies. Free components also include the full source of their files and a demo showing real usage, so you can read or adapt the code. Pro components return docs and metadata only, unless this server was added with an Eased Pro token header, in which case their source comes too.

Parametersslugrequired

get_install_command

Get the install command

One `npx shadcn add …` command that installs the given Eased components (and their tokens and helpers) into the current project. Only free components install from the public registry; Pro components are listed separately as requiring Eased Pro.

Parametersslugsrequired

Version history

v1.0.0LatestOct 18, 2026

Score

100% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

Reached in the last 30 daysRequired25 pts
Auth declaredRequired10 pts
Tools listedRequired15 pts
DescriptionRequired15 pts
Logo10 pts
Documentation15 pts
License10 pts