# Eased UI > Eased UI (eased.dev) is a library of motion-first React components for shadcn, installed with the shadcn CLI. Eased UI (@easedui on X) also has page blocks, is built on React 19, Tailwind CSS v4 and Motion, and the CLI puts the source in your project. Free components are MIT. Eased Pro is $149 one-time at the early-bird price for now ($199 regular) for unlimited projects. ## What it includes - Animated components and blocks with tuned springs, concentric corner radii, and every interaction state designed - Design tokens in OKLCH with authored light and dark themes - Reduced-motion support in every animated component - This llms.txt index, per-component Markdown docs and an MCP server for AI coding agents ## Install Each free component installs with the shadcn CLI. Its tokens (eased-tokens) and shared motion helpers (eased-motion) come with it as registry dependencies and are merged into your global CSS. - [Registry index](https://eased.dev/r/registry.json): every public item and its files - [Components directory](https://eased.dev/components): every component, free and Pro, running live - [Compare](https://eased.dev/compare): Eased next to Magic UI, Aceternity UI, Animate UI, Motion Primitives and React Bits, each cell checked against their own site or repo - [Eased UI vs Aceternity UI](https://eased.dev/compare/aceternity-ui): the same checked cells, Eased and Aceternity UI only - [Eased UI vs Animate UI](https://eased.dev/compare/animate-ui): the same checked cells, Eased and Animate UI only - [Eased UI vs Magic UI](https://eased.dev/compare/magic-ui): the same checked cells, Eased and Magic UI only - [Eased UI vs Motion Primitives](https://eased.dev/compare/motion-primitives): the same checked cells, Eased and Motion Primitives only - [Eased UI vs React Bits](https://eased.dev/compare/react-bits): the same checked cells, Eased and React Bits only ## Guides - [Animated shadcn components](https://eased.dev/animated-shadcn-components): Accordion, Tabs, Tooltip, Date Picker, OTP Field, Number Field, Pagination, Breadcrumb, Badge, Avatar, File Upload - [React agent UI components](https://eased.dev/react-agent-ui-components): Composer, Message, Thinking Bar, Agent Orb, Shimmer Text, Prose, Attachment Chip, Agent Run, Tool Call Row, Approval Card, Live Activity Pill, Agent Run Console - [Motion React components](https://eased.dev/motion-react-components): Number Roll, Undo Pill, Text Swap, Segmented, Like Button, Tree, Area Chart, Carousel, Skeleton, Spotlight Tour - [AI chat UI components](https://eased.dev/ai-chat-ui-components): Composer, Message, Conversation, Attachment Chip, Prose, Code Block, Thinking Bar, Shimmer Text, Tool Call Row, Agent Run - [React number animation](https://eased.dev/react-number-animation): Number Roll, Number Field, Slider, Progress, Badge, Cells kit, Scrub Label, Stat Tile, Line Chart, Bar Chart, Donut Chart, FX Rate Board - [React text animation](https://eased.dev/react-text-animation): Text Swap, Shimmer Text, Caption Ticker, Button, Thinking Bar, Conversation ## Docs - [Quickstart for agents](https://eased.dev/docs/agent-quickstart): Give your coding agent one prompt, and it connects to Eased, finds components and installs them. Markdown: https://eased.dev/docs/agent-quickstart.md - [Introduction](https://eased.dev/docs/introduction): What Eased is, what is free and what is Pro, and where to start. Markdown: https://eased.dev/docs/introduction.md - [Installation](https://eased.dev/docs/installation): Add components with the shadcn CLI, what lands in your CSS, and the Pro registry. Markdown: https://eased.dev/docs/installation.md - [Theming](https://eased.dev/docs/theming): The token layers, light and dark, re-branding, radius roles and the concentric formula. Markdown: https://eased.dev/docs/theming.md - [Motion](https://eased.dev/docs/motion): The springs, curves and durations every component uses, and what never animates. Markdown: https://eased.dev/docs/motion.md - [AI and MCP](https://eased.dev/docs/ai-mcp): Give Eased to Claude Code, Cursor or VS Code through the MCP server, the design skill, llms.txt and Markdown pages. Markdown: https://eased.dev/docs/ai-mcp.md - [Changelog](https://eased.dev/docs/changelog): What changed in Eased, newest first. Markdown: https://eased.dev/docs/changelog.md ## For AI agents - [Quickstart for agents](https://eased.dev/docs/agent-quickstart): the setup prompt below, the setup for each client and how to verify it - MCP server: `claude mcp add --transport http eased https://eased.dev/api/mcp` (tools: get_skill, list_components, search_components, get_component, get_install_command) - Design skill (free): `npx shadcn add https://eased.dev/r/eased-skill.json` installs .claude/skills/eased/SKILL.md, the rules Eased is built with; the MCP tool get_skill returns it too - [llms-full.txt](https://eased.dev/llms-full.txt): these docs and every free component's docs and usage in one file - [llms-small.txt](https://eased.dev/llms-small.txt): a short index, one line per component - Markdown: append `.md` to any component or docs page, e.g. https://eased.dev/components/button.md or https://eased.dev/docs/installation.md - Pro source: add `--header "Authorization: Bearer $EASED_PRO_TOKEN"` to the MCP server; tokens are created at https://eased.dev/account ### Setup prompt Paste this into any coding agent to set up Eased in a project: ```text Set up Eased (https://eased.dev), a motion-first React component library, in this project. 1. Connect the Eased MCP server (https://eased.dev/api/mcp, streamable HTTP). Use the command for this client: - Claude Code: run `claude mcp add --transport http eased https://eased.dev/api/mcp` - Cursor: add `{"mcpServers":{"eased":{"url":"https://eased.dev/api/mcp"}}}` to .cursor/mcp.json - VS Code: add `{"servers":{"eased":{"type":"http","url":"https://eased.dev/api/mcp"}}}` to .vscode/mcp.json - Codex: run `codex mcp add eased --url https://eased.dev/api/mcp` 2. Load the Eased design skill first: call get_skill and follow its rules for all UI work. To keep it in the project, run `npx shadcn add https://eased.dev/r/eased-skill.json` (it installs to .claude/skills/eased/SKILL.md). 3. Find components with search_components or list_components. Call get_component before you use one. 4. Install with the command from get_install_command (npx shadcn add …). Don't copy source by hand. 5. Style with the Eased tokens (bg-surface, text-text-secondary, rounded-panel, h-control-md), not raw colours or radii. Don't wrap Eased components in extra animation. 6. If the project's text renders in a serif font after npx shadcn init, the global CSS has --font-sans: var(--font-sans); (a self-reference). Point it at the layout's font variable, e.g. var(--font-geist-sans). 7. For Pro components: if EASED_PRO_TOKEN is set, add the @eased-pro registry from https://eased.dev/docs/installation#pro-components to components.json, then run npx shadcn add @eased-pro/. If the MCP server isn't available, read https://eased.dev/llms.txt instead, and install the skill with the command above. ``` ## Free components (MIT, 70) - [Appointment Scheduler](https://eased.dev/components/appointment-scheduler): Appointment booking for React and shadcn: pick a provider, day and time, and the chosen slot lifts into the confirmation card. - Install: `npx shadcn add https://eased.dev/r/appointment-scheduler.json` - JSON: https://eased.dev/r/appointment-scheduler.json - Markdown: https://eased.dev/components/appointment-scheduler.md - Demo: `npx shadcn add https://eased.dev/r/appointment-scheduler-demo.json` - [Variant Picker](https://eased.dev/components/variant-picker): Product variant picker for React and shadcn: colour swatches and sizes on Base UI radio groups, with sold-out sizes struck through. - Install: `npx shadcn add https://eased.dev/r/variant-picker.json` - JSON: https://eased.dev/r/variant-picker.json - Markdown: https://eased.dev/components/variant-picker.md - Demo: `npx shadcn add https://eased.dev/r/variant-picker-demo.json` - [Pagination](https://eased.dev/components/pagination): Animated pagination for React and shadcn: the selected page chip glides on a spring, and the width never changes as you page. - Install: `npx shadcn add https://eased.dev/r/pagination.json` - JSON: https://eased.dev/r/pagination.json - Markdown: https://eased.dev/components/pagination.md - Demo: `npx shadcn add https://eased.dev/r/pagination-demo.json` - [Breadcrumb](https://eased.dev/components/breadcrumb): Animated breadcrumb for React and shadcn that folds the middle crumbs into a menu when the trail runs out of room. - Install: `npx shadcn add https://eased.dev/r/breadcrumb.json` - JSON: https://eased.dev/r/breadcrumb.json - Markdown: https://eased.dev/components/breadcrumb.md - Demo: `npx shadcn add https://eased.dev/r/breadcrumb-demo.json` - [Rating](https://eased.dev/components/rating): Star rating for React and shadcn on Base UI RadioGroup, with hover preview, half stars and a read-only mode for any fraction. - Install: `npx shadcn add https://eased.dev/r/rating.json` - JSON: https://eased.dev/r/rating.json - Markdown: https://eased.dev/components/rating.md - Demo: `npx shadcn add https://eased.dev/r/rating-demo.json` - [File Upload](https://eased.dev/components/file-upload): Drag and drop file upload for React and shadcn: the dropzone wakes when files cross the page, with per-file progress and retry. - Install: `npx shadcn add https://eased.dev/r/file-upload.json` - JSON: https://eased.dev/r/file-upload.json - Markdown: https://eased.dev/components/file-upload.md - Demo: `npx shadcn add https://eased.dev/r/file-upload-demo.json` - [Carousel](https://eased.dev/components/carousel): Carousel for React and shadcn on native scroll snapping, with mouse drag, arrow keys and a dot that stretches between pages. - Install: `npx shadcn add https://eased.dev/r/carousel.json` - JSON: https://eased.dev/r/carousel.json - Markdown: https://eased.dev/components/carousel.md - Demo: `npx shadcn add https://eased.dev/r/carousel-demo.json` - [Tree](https://eased.dev/components/tree): React file tree for shadcn: folders spring open, one selection glides between rows, and arrow keys and typeahead follow WAI-ARIA. - Install: `npx shadcn add https://eased.dev/r/tree.json` - JSON: https://eased.dev/r/tree.json - Markdown: https://eased.dev/components/tree.md - Demo: `npx shadcn add https://eased.dev/r/tree-demo.json` - [Date Picker](https://eased.dev/components/date-picker): Date picker for React and shadcn with a calendar popover and ranges, reading typed dates such as 24 Oct or tomorrow in the field's locale. - Install: `npx shadcn add https://eased.dev/r/date-picker.json` - JSON: https://eased.dev/r/date-picker.json - Markdown: https://eased.dev/components/date-picker.md - Demo: `npx shadcn add https://eased.dev/r/date-picker-demo.json` - [OTP Field](https://eased.dev/components/otp-field): OTP input for React and shadcn on Base UI: SMS autofill, password managers and a pasted code fill every cell at once. - Install: `npx shadcn add https://eased.dev/r/otp-field.json` - JSON: https://eased.dev/r/otp-field.json - Markdown: https://eased.dev/components/otp-field.md - Demo: `npx shadcn add https://eased.dev/r/otp-field-demo.json` - [Number Field](https://eased.dev/components/number-field): Number input for React and shadcn on Base UI: steppers speed up the longer you hold them, and each step rolls the digits. - Install: `npx shadcn add https://eased.dev/r/number-field.json` - JSON: https://eased.dev/r/number-field.json - Markdown: https://eased.dev/components/number-field.md - Demo: `npx shadcn add https://eased.dev/r/number-field-demo.json` - [Undo Pill](https://eased.dev/components/undo-pill): Undo toast for React and shadcn: a pill with a draining countdown ring that commits the destructive action only when it runs out. - Install: `npx shadcn add https://eased.dev/r/undo-pill.json` - JSON: https://eased.dev/r/undo-pill.json - Markdown: https://eased.dev/components/undo-pill.md - Demo: `npx shadcn add https://eased.dev/r/undo-pill-demo.json` - [Concentric Frame](https://eased.dev/components/concentric-frame): Concentric border radius frame for React and shadcn: nested corners take the outer radius minus padding and border, through CSS variables. - Install: `npx shadcn add https://eased.dev/r/concentric-frame.json` - JSON: https://eased.dev/r/concentric-frame.json - Markdown: https://eased.dev/components/concentric-frame.md - Demo: `npx shadcn add https://eased.dev/r/concentric-frame-demo.json` - [Accordion](https://eased.dev/components/accordion): Animated accordion for React and shadcn: panels open to their real height, one or several at a time, built on Base UI. - Install: `npx shadcn add https://eased.dev/r/accordion.json` - JSON: https://eased.dev/r/accordion.json - Markdown: https://eased.dev/components/accordion.md - Demo: `npx shadcn add https://eased.dev/r/accordion-demo.json` - [Attachment Chip](https://eased.dev/components/attachment): File attachment chip for React and shadcn: image thumbnails sharpen as they load, a ring tracks the upload, and failures offer Retry. - Install: `npx shadcn add https://eased.dev/r/attachment.json` - JSON: https://eased.dev/r/attachment.json - Markdown: https://eased.dev/components/attachment.md - Demo: `npx shadcn add https://eased.dev/r/attachment-demo.json` - [Avatar](https://eased.dev/components/avatar): Animated avatar for React and shadcn: images fade in from a soft blur, initials fill in when they fail, and avatar groups spread apart on hover. - Install: `npx shadcn add https://eased.dev/r/avatar.json` - JSON: https://eased.dev/r/avatar.json - Markdown: https://eased.dev/components/avatar.md - Demo: `npx shadcn add https://eased.dev/r/avatar-demo.json` - [Cells kit](https://eased.dev/components/cells): Table cells for React and shadcn: avatars with names, status badges, rolling numbers with coloured deltas, progress meters, times and IDs. - Install: `npx shadcn add https://eased.dev/r/cells.json` - JSON: https://eased.dev/r/cells.json - Markdown: https://eased.dev/components/cells.md - Demo: `npx shadcn add https://eased.dev/r/cells-demo.json` - [Badge](https://eased.dev/components/badge): Animated badge for React and shadcn for statuses and counts: counts roll their digits, and a count-only badge leaves at zero. - Install: `npx shadcn add https://eased.dev/r/badge.json` - JSON: https://eased.dev/r/badge.json - Markdown: https://eased.dev/components/badge.md - Demo: `npx shadcn add https://eased.dev/r/badge-demo.json` - [Button](https://eased.dev/components/button): Animated button for React and shadcn: labels swap while the width springs, and the loading spinner keeps its width. - Install: `npx shadcn add https://eased.dev/r/button.json` - JSON: https://eased.dev/r/button.json - Markdown: https://eased.dev/components/button.md - Demo: `npx shadcn add https://eased.dev/r/button-demo.json` - [Composer](https://eased.dev/components/composer): AI chat input for React and shadcn: the box grows as you type, files drop or paste in, and Send morphs into Stop while a reply streams. - Install: `npx shadcn add https://eased.dev/r/composer.json` - JSON: https://eased.dev/r/composer.json - Markdown: https://eased.dev/components/composer.md - Demo: `npx shadcn add https://eased.dev/r/composer-demo.json` - [Field](https://eased.dev/components/field): Form field for React and shadcn: a label, a control and one message line where help text and errors swap in place. - Install: `npx shadcn add https://eased.dev/r/field.json` - JSON: https://eased.dev/r/field.json - Markdown: https://eased.dev/components/field.md - Demo: `npx shadcn add https://eased.dev/r/field-demo.json` - [Input](https://eased.dev/components/input): Text input for React and shadcn on Base UI, with leading and trailing addons and an error state that shakes once. - Install: `npx shadcn add https://eased.dev/r/input.json` - JSON: https://eased.dev/r/input.json - Markdown: https://eased.dev/components/input.md - Demo: `npx shadcn add https://eased.dev/r/input-demo.json` - [Kbd](https://eased.dev/components/kbd): Keyboard shortcut keycap (kbd) for React and shadcn that presses down while the real key is held. - Install: `npx shadcn add https://eased.dev/r/kbd.json` - JSON: https://eased.dev/r/kbd.json - Markdown: https://eased.dev/components/kbd.md - Demo: `npx shadcn add https://eased.dev/r/kbd-demo.json` - [Message](https://eased.dev/components/message): Chat message bubble for React and shadcn that renders AI SDK messages, tightening the corners where consecutive bubbles meet. - Install: `npx shadcn add https://eased.dev/r/message.json` - JSON: https://eased.dev/r/message.json - Markdown: https://eased.dev/components/message.md - Demo: `npx shadcn add https://eased.dev/r/message-demo.json` - [Number Roll](https://eased.dev/components/number-roll): Animated number counter for React and shadcn: each digit rolls to its new value, formatted for the user's locale. - Install: `npx shadcn add https://eased.dev/r/number-roll.json` - JSON: https://eased.dev/r/number-roll.json - Markdown: https://eased.dev/components/number-roll.md - Demo: `npx shadcn add https://eased.dev/r/number-roll-demo.json` - [Popover](https://eased.dev/components/popover): Animated popover for React and shadcn that grows out of its trigger, moves focus inside and closes on Esc, built on Base UI. - Install: `npx shadcn add https://eased.dev/r/popover.json` - JSON: https://eased.dev/r/popover.json - Markdown: https://eased.dev/components/popover.md - Demo: `npx shadcn add https://eased.dev/r/popover-demo.json` - [Progress](https://eased.dev/components/progress): Animated progress bar for React and shadcn on Base UI, with a spring-driven bar, a rolling value and an indeterminate sweep. - Install: `npx shadcn add https://eased.dev/r/progress.json` - JSON: https://eased.dev/r/progress.json - Markdown: https://eased.dev/components/progress.md - Demo: `npx shadcn add https://eased.dev/r/progress-demo.json` - [Progressive Blur](https://eased.dev/components/progressive-blur): Progressive blur for React and shadcn: a backdrop blur that ramps up to 20px toward an edge, under sticky headers, bottom bars and composers. - Install: `npx shadcn add https://eased.dev/r/progressive-blur.json` - JSON: https://eased.dev/r/progressive-blur.json - Markdown: https://eased.dev/components/progressive-blur.md - Demo: `npx shadcn add https://eased.dev/r/progressive-blur-demo.json` - [Radio Group](https://eased.dev/components/radio-group): Radio group for React and shadcn, with plain radios or selectable cards whose selected border travels between them. - Install: `npx shadcn add https://eased.dev/r/radio-group.json` - JSON: https://eased.dev/r/radio-group.json - Markdown: https://eased.dev/components/radio-group.md - Demo: `npx shadcn add https://eased.dev/r/radio-group-demo.json` - [Scroll Area](https://eased.dev/components/scroll-area): Custom scrollbar for React and shadcn: a thin overlay bar on a native scroller, with edge fades only where more remains. - Install: `npx shadcn add https://eased.dev/r/scroll-area.json` - JSON: https://eased.dev/r/scroll-area.json - Markdown: https://eased.dev/components/scroll-area.md - Demo: `npx shadcn add https://eased.dev/r/scroll-area-demo.json` - [Segmented](https://eased.dev/components/segmented): Segmented control for React and shadcn: a thumb glides to the chosen option, with radio semantics that submit with a form. - Install: `npx shadcn add https://eased.dev/r/segmented.json` - JSON: https://eased.dev/r/segmented.json - Markdown: https://eased.dev/components/segmented.md - Demo: `npx shadcn add https://eased.dev/r/segmented-demo.json` - [Shimmer Text](https://eased.dev/components/shimmer-text): Shimmer text effect for React and shadcn: a band of light sweeps a loading label, in one phase shared by every shimmer on the page. - Install: `npx shadcn add https://eased.dev/r/shimmer-text.json` - JSON: https://eased.dev/r/shimmer-text.json - Markdown: https://eased.dev/components/shimmer-text.md - Demo: `npx shadcn add https://eased.dev/r/shimmer-text-demo.json` - [Skeleton](https://eased.dev/components/skeleton): Skeleton loader for React and shadcn: every placeholder on the page shares one shimmer, and the real content fades in in place. - Install: `npx shadcn add https://eased.dev/r/skeleton.json` - JSON: https://eased.dev/r/skeleton.json - Markdown: https://eased.dev/components/skeleton.md - Demo: `npx shadcn add https://eased.dev/r/skeleton-demo.json` - [Spinner](https://eased.dev/components/spinner): Loading spinner for React and shadcn: a CSS arc that keeps turning while the main thread is busy and announces itself to screen readers. - Install: `npx shadcn add https://eased.dev/r/spinner.json` - JSON: https://eased.dev/r/spinner.json - Markdown: https://eased.dev/components/spinner.md - Demo: `npx shadcn add https://eased.dev/r/spinner-demo.json` - [Table](https://eased.dev/components/table): Data table for React and shadcn on TanStack Table, with half-pixel row rules, a sticky header and 36px or 48px rows. - Install: `npx shadcn add https://eased.dev/r/table.json` - JSON: https://eased.dev/r/table.json - Markdown: https://eased.dev/components/table.md - Demo: `npx shadcn add https://eased.dev/r/table-demo.json` - [Tabs](https://eased.dev/components/tabs): Animated tabs for React and shadcn: an underline or pill indicator glides to the active tab and panels cross-fade. - Install: `npx shadcn add https://eased.dev/r/tabs.json` - JSON: https://eased.dev/r/tabs.json - Markdown: https://eased.dev/components/tabs.md - Demo: `npx shadcn add https://eased.dev/r/tabs-demo.json` - [Text Swap](https://eased.dev/components/text-swap): Animated text change for React and shadcn: a label or value swaps with a lift and blur while the width springs to fit. - Install: `npx shadcn add https://eased.dev/r/text-swap.json` - JSON: https://eased.dev/r/text-swap.json - Markdown: https://eased.dev/components/text-swap.md - Demo: `npx shadcn add https://eased.dev/r/text-swap-demo.json` - [Textarea](https://eased.dev/components/textarea): Auto-resizing textarea for React and shadcn: it grows with its text on a spring, with a character counter whose digits roll. - Install: `npx shadcn add https://eased.dev/r/textarea.json` - JSON: https://eased.dev/r/textarea.json - Markdown: https://eased.dev/components/textarea.md - Demo: `npx shadcn add https://eased.dev/r/textarea-demo.json` - [Thinking Bar](https://eased.dev/components/thinking-bar): AI reasoning indicator for React and shadcn: "Thinking 4s" counts up while the model reasons, then reads "Thought for 12s" and folds away. - Install: `npx shadcn add https://eased.dev/r/thinking-bar.json` - JSON: https://eased.dev/r/thinking-bar.json - Markdown: https://eased.dev/components/thinking-bar.md - Demo: `npx shadcn add https://eased.dev/r/thinking-bar-demo.json` - [Agent Orb](https://eased.dev/components/agent-orb): AI agent orb for React and shadcn showing idle, listening, thinking or speaking, with a swirl that speeds up with the token rate. - Install: `npx shadcn add https://eased.dev/r/agent-orb.json` - JSON: https://eased.dev/r/agent-orb.json - Markdown: https://eased.dev/components/agent-orb.md - Demo: `npx shadcn add https://eased.dev/r/agent-orb-demo.json` - [Toggle Group](https://eased.dev/components/toggle-group): Toggle button group for React and shadcn, single or multiple selection, for toolbars like bold, italic and underline. - Install: `npx shadcn add https://eased.dev/r/toggle-group.json` - JSON: https://eased.dev/r/toggle-group.json - Markdown: https://eased.dev/components/toggle-group.md - Demo: `npx shadcn add https://eased.dev/r/toggle-group-demo.json` - [Tooltip](https://eased.dev/components/tooltip): Animated tooltip for React and shadcn with an optional keyboard shortcut; after the first, neighbours open instantly. - Install: `npx shadcn add https://eased.dev/r/tooltip.json` - JSON: https://eased.dev/r/tooltip.json - Markdown: https://eased.dev/components/tooltip.md - Demo: `npx shadcn add https://eased.dev/r/tooltip-demo.json` - [Sparkline](https://eased.dev/components/sparkline): Sparkline chart for React and shadcn: a word-sized line that draws in once and morphs to new values, with an optional scrub readout. - Install: `npx shadcn add https://eased.dev/r/sparkline.json` - JSON: https://eased.dev/r/sparkline.json - Markdown: https://eased.dev/components/sparkline.md - Demo: `npx shadcn add https://eased.dev/r/sparkline-demo.json` - [Area Chart](https://eased.dev/components/area-chart): Area chart for React and shadcn that draws in once, morphs to new data while its scale springs, and has a crosshair tooltip. - Install: `npx shadcn add https://eased.dev/r/area-chart.json` - JSON: https://eased.dev/r/area-chart.json - Markdown: https://eased.dev/components/area-chart.md - Demo: `npx shadcn add https://eased.dev/r/area-chart-demo.json` - [Code Block](https://eased.dev/components/code-block): Code block for React and shadcn with Shiki syntax highlighting, a copy button, line highlights and long blocks that collapse under a blur. - Install: `npx shadcn add https://eased.dev/r/code-block.json` - JSON: https://eased.dev/r/code-block.json - Markdown: https://eased.dev/components/code-block.md - Demo: `npx shadcn add https://eased.dev/r/code-block-demo.json` - [Code Tabs](https://eased.dev/components/code-tabs): Code tabs for React and shadcn: several files or one install command per package manager, with the pnpm or npm choice synced across the page. - Install: `npx shadcn add https://eased.dev/r/code-tabs.json` - JSON: https://eased.dev/r/code-tabs.json - Markdown: https://eased.dev/components/code-tabs.md - Demo: `npx shadcn add https://eased.dev/r/code-tabs-demo.json` - [Snippet](https://eased.dev/components/snippet): Copyable command snippet for React and shadcn: one shell line with a $ prompt that is never copied, and a copy button that turns into a check. - Install: `npx shadcn add https://eased.dev/r/snippet.json` - JSON: https://eased.dev/r/snippet.json - Markdown: https://eased.dev/components/snippet.md - Demo: `npx shadcn add https://eased.dev/r/snippet-demo.json` - [Mac menu popover](https://eased.dev/components/mac-menu-popover): macOS menu bar popover for React and shadcn, for Tauri and Electron apps: the panel grows from its arrow tip and reverses mid-flight. - Install: `npx shadcn add https://eased.dev/r/mac-menu-popover.json` - JSON: https://eased.dev/r/mac-menu-popover.json - Markdown: https://eased.dev/components/mac-menu-popover.md - Demo: `npx shadcn add https://eased.dev/r/mac-menu-popover-demo.json` - [Mac HUD](https://eased.dev/components/mac-hud): macOS volume and brightness HUD for React and shadcn, square or macOS 26 pill, updating in place and holding 1.1s after each change. - Install: `npx shadcn add https://eased.dev/r/mac-hud.json` - JSON: https://eased.dev/r/mac-hud.json - Markdown: https://eased.dev/components/mac-hud.md - Demo: `npx shadcn add https://eased.dev/r/mac-hud-demo.json` - [Image Compare](https://eased.dev/components/image-compare): Before and after image comparison slider for React and shadcn: drag the divider, flick it to 0, 50 or 100, or move it by keyboard. - Install: `npx shadcn add https://eased.dev/r/image-compare.json` - JSON: https://eased.dev/r/image-compare.json - Markdown: https://eased.dev/components/image-compare.md - Demo: `npx shadcn add https://eased.dev/r/image-compare-demo.json` - [Like Button](https://eased.dev/components/like-button): Animated like button for React and shadcn: the heart pops with a burst of sparks, and the optimistic count reverts if saving fails. - Install: `npx shadcn add https://eased.dev/r/like-button.json` - JSON: https://eased.dev/r/like-button.json - Markdown: https://eased.dev/components/like-button.md - Demo: `npx shadcn add https://eased.dev/r/like-button-demo.json` - [Dialog](https://eased.dev/components/dialog): Modal dialog for React and shadcn, with confirm (alert) dialogs and nested dialogs, built on Base UI. - Install: `npx shadcn add https://eased.dev/r/dialog.json` - JSON: https://eased.dev/r/dialog.json - Markdown: https://eased.dev/components/dialog.md - Demo: `npx shadcn add https://eased.dev/r/dialog-demo.json` - [Command Palette](https://eased.dev/components/command-palette): Command palette for React and shadcn: ⌘K opens it at once, commands filter as you type, and Enter runs the first match. - Install: `npx shadcn add https://eased.dev/r/command-palette.json` - JSON: https://eased.dev/r/command-palette.json - Markdown: https://eased.dev/components/command-palette.md - Demo: `npx shadcn add https://eased.dev/r/command-palette-demo.json` - [Dropdown Menu](https://eased.dev/components/dropdown-menu): Dropdown menu for React and shadcn: one highlight glides between rows, and a chosen row blinks before the menu closes, as on macOS. - Install: `npx shadcn add https://eased.dev/r/dropdown-menu.json` - JSON: https://eased.dev/r/dropdown-menu.json - Markdown: https://eased.dev/components/dropdown-menu.md - Demo: `npx shadcn add https://eased.dev/r/dropdown-menu-demo.json` - [Context Menu](https://eased.dev/components/context-menu): Right-click context menu for React and shadcn on Base UI: it opens at the pointer, or on a 500ms long press on touch, with submenus. - Install: `npx shadcn add https://eased.dev/r/context-menu.json` - JSON: https://eased.dev/r/context-menu.json - Markdown: https://eased.dev/components/context-menu.md - Demo: `npx shadcn add https://eased.dev/r/context-menu-demo.json` - [Sheet](https://eased.dev/components/sheet): Sheet and side drawer for React and shadcn on Base UI Drawer: swipe to dismiss, and side sheets become bottom sheets under 640px. - Install: `npx shadcn add https://eased.dev/r/sheet.json` - JSON: https://eased.dev/r/sheet.json - Markdown: https://eased.dev/components/sheet.md - Demo: `npx shadcn add https://eased.dev/r/sheet-demo.json` - [Select](https://eased.dev/components/select): Select dropdown for React and shadcn that opens with the chosen option over its trigger, like a macOS pop-up button. - Install: `npx shadcn add https://eased.dev/r/select.json` - JSON: https://eased.dev/r/select.json - Markdown: https://eased.dev/components/select.md - Demo: `npx shadcn add https://eased.dev/r/select-demo.json` - [Combobox](https://eased.dev/components/combobox): Searchable select (combobox) for React and shadcn, with filtering, a clear button and multi-select chips, on Base UI. - Install: `npx shadcn add https://eased.dev/r/combobox.json` - JSON: https://eased.dev/r/combobox.json - Markdown: https://eased.dev/components/combobox.md - Demo: `npx shadcn add https://eased.dev/r/combobox-demo.json` - [Toast](https://eased.dev/components/toast): Toast notifications for React and shadcn: toasts stack behind the newest, fan out on hover and pause their timers, with an Undo action. - Install: `npx shadcn add https://eased.dev/r/toast.json` - JSON: https://eased.dev/r/toast.json - Markdown: https://eased.dev/components/toast.md - Demo: `npx shadcn add https://eased.dev/r/toast-demo.json` - [Heading](https://eased.dev/components/heading): Heading component for React and shadcn: size, weight, tracking and leading set together from 16 to 60px, separate from the h1–h6 level. - Install: `npx shadcn add https://eased.dev/r/heading.json` - JSON: https://eased.dev/r/heading.json - Markdown: https://eased.dev/components/heading.md - Demo: `npx shadcn add https://eased.dev/r/heading-demo.json` - [Prose](https://eased.dev/components/prose): Prose typography for rendered markdown in React and shadcn, with a chat density for AI replies and a document density for long reads. - Install: `npx shadcn add https://eased.dev/r/prose.json` - JSON: https://eased.dev/r/prose.json - Markdown: https://eased.dev/components/prose.md - Demo: `npx shadcn add https://eased.dev/r/prose-demo.json` - [Checkbox](https://eased.dev/components/checkbox): Animated checkbox for React and shadcn: the check draws itself and morphs into a dash for indeterminate parent checkboxes. - Install: `npx shadcn add https://eased.dev/r/checkbox.json` - JSON: https://eased.dev/r/checkbox.json - Markdown: https://eased.dev/components/checkbox.md - Demo: `npx shadcn add https://eased.dev/r/checkbox-demo.json` - [Switch](https://eased.dev/components/switch): Toggle switch for React and shadcn: the thumb stretches toward where it is going, and a label turns it into a settings row. - Install: `npx shadcn add https://eased.dev/r/switch.json` - JSON: https://eased.dev/r/switch.json - Markdown: https://eased.dev/components/switch.md - Demo: `npx shadcn add https://eased.dev/r/switch-demo.json` - [Slider](https://eased.dev/components/slider): Range slider for React and shadcn, single or two-thumb, with a value readout whose digits roll as it steps. - Install: `npx shadcn add https://eased.dev/r/slider.json` - JSON: https://eased.dev/r/slider.json - Markdown: https://eased.dev/components/slider.md - Demo: `npx shadcn add https://eased.dev/r/slider-demo.json` - [Alert](https://eased.dev/components/alert): Inline alert for React and shadcn for info, success, warning and error messages, with optional actions and a dismiss button. - Install: `npx shadcn add https://eased.dev/r/alert.json` - JSON: https://eased.dev/r/alert.json - Markdown: https://eased.dev/components/alert.md - Demo: `npx shadcn add https://eased.dev/r/alert-demo.json` - [Card](https://eased.dev/components/card): Card component for React and shadcn with shadcn's parts and slots, plus a CardLink that makes the whole card one clickable link. - Install: `npx shadcn add https://eased.dev/r/card.json` - JSON: https://eased.dev/r/card.json - Markdown: https://eased.dev/components/card.md - Demo: `npx shadcn add https://eased.dev/r/card-demo.json` - [Demo Cursor](https://eased.dev/components/demo-cursor): An animated demo cursor for React and shadcn, a scripted pointer that glides to real elements and presses them. - Install: `npx shadcn add https://eased.dev/r/demo-cursor.json` - JSON: https://eased.dev/r/demo-cursor.json - Markdown: https://eased.dev/components/demo-cursor.md - Demo: `npx shadcn add https://eased.dev/r/demo-cursor-demo.json` - [Click Ripple](https://eased.dev/components/click-ripple): An animated click ripple for React and shadcn, a ring that spreads from the exact press point. - Install: `npx shadcn add https://eased.dev/r/click-ripple.json` - JSON: https://eased.dev/r/click-ripple.json - Markdown: https://eased.dev/components/click-ripple.md - Demo: `npx shadcn add https://eased.dev/r/click-ripple-demo.json` - [Zoom Spotlight](https://eased.dev/components/zoom-spotlight): An animated zoom spotlight for React and shadcn, pushing in on one region of live UI and dimming the rest. - Install: `npx shadcn add https://eased.dev/r/zoom-spotlight.json` - JSON: https://eased.dev/r/zoom-spotlight.json - Markdown: https://eased.dev/components/zoom-spotlight.md - Demo: `npx shadcn add https://eased.dev/r/zoom-spotlight-demo.json` - [Caption Ticker](https://eased.dev/components/caption-ticker): An animated caption ticker for React and shadcn, stepping short captions in under a scene one line at a time. - Install: `npx shadcn add https://eased.dev/r/caption-ticker.json` - JSON: https://eased.dev/r/caption-ticker.json - Markdown: https://eased.dev/components/caption-ticker.md - Demo: `npx shadcn add https://eased.dev/r/caption-ticker-demo.json` ## Sets Components made to be used together, each with an example that chains them. - [Product demo](https://eased.dev/sets/product-demo): Play your real UI like a screen recording: a scripted cursor that presses real buttons, a ripple at each press, a zoom that pushes in on the result and captions underneath, chained on one timeline. - Pieces: Demo Cursor, Click Ripple, Zoom Spotlight, Caption Ticker - Install the scene and every piece: `npx shadcn add https://eased.dev/r/demo-scene.json` - Markdown: https://eased.dev/sets/product-demo.md - [Onboarding](https://eased.dev/sets/onboarding): A product's first minutes in one flow: set up a workspace, invite the team to it, then land in the app with a first-run checklist that already knows what was done. - Pieces: Workspace Setup, Team Invite, First-run Checklist, Onboarding Shell - Install the scene and every piece (Pro): `npx shadcn add @eased-pro/onboarding-scene` - Markdown: https://eased.dev/sets/onboarding.md ## Pro components (38; private registry @eased-pro, see https://eased.dev/docs/installation#pro-components) - [Agent Run Console](https://eased.dev/components/agent-run-console): An animated agent run console for React and shadcn, with a runs list, live steps and a step inspector. - Markdown: https://eased.dev/components/agent-run-console.md - [Onboarding Checklist](https://eased.dev/components/onboarding-checklist): An onboarding checklist for React and shadcn/ui that shows new users what to set up and how far they've got. Each step has one action, ticks draw as steps finish, a progress ring fills while the count of steps left rolls down, and the finished list folds into a Done pill. - Markdown: https://eased.dev/components/onboarding-checklist.md - [Notification Center](https://eased.dev/components/notification-center): An animated notification center for React and shadcn, grouped by day, with mark all read. - Markdown: https://eased.dev/components/notification-center.md - [Billing Overview](https://eased.dev/components/billing-overview): An animated billing overview for React and shadcn, with usage meters that warn at 80% and a cancel flow. - Markdown: https://eased.dev/components/billing-overview.md - [Vitals Card](https://eased.dev/components/vitals-card): An animated vitals card for React and shadcn, with live readings that warn outside their usual range. - Markdown: https://eased.dev/components/vitals-card.md - [Medication Schedule](https://eased.dev/components/medication-schedule): An animated medication schedule for React and shadcn, with today's doses by time and a refill countdown. - Markdown: https://eased.dev/components/medication-schedule.md - [Product Card](https://eased.dev/components/product-card): An animated product card for React and shadcn, with Quick add so shoppers pick a size without leaving the grid. - Markdown: https://eased.dev/components/product-card.md - [Cart Drawer](https://eased.dev/components/cart-drawer): An animated cart drawer for React and shadcn, with undoable removals and a free-shipping progress bar. - Markdown: https://eased.dev/components/cart-drawer.md - [Spotlight Tour](https://eased.dev/components/spotlight-tour): A product tour whose scrim cutout springs between targets, morphing size and concentric radius while the tooltip re-anchors. - Markdown: https://eased.dev/components/spotlight-tour.md - [Scrub Label](https://eased.dev/components/scrub-label): Drag a numeric label to scrub its value, with pointer lock, fine and coarse modifiers, keyboard steps and rolling tabular digits. - Markdown: https://eased.dev/components/scrub-label.md - [Group-by Morph List](https://eased.dev/components/group-by-list): A grouped list where switching the grouping moves rows into their new groups with shared-layout motion and rolling counts. - Markdown: https://eased.dev/components/group-by-list.md - [Gliding Focus Ring](https://eased.dev/components/gliding-focus-ring): One keyboard focus ring that springs between fields, resizing and re-radiusing to each target. Pointer focus draws nothing. - Markdown: https://eased.dev/components/gliding-focus-ring.md - [Hover Card](https://eased.dev/components/hover-card): An animated hover card for React and shadcn, a link preview that opens after a short pause. - Markdown: https://eased.dev/components/hover-card.md - [Search Field](https://eased.dev/components/search-field): An animated search field for React and shadcn, with a clear button, a ⌘K hint and a loading state. - Markdown: https://eased.dev/components/search-field.md - [Sortable Table](https://eased.dev/components/sortable-table): A data table for React and shadcn/ui where clicking a column header sorts the rows, and every row glides from its old position to its new one instead of jumping. Shift-click a second header to sort by two columns. It is built on TanStack Table, so sorting, controlled state and column options work the way they do there. - Markdown: https://eased.dev/components/sortable-table.md - [Squircle](https://eased.dev/components/squircle): A squircle for React and shadcn, giving any element superellipse corners with a matching hairline ring. - Markdown: https://eased.dev/components/squircle.md - [Bar Chart](https://eased.dev/components/bar-chart): An animated bar chart for React and shadcn, with grouped or stacked bars and a hidden data table. - Markdown: https://eased.dev/components/bar-chart.md - [Stat Tile](https://eased.dev/components/stat-tile): An animated stat tile for React and shadcn, with a value, a delta and a sparkline. - Markdown: https://eased.dev/components/stat-tile.md - [Line Chart](https://eased.dev/components/line-chart): An animated line chart for React and shadcn, with a crosshair tooltip, legend toggles and a previous period. - Markdown: https://eased.dev/components/line-chart.md - [Donut Chart](https://eased.dev/components/donut-chart): An animated donut or pie chart for React and shadcn, with outside labels on leader lines. - Markdown: https://eased.dev/components/donut-chart.md - [Agent Run](https://eased.dev/components/agent-run): An animated agent run for React and shadcn, with steps and their tool calls streaming onto a rail. - Markdown: https://eased.dev/components/agent-run.md - [Tool Call Row](https://eased.dev/components/tool-call-row): An animated tool call row for React and shadcn, showing an AI agent's tool call with its input and output. - Markdown: https://eased.dev/components/tool-call-row.md - [Approval Card](https://eased.dev/components/approval-card): An animated approval card for React and shadcn, showing the diff an agent wants approved, with hold to approve. - Markdown: https://eased.dev/components/approval-card.md - [Conversation](https://eased.dev/components/conversation): An animated chat conversation for React and shadcn, following a streaming reply until you scroll up. - Markdown: https://eased.dev/components/conversation.md - [Live Activity Pill](https://eased.dev/components/activity-pill): An animated live activity pill for React and shadcn, showing background agents, builds and uploads. - Markdown: https://eased.dev/components/activity-pill.md - [Wheel Picker](https://eased.dev/components/wheel-picker): An animated wheel picker for React and shadcn, an iOS-style drum with keyboard and type-ahead support. - Markdown: https://eased.dev/components/wheel-picker.md - [Dock](https://eased.dev/components/dock): An animated dock for React and shadcn, with tiles that grow as the pointer nears them. - Markdown: https://eased.dev/components/dock.md - [FX Rate Board](https://eased.dev/components/fx-rate-board): An animated FX rate board for React and shadcn, showing live currency pairs with trend lines. - Markdown: https://eased.dev/components/fx-rate-board.md - [Transaction Ledger](https://eased.dev/components/transaction-ledger): An animated transaction ledger for React and shadcn, grouped by day with each day's net. - Markdown: https://eased.dev/components/transaction-ledger.md - [Deploy Log](https://eased.dev/components/deploy-log): An animated deploy log for React and shadcn, streaming build output under pinned stage headers. - Markdown: https://eased.dev/components/deploy-log.md - [Wallet Card](https://eased.dev/components/wallet-card): An animated crypto wallet card for React and shadcn, with balance, address copy, network switch and hidden balances. - Markdown: https://eased.dev/components/wallet-card.md - [Token Swap](https://eased.dev/components/token-swap): An animated token swap for React and shadcn, with a live route across pools and slippage control. - Markdown: https://eased.dev/components/token-swap.md - [Order Book](https://eased.dev/components/order-book): An animated order book for React and shadcn, with depth bars, a depth chart and price grouping. - Markdown: https://eased.dev/components/order-book.md - [Mac focus timer](https://eased.dev/components/mac-focus-timer): An animated macOS menu bar focus timer for React and shadcn, with the countdown in the status item. - Markdown: https://eased.dev/components/mac-focus-timer.md - [Onboarding Shell](https://eased.dev/components/onboarding-shell): An animated multi-step onboarding frame for React and shadcn, with segmented progress, Back, Skip and a live preview slot, on a headless step engine. - Markdown: https://eased.dev/components/onboarding-shell.md - [Workspace Setup](https://eased.dev/components/workspace-setup): An animated workspace setup flow for React and shadcn: name, URL with a live availability check, team and look, beside a preview that becomes the workspace. - Markdown: https://eased.dev/components/workspace-setup.md - [Team Invite](https://eased.dev/components/team-invite): An animated team invite flow for React and shadcn: emails become chips with inline validation, a role per person and an invite link, beside a members table that fills in. - Markdown: https://eased.dev/components/team-invite.md - [First-run Checklist](https://eased.dev/components/first-run-checklist): An animated first-run checklist for React and shadcn, docked in your app: items tick in any order as people do them, and it folds into a ring. - Markdown: https://eased.dev/components/first-run-checklist.md ## Guides - [Animated number counter in React with Motion](https://eased.dev/guides/animated-number-counter-react): count-up and rolling number ticker with Motion, Intl formatting, reduced motion and screen readers. - [Animated tabs in React and shadcn/ui with Motion layoutId](https://eased.dev/guides/animated-tabs-react-shadcn): a sliding tab indicator with layoutId, keyboard support and ARIA roles, plus shadcn/ui Tabs. - [Animated toast notifications in React with Motion](https://eased.dev/guides/animated-toast-notifications-react): a stacked toast system with enter and exit springs, paused timers and live regions. - [AI chat input in React with a thinking state and Stop button](https://eased.dev/guides/react-ai-chat-input): an auto-resizing chat input with Enter to send, Send to Stop, and a thinking timer, wired to the AI SDK's useChat. ## By industry Every component is tagged for the industries it suits; the MCP tools list_components and search_components take an `industry` filter. - [AI](https://eased.dev/blocks/ai): 35 components for AI agents, e.g. Agent Run Console, Tree, Spotlight Tour, Scrub Label - [Devtools](https://eased.dev/blocks/devtools): 51 components for developer tools, e.g. Agent Run Console, Breadcrumb, Tree, Spotlight Tour - [Finance](https://eased.dev/blocks/finance): 39 components for fintech and FX, e.g. Pagination, Carousel, Scrub Label, Group-by Morph List - [Crypto](https://eased.dev/blocks/crypto): 19 components for crypto, e.g. Scrub Label, Cells kit, Number Roll, Segmented - [SaaS](https://eased.dev/blocks/saas): 70 components for SaaS analytics, e.g. Onboarding Checklist, Notification Center, Billing Overview, Pagination - [Legal](https://eased.dev/blocks/legal): 29 components for legal tech, e.g. Pagination, Breadcrumb, File Upload, Tree - [E-commerce](https://eased.dev/blocks/ecommerce): 37 components for e-commerce, e.g. Product Card, Variant Picker, Cart Drawer, Pagination - [Real estate](https://eased.dev/blocks/real-estate): 17 components for real estate and CRE, e.g. File Upload, Carousel, Scrub Label, Cells kit - [Health](https://eased.dev/blocks/health): 31 components for health tech, e.g. Vitals Card, Appointment Scheduler, Medication Schedule, Rating - [HR](https://eased.dev/blocks/hr): 29 components for HR and recruiting, e.g. Pagination, File Upload, Undo Pill, Scrub Label ## Changelog - [Changelog](https://eased.dev/docs/changelog): every release, dated; RSS at https://eased.dev/changelog.xml ## Pricing and licence - Free: a growing set of components under the MIT licence - Pro Solo: $149 one-time early-bird price for now ($199 regular), for one developer - Founding price: the first 10 people to buy Solo pay $79 instead of $149, applied at checkout with no code. It ends 2026-11-13 at 23:59 UTC or when 10 are sold; 10 of 10 left - Pro Team: $349 one-time early-bird price for now ($449 regular), for up to 10 developers - Pro is a lifetime licence: every current and future Pro component and block, for unlimited projects, your own and your clients', with no attribution - Details: https://eased.dev/pricing and https://eased.dev/licence ## Links - [Home](https://eased.dev) - [Components](https://eased.dev/components) - [Docs](https://eased.dev/docs/introduction) - [Pricing](https://eased.dev/pricing) - [X](https://x.com/easedui) - [GitHub: the free, MIT-licensed source](https://github.com/easedui/ui)