Eased

dev.eased由 eased.dev 发布官方发布者v1.0.0更新于 Nov 1, 2026

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

已验证Streamable HTTP可网页运行开发者工具媒体与设计

概览

AI 生成的概览

Eased MCP 让助手浏览、搜索并阅读 shadcn 动效优先 React 组件的文档,并获取安装命令。

可以做什么
  • 以 Markdown 读取 Eased 设计技能,涵盖 token、间距、圆角、弹簧动画与焦点规则
  • 按需求、交互动词或行业列出并搜索组件目录
  • 读取单个组件的文档、属性、动效签名、安装命令与依赖,免费组件还含源码与示例
  • 为所选组件、token 与辅助工具生成一条 shadcn CLI 安装命令
适用场景
在构建或扩展 React 与 shadcn 界面时,希望助手挑选合适的动效组件、遵循 Eased 的动效与间距规则,并给出正确的安装命令而不是凭猜测。
运行要求
通过 streamable HTTP 连接 eased.dev 上的远程 MCP 端点;未声明认证、环境变量或请求头。其推荐的组件需要项目具备 React 19、Tailwind CSS v4 和 components.json,安装时使用 shadcn CLI 并需要网络访问。
安装前请注意
该服务器只返回文档和命令;安装命令会把组件源码写入项目、安装 npm 依赖并把 Eased 样式表合并进全局 CSS,运行前请先检查。Pro 组件仅被列出,无法从公共注册表安装,需要 Eased Pro。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Eased,将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Web executable,通过 Streamable HTTP。 远程服务在工作区中配置后即可从网页运行时运行。

交给智能体安装

把这段提示词粘贴到 Claude Code、Codex、Cursor 等智能体,或 SourceWeft 对话中。智能体会读取该服务器的安装指南,先向你展示发布者、端点和登录方式,经你同意后再把它添加到你的客户端。密钥不会写进任何命令。

阅读 https://sourceweft.com/mcp/dev.eased%2Feased/install.md,并按其中说明把这个 MCP 服务器接入我的客户端。修改任何配置之前,先告诉我它的发布者、端点和登录方式,等我确认。不要把 API 密钥写进命令或我会提交的文件;问我密钥应从哪里获取。

查看智能体所依据的安装指南

其他 MCP 客户端

把它添加到你客户端的 mcpServers 配置中。

{
  "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:

bash
npx shadcn add @eased/button
bash
npx 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, 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

ComponentNameWhat it doesInstallDocsSource
ButtonbuttonAn animated button for React and shadcn, with a loading state that keeps its width.npx shadcn add @eased/buttonDocsSource
Undo Pillundo-pillAn 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-pillDocsSource
KbdkbdAn animated keycap for React and shadcn, pressing down when the real key does.npx shadcn add @eased/kbdDocsSource

Inputs

ComponentNameWhat it doesInstallDocsSource
InputinputAn animated text input for React and shadcn, with leading and trailing addons and an error state.npx shadcn add @eased/inputDocsSource
TextareatextareaAn animated textarea for React and shadcn, growing with its text, with a character counter.npx shadcn add @eased/textareaDocsSource
FieldfieldAn animated form field for React and shadcn, with a label, a control and one line for help or errors.npx shadcn add @eased/fieldDocsSource
SlidersliderAn animated slider for React and shadcn, single or range, with a live value readout.npx shadcn add @eased/sliderDocsSource
Number Fieldnumber-fieldAn animated number field for React and shadcn, with steppers that speed up while held.npx shadcn add @eased/number-fieldDocsSource
OTP Fieldotp-fieldAn animated one-time code field for React and shadcn, with autofill and paste across every cell.npx shadcn add @eased/otp-fieldDocsSource
Date Pickerdate-pickerAn animated date picker for React and shadcn, with a calendar popover, typed dates and ranges.npx shadcn add @eased/date-pickerDocsSource
File Uploadfile-uploadAn animated file upload for React and shadcn, with a dropzone, per-file progress and inline reasons for refused files.npx shadcn add @eased/file-uploadDocsSource

Selection

ComponentNameWhat it doesInstallDocsSource
SegmentedsegmentedAn animated segmented control for React and shadcn, for picking one option from a few.npx shadcn add @eased/segmentedDocsSource
TabstabsAnimated tabs for React and shadcn, with an underline or pill indicator.npx shadcn add @eased/tabsDocsSource
Toggle Grouptoggle-groupAn animated toggle group for React and shadcn, with single or multiple selection.npx shadcn add @eased/toggle-groupDocsSource
Radio Groupradio-groupAn animated radio group for React and shadcn, with plain radios or selectable cards.npx shadcn add @eased/radio-groupDocsSource
CheckboxcheckboxAn animated checkbox for React and shadcn, with an indeterminate state for parent checkboxes.npx shadcn add @eased/checkboxDocsSource
SwitchswitchAn animated switch for React and shadcn, which becomes a full settings row when given a label.npx shadcn add @eased/switchDocsSource
SelectselectAn animated select for React and shadcn, opening with the chosen option over its trigger.npx shadcn add @eased/selectDocsSource
ComboboxcomboboxAn animated combobox for React and shadcn, with filtering, a clear button and multi-select chips.npx shadcn add @eased/comboboxDocsSource
RatingratingAn animated star rating for React and shadcn, with hover preview, half steps and a read-only mode.npx shadcn add @eased/ratingDocsSource

Navigation

ComponentNameWhat it doesInstallDocsSource
BreadcrumbbreadcrumbAn animated breadcrumb for React and shadcn, folding middle crumbs into a menu when space runs out.npx shadcn add @eased/breadcrumbDocsSource
PaginationpaginationAnimated pagination for React and shadcn, with a width that never changes as you page.npx shadcn add @eased/paginationDocsSource
CarouselcarouselAn animated carousel for React and shadcn, with scroll snapping, mouse drag and arrow keys.npx shadcn add @eased/carouselDocsSource

Overlays

ComponentNameWhat it doesInstallDocsSource
PopoverpopoverAn animated popover for React and shadcn, opening from its trigger, built on Base UI.npx shadcn add @eased/popoverDocsSource
TooltiptooltipAn animated tooltip for React and shadcn, with an optional shortcut, never shown on touch.npx shadcn add @eased/tooltipDocsSource
DialogdialogAn animated dialog for React and shadcn, with alert dialogs and nested dialogs, built on Base UI.npx shadcn add @eased/dialogDocsSource
Command Palettecommand-paletteAn animated command palette for React and shadcn, opened with ⌘K, where Enter runs the first match.npx shadcn add @eased/command-paletteDocsSource
Dropdown Menudropdown-menuAn animated dropdown menu for React and shadcn, with checkbox and radio rows, shortcuts and submenus.npx shadcn add @eased/dropdown-menuDocsSource
Context Menucontext-menuAn animated context menu for React and shadcn, opened by right-click or long-press, with submenus.npx shadcn add @eased/context-menuDocsSource
SheetsheetAn animated sheet for React and shadcn, sliding in from an edge and becoming a bottom sheet on small screens.npx shadcn add @eased/sheetDocsSource

Status

ComponentNameWhat it doesInstallDocsSource
BadgebadgeAn animated badge for React and shadcn, for statuses and counts, with an optional live dot.npx shadcn add @eased/badgeDocsSource
ProgressprogressAn animated progress bar for React and shadcn, with an indeterminate state that hands over to the real value.npx shadcn add @eased/progressDocsSource
SpinnerspinnerAn animated spinner for React and shadcn, that pauses off-screen and announces itself to screen readers.npx shadcn add @eased/spinnerDocsSource
SkeletonskeletonAn animated skeleton for React and shadcn, where every placeholder on the page shares one shimmer.npx shadcn add @eased/skeletonDocsSource
AvataravatarAn animated avatar for React and shadcn, with groups that spread apart on hover.npx shadcn add @eased/avatarDocsSource
AlertalertAn animated alert for React and shadcn, for context, success, warning and error messages.npx shadcn add @eased/alertDocsSource
ToasttoastAn animated toast stack for React and shadcn, with an action button such as Undo.npx shadcn add @eased/toastDocsSource

Text and numbers

ComponentNameWhat it doesInstallDocsSource
Number Rollnumber-rollAn animated number counter for React and shadcn, with locale-aware formatting.npx shadcn add @eased/number-rollDocsSource
Text Swaptext-swapAn animated text swap for React and shadcn, for changing a label or value without its neighbours jumping.npx shadcn add @eased/text-swapDocsSource

Lists and tables

ComponentNameWhat it doesInstallDocsSource
TabletableA hairline table for React and shadcn, built on TanStack Table with a sticky header and dense or comfortable rows.npx shadcn add @eased/tableDocsSource
Cells kitcellsAn animated set of table cells for React and shadcn, for names, statuses, numbers, progress, times and IDs.npx shadcn add @eased/cellsDocsSource
AccordionaccordionAn animated accordion for React and shadcn, built on Base UI Accordion.npx shadcn add @eased/accordionDocsSource
Scroll Areascroll-areaAn animated scroll area for React and shadcn, with a thin overlay scrollbar and edge fades.npx shadcn add @eased/scroll-areaDocsSource
TreetreeAn animated file tree for React and shadcn, with keyboard support that follows WAI-ARIA.npx shadcn add @eased/treeDocsSource

Chat

ComponentNameWhat it doesInstallDocsSource
ComposercomposerAn animated chat composer for React and shadcn, with file attachments and a Stop button while a reply streams.npx shadcn add @eased/composerDocsSource
MessagemessageAn animated chat message for React and shadcn, rendering AI SDK UIMessage text and file parts.npx shadcn add @eased/messageDocsSource
Attachment ChipattachmentAn animated attachment chip for React and shadcn, with image thumbnails, upload progress and retry.npx shadcn add @eased/attachmentDocsSource

AI

ComponentNameWhat it doesInstallDocsSource
Shimmer Textshimmer-textAnimated shimmer text for React and shadcn, for status labels while something is working.npx shadcn add @eased/shimmer-textDocsSource
Thinking Barthinking-barAn animated thinking bar for React and shadcn, showing how long a reasoning model has been thinking.npx shadcn add @eased/thinking-barDocsSource
Agent Orbagent-orbAn animated agent orb for React and shadcn, showing whether an assistant is idle, listening, thinking or speaking.npx shadcn add @eased/agent-orbDocsSource

Charts

ComponentNameWhat it doesInstallDocsSource
SparklinesparklineAn animated sparkline for React and shadcn, a word-sized line chart with an optional scrub readout.npx shadcn add @eased/sparklineDocsSource

Code

ComponentNameWhat it doesInstallDocsSource
Code Blockcode-blockAn animated code block for React and shadcn, with Shiki highlighting, a copy button and collapsible long blocks.npx shadcn add @eased/code-blockDocsSource
Code Tabscode-tabsAnimated code tabs for React and shadcn, showing several files or one command per package manager.npx shadcn add @eased/code-tabsDocsSource
SnippetsnippetAn animated command snippet for React and shadcn, a one-line command with a copy button.npx shadcn add @eased/snippetDocsSource

Surface and focus

ComponentNameWhat it doesInstallDocsSource
CardcardA card for React and shadcn, with shadcn's parts and an optional link that makes the whole card clickable.npx shadcn add @eased/cardDocsSource
Concentric Frameconcentric-frameA layout frame for React and shadcn that keeps nested corner radii concentric through CSS variables.npx shadcn add @eased/concentric-frameDocsSource
Progressive Blurprogressive-blurA progressive blur for React and shadcn, fading content toward an edge under headers, bottom bars and composers.npx shadcn add @eased/progressive-blurDocsSource
Image Compareimage-compareAn animated image compare slider for React and shadcn, with a divider you drag or move by keyboard.npx shadcn add @eased/image-compareDocsSource

Mac

ComponentNameWhat it doesInstallDocsSource
Mac menu popovermac-menu-popoverAn animated macOS menu bar popover for React and shadcn, for Tauri and Electron apps.npx shadcn add @eased/mac-menu-popoverDocsSource
Mac HUDmac-hudAn animated macOS volume and brightness HUD for React and shadcn, as the classic square or the macOS 26 pill.npx shadcn add @eased/mac-hudDocsSource

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:

bash
claude mcp add --transport http eased https://eased.dev/api/mcp

Cursor, in .cursor/mcp.json:

json
{  "mcpServers": {    "eased": {      "url": "https://eased.dev/api/mcp"    }  }}

Skills

bash
npx skills add easedui/skills

Installs eased-motion: the motion rules only.

bash
npx shadcn add https://eased.dev/r/eased-skill.json

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

PathContents
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.jsonThe registry manifest. The Eased stylesheet is its eased-tokens item
context7.jsonSettings for Context7

Report an issue

Open a GitHub issue or use eased.dev/report.

来源:README.md,提交 cc34c83

工具

5

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.

无需输入参数。

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.

输入参数tierindustry

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.

输入参数query必填industry

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.

输入参数slug必填

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.

输入参数slugs必填

版本历史

1
  1. v1.0.0最新Oct 18, 2026

评分

已满足适用检查项的 100%

该评分衡量此收录条目的完整程度,依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价,也不表示服务器安全或当前可用:可连通性是带日期的检查结果,评分也不包含安装量或用户评价。

  • 近 30 天内可连通必需25 分
  • 已声明认证方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分