---
name: "@eased"
slug: "eased"
description: "Motion-first React components and blocks for shadcn, with tuned springs, light and dark themes, and an MCP server for AI agents."
category: "Animated components"
tags: ["ai", "animation", "blocks", "buttons", "cards", "charts", "forms", "loaders", "media", "navigation", "overlays", "pro-available", "tables", "theming"]
framework: "react"
license: "MIT"
author: "easedui"
website: "https://eased.dev"
github: "https://github.com/easedui/ui"
registry: "https://eased.dev/r/registry.json"
pro: true
pro_url: "https://eased.dev/pricing"
github_stars: 0
component_count: 202
generated_at: "2026-10-27T06:34:08.542Z"
---

# @eased

Motion-first React components and blocks for shadcn, with tuned springs, light and dark themes, and an MCP server for AI agents.

## Links

- Website: https://eased.dev
- GitHub: https://github.com/easedui/ui
- Registry JSON: https://eased.dev/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/eased
- This file: https://sh4dcn.netlify.app/md/eased.md
- Pro / pricing: https://eased.dev/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://eased.dev/r/registry.json
pnpm dlx shadcn@latest add https://eased.dev/r/registry.json
bunx shadcn@latest add https://eased.dev/r/registry.json
# clone the source repo
git clone https://github.com/easedui/ui.git
# fetch the raw registry index
curl -s https://eased.dev/r/registry.json
```

## Components (202)

| name | type | description | install |
| --- | --- | --- | --- |
| eased-tokens | registry:item | The colours, shadows, radius roles, UI type sizes, springs, utilities (radius-nested, hit-area, focus-ring …) and variants (hover-fine, reduced) every Eased co… | `npx shadcn@latest add https://eased.dev/r/eased-tokens.json` |
| eased-motion | registry:lib | The named springs (snappy, smooth, bouncy), tweens, a hydration-safe useSafeReducedMotion and press classes every Eased component shares, matching the springs … | `npx shadcn@latest add https://eased.dev/r/eased-motion.json` |
| eased-demo-frame | registry:component | The shell every Eased demo renders in: 420px tall, shrinks to its container, one 48px header style. | `npx shadcn@latest add https://eased.dev/r/eased-demo-frame.json` |
| undo-pill | registry:ui | Undo toast for React and shadcn: a pill with a draining countdown ring that commits the destructive action only when it runs out. | `npx shadcn@latest add https://eased.dev/r/undo-pill.json` |
| undo-pill-demo | registry:example | A file list where deleting a row shows the Undo Pill. | `npx shadcn@latest add https://eased.dev/r/undo-pill-demo.json` |
| concentric-frame | registry:ui | Concentric border radius frame for React and shadcn: nested corners take the outer radius minus padding and border, through CSS variables. | `npx shadcn@latest add https://eased.dev/r/concentric-frame.json` |
| concentric-frame-demo | registry:example | Demo for Concentric Frame. | `npx shadcn@latest add https://eased.dev/r/concentric-frame-demo.json` |
| accordion-demo | registry:example | A billing FAQ with answers of different lengths. | `npx shadcn@latest add https://eased.dev/r/accordion-demo.json` |
| accordion | registry:ui | Animated accordion for React and shadcn: panels open to their real height, one or several at a time, built on Base UI. | `npx shadcn@latest add https://eased.dev/r/accordion.json` |
| avatar-demo | registry:example | A members card: a stacked group with a rolling +N, a list with photos, initials and a failed image, and Invite. | `npx shadcn@latest add https://eased.dev/r/avatar-demo.json` |
| avatar | registry:ui | 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. | `npx shadcn@latest add https://eased.dev/r/avatar.json` |
| badge-demo | registry:example | A mail sidebar with rolling unread counts (98 → 99+) and service status badges with a live dot. | `npx shadcn@latest add https://eased.dev/r/badge-demo.json` |
| badge | registry:ui | Animated badge for React and shadcn for statuses and counts: counts roll their digits, and a count-only badge leaves at zero. | `npx shadcn@latest add https://eased.dev/r/badge.json` |
| button-demo | registry:example | An invoice with Send (loading, then “Sent”), Download and a two-step Void. | `npx shadcn@latest add https://eased.dev/r/button-demo.json` |
| button | registry:ui | Animated button for React and shadcn: labels swap while the width springs, and the loading spinner keeps its width. | `npx shadcn@latest add https://eased.dev/r/button.json` |
| eased-auto-height | registry:ui | The height:auto spring primitive: a wrapper whose height springs to its content, opens and closes with the content fading in after the height lands, and rests … | `npx shadcn@latest add https://eased.dev/r/eased-auto-height.json` |
| eased-field | registry:ui | Label, description ⇄ error message slot and the bordered input group, on Base UI Field. Focus is the border alone; turning invalid shakes the group once, 6px, … | `npx shadcn@latest add https://eased.dev/r/eased-field.json` |
| eased-floating-demo | registry:example | One popover per side; each enters toward its trigger and flips on collision. | `npx shadcn@latest add https://eased.dev/r/eased-floating-demo.json` |
| eased-floating | registry:ui | The motion and material every Eased popup shares: grows from the trigger's transform-origin, enters a few pixels toward the trigger, closes at half the distanc… | `npx shadcn@latest add https://eased.dev/r/eased-floating.json` |
| eased-gesture-demo | registry:example | A three-detent sheet over a map: flicks project onto detents, pulls past the top rubber-band, and the list hands its scroll over to the sheet. | `npx shadcn@latest add https://eased.dev/r/eased-gesture-demo.json` |
| eased-gesture | registry:ui | useDrag: one-axis drag with Apple's rubber-band past the ends, velocity projection onto snap points, scroll handoff from an inner scroller, interruptible relea… | `npx shadcn@latest add https://eased.dev/r/eased-gesture.json` |
| eased-indicator | registry:ui | The shared-layout highlight primitive: render <Indicator> inside whichever item is active and it glides there on the snappy spring, with corners kept round whi… | `npx shadcn@latest add https://eased.dev/r/eased-indicator.json` |
| eased-number-roll | registry:ui | The rolling-digits engine every Eased number uses: Intl-formatted parts, each digit a ten-face cylinder on a spring that rolls in the direction of change, with… | `npx shadcn@latest add https://eased.dev/r/eased-number-roll.json` |
| eased-scroll-fade | registry:ui | Edge feathers that appear only where there is more to scroll (scrollFadeMask, useScrollEdges) and the stacked masked backdrop layers behind Progressive Blur (b… | `npx shadcn@latest add https://eased.dev/r/eased-scroll-fade.json` |
| eased-text-swap | registry:ui | The text-change engine: outgoing text lifts 3px and blurs out, incoming rises 4px and sharpens, and the box springs to the new width. Shared by Button, Field m… | `npx shadcn@latest add https://eased.dev/r/eased-text-swap.json` |
| field-demo | registry:example | A sign-up form on Base UI Form: submit focuses the first invalid field and a server error routes to its field. | `npx shadcn@latest add https://eased.dev/r/field-demo.json` |
| field | registry:ui | Form field for React and shadcn: a label, a control and one message line where help text and errors swap in place. | `npx shadcn@latest add https://eased.dev/r/field.json` |
| input-demo | registry:example | Workspace settings with a URL prefix, live validation and a disabled field. | `npx shadcn@latest add https://eased.dev/r/input-demo.json` |
| input | registry:ui | Text input for React and shadcn on Base UI, with leading and trailing addons and an error state that shakes once. | `npx shadcn@latest add https://eased.dev/r/input.json` |
| kbd-demo | registry:example | A keyboard shortcuts list whose keycaps press and rows light up as you hold the real keys. | `npx shadcn@latest add https://eased.dev/r/kbd-demo.json` |
| kbd | registry:ui | Keyboard shortcut keycap (kbd) for React and shadcn that presses down while the real key is held. | `npx shadcn@latest add https://eased.dev/r/kbd.json` |
| number-roll-demo | registry:example | A revenue card: switch the range or the number format and every figure rolls; live orders tick the total up. | `npx shadcn@latest add https://eased.dev/r/number-roll-demo.json` |
| number-roll | registry:ui | Animated number counter for React and shadcn: each digit rolls to its new value, formatted for the user's locale. | `npx shadcn@latest add https://eased.dev/r/number-roll.json` |
| popover-demo | registry:example | A Share popover with an invite field, people with access and a concentric footer. | `npx shadcn@latest add https://eased.dev/r/popover-demo.json` |
| popover | registry:ui | Animated popover for React and shadcn that grows out of its trigger, moves focus inside and closes on Esc, built on Base UI. | `npx shadcn@latest add https://eased.dev/r/popover.json` |
| progress-demo | registry:example | An upload list: uneven chunks, an indeterminate processing step, then complete; plus a storage meter. | `npx shadcn@latest add https://eased.dev/r/progress-demo.json` |
| progress | registry:ui | Animated progress bar for React and shadcn on Base UI, with a spring-driven bar, a rolling value and an indeterminate sweep. | `npx shadcn@latest add https://eased.dev/r/progress.json` |
| progressive-blur-demo | registry:example | A music library whose header and mini player blur the covers scrolling under them, with a flat-blur comparison. | `npx shadcn@latest add https://eased.dev/r/progressive-blur-demo.json` |
| progressive-blur | registry:ui | Progressive blur for React and shadcn: a backdrop blur that ramps up to 20px toward an edge, under sticky headers, bottom bars and composers. | `npx shadcn@latest add https://eased.dev/r/progressive-blur.json` |
| radio-group-demo | registry:example | A checkout delivery step: speed as radio cards, drop-off as radios that depend on it. | `npx shadcn@latest add https://eased.dev/r/radio-group-demo.json` |
| radio-group | registry:ui | Radio group for React and shadcn, with plain radios or selectable cards whose selected border travels between them. | `npx shadcn@latest add https://eased.dev/r/radio-group.json` |
| scroll-area-demo | registry:example | An activity feed with a horizontally scrolling filter row and a vertical list. | `npx shadcn@latest add https://eased.dev/r/scroll-area-demo.json` |
| scroll-area | registry:ui | Custom scrollbar for React and shadcn: a thin overlay bar on a native scroller, with edge fades only where more remains. | `npx shadcn@latest add https://eased.dev/r/scroll-area.json` |
| segmented-demo | registry:example | A traffic card: a metric switch in the header and a date-range control that redraws the chart. | `npx shadcn@latest add https://eased.dev/r/segmented-demo.json` |
| segmented | registry:ui | Segmented control for React and shadcn: a thumb glides to the chosen option, with radio semantics that submit with a form. | `npx shadcn@latest add https://eased.dev/r/segmented.json` |
| skeleton-demo | registry:example | An activity feed that loads behind skeletons shaped by its own content, then hands off without moving a pixel. | `npx shadcn@latest add https://eased.dev/r/skeleton-demo.json` |
| skeleton | registry:ui | Skeleton loader for React and shadcn: every placeholder on the page shares one shimmer, and the real content fades in in place. | `npx shadcn@latest add https://eased.dev/r/skeleton.json` |
| spinner-demo | registry:example | A deploy that walks its steps, each spinner swapping to a check, with the size scale underneath. | `npx shadcn@latest add https://eased.dev/r/spinner-demo.json` |
| spinner | registry:ui | Loading spinner for React and shadcn: a CSS arc that keeps turning while the main thread is busy and announces itself to screen readers. | `npx shadcn@latest add https://eased.dev/r/spinner.json` |
| tabs-demo | registry:example | A project page with Overview, Activity, Members and Settings tabs of different heights. | `npx shadcn@latest add https://eased.dev/r/tabs-demo.json` |
| tabs | registry:ui | Animated tabs for React and shadcn: an underline or pill indicator glides to the active tab and panels cross-fade. | `npx shadcn@latest add https://eased.dev/r/tabs.json` |
| text-swap-demo | registry:example | An order tracker, a billing toggle and a copy button, each changing text with Text Swap. | `npx shadcn@latest add https://eased.dev/r/text-swap-demo.json` |
| text-swap | registry:ui | Animated text change for React and shadcn: a label or value swaps with a lift and blur while the width springs to fit. | `npx shadcn@latest add https://eased.dev/r/text-swap.json` |
| textarea-demo | registry:example | A support reply that springs open as you write, with a rolling counter. | `npx shadcn@latest add https://eased.dev/r/textarea-demo.json` |
| textarea | registry:ui | Auto-resizing textarea for React and shadcn: it grows with its text on a spring, with a character counter whose digits roll. | `npx shadcn@latest add https://eased.dev/r/textarea.json` |
| toggle-group-demo | registry:example | An editor toolbar: bold, italic, underline and strikethrough (multiple) beside text alignment (single). | `npx shadcn@latest add https://eased.dev/r/toggle-group-demo.json` |
| toggle-group | registry:ui | Toggle button group for React and shadcn, single or multiple selection, for toolbars like bold, italic and underline. | `npx shadcn@latest add https://eased.dev/r/toggle-group.json` |
| tooltip-demo | registry:example | An editor toolbar whose tooltips form one delay group, with keyboard shortcuts. | `npx shadcn@latest add https://eased.dev/r/tooltip-demo.json` |
| tooltip | registry:ui | Animated tooltip for React and shadcn with an optional keyboard shortcut; after the first, neighbours open instantly. | `npx shadcn@latest add https://eased.dev/r/tooltip.json` |
| cells-demo | registry:example | An accounts table: advance a month and MRR rolls, deltas recolour, onboarding meters glide, and active accounts breathe. | `npx shadcn@latest add https://eased.dev/r/cells-demo.json` |
| cells | registry:ui | Table cells for React and shadcn: avatars with names, status badges, rolling numbers with coloured deltas, progress meters, times and IDs. | `npx shadcn@latest add https://eased.dev/r/cells.json` |
| eased-table-core | registry:ui | The layer under every Eased table: a TanStack Table v9 feature set with typed column meta, hairline rules, dense and comfortable densities, a hover-revealed so… | `npx shadcn@latest add https://eased.dev/r/eased-table-core.json` |
| table-demo | registry:example | An invoices table with mono IDs you can copy, avatars, status badges, amounts and relative dates, with a density toggle. | `npx shadcn@latest add https://eased.dev/r/table-demo.json` |
| table | registry:ui | Data table for React and shadcn on TanStack Table, with half-pixel row rules, a sticky header and 36px or 48px rows. | `npx shadcn@latest add https://eased.dev/r/table.json` |
| attachment-demo | registry:example | A message draft with an upload in flight, a finished deck and a failed CSV with Retry. | `npx shadcn@latest add https://eased.dev/r/attachment-demo.json` |
| attachment | registry:ui | File attachment chip for React and shadcn: image thumbnails sharpen as they load, a ring tracks the upload, and failures offer Retry. | `npx shadcn@latest add https://eased.dev/r/attachment.json` |
| composer-demo | registry:example | A working mini chat: send, attach, stop mid-reply, scroll up while it streams. | `npx shadcn@latest add https://eased.dev/r/composer-demo.json` |
| composer | registry:ui | 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. | `npx shadcn@latest add https://eased.dev/r/composer.json` |
| eased-chat-core | registry:ui | The chat model and hooks behind Eased's chat components: AI SDK UIMessage-compatible types, useStickToBottom, message grouping, the attachment model with useAt… | `npx shadcn@latest add https://eased.dev/r/eased-chat-core.json` |
| message-demo | registry:example | Follow-ups that merge into one run of bubbles, corners tightening as each lands. | `npx shadcn@latest add https://eased.dev/r/message-demo.json` |
| message | registry:ui | Chat message bubble for React and shadcn that renders AI SDK messages, tightening the corners where consecutive bubbles meet. | `npx shadcn@latest add https://eased.dev/r/message.json` |
| eased-thinking-core | registry:ui | The clocks, models and contracts behind Eased's thinking states: useElapsed (seconds on the start's own grid), useTokenRate (a smoothed stream rate as motion v… | `npx shadcn@latest add https://eased.dev/r/eased-thinking-core.json` |
| shimmer-text-demo | registry:example | An agent's activity: a research status rotating mid-sweep, and a task list whose running row shimmers and settles as each task finishes. | `npx shadcn@latest add https://eased.dev/r/shimmer-text-demo.json` |
| shimmer-text | registry:ui | 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. | `npx shadcn@latest add https://eased.dev/r/shimmer-text.json` |
| thinking-bar-demo | registry:example | A billing question: the assistant thinks for six seconds with its reasoning streaming in, then answers while the bar settles to "Thought for 6s" and folds away. | `npx shadcn@latest add https://eased.dev/r/thinking-bar-demo.json` |
| thinking-bar | registry:ui | AI reasoning indicator for React and shadcn: "Thinking 4s" counts up while the model reasons, then reads "Thought for 12s" and folds away. | `npx shadcn@latest add https://eased.dev/r/thinking-bar.json` |
| agent-orb-demo | registry:example | A voice assistant: switch between idle, listening, thinking and speaking; speaking streams a reply in bursts and the orb speeds up and slows with the token rat… | `npx shadcn@latest add https://eased.dev/r/agent-orb-demo.json` |
| agent-orb | registry:ui | AI agent orb for React and shadcn showing idle, listening, thinking or speaking, with a swirl that speeds up with the token rate. | `npx shadcn@latest add https://eased.dev/r/agent-orb.json` |
| eased-chart-core | registry:ui | The engine under every Eased chart: nice scales, container sizing, path morphs on shared x samples, keyed arc layouts and morphs, a sequential colour scale, ro… | `npx shadcn@latest add https://eased.dev/r/eased-chart-core.json` |
| eased-layout | registry:lib | Alignment recipes for repeating rows: rowGrid and rowGridRow share a leading, a flexible and a fixed trailing track, so every row's role or value starts on one… | `npx shadcn@latest add https://eased.dev/r/eased-layout.json` |
| sparkline-demo | registry:example | A product-health card: a scrubbable daily-active-users line over four metric rows, all morphing with the range. | `npx shadcn@latest add https://eased.dev/r/sparkline-demo.json` |
| sparkline | registry:ui | Sparkline chart for React and shadcn: a word-sized line that draws in once and morphs to new values, with an optional scrub readout. | `npx shadcn@latest add https://eased.dev/r/sparkline.json` |
| code-block-demo | registry:example | A docs excerpt: a 34-line debounce hook with line numbers and highlighted lines, collapsed after 12. | `npx shadcn@latest add https://eased.dev/r/code-block-demo.json` |
| code-block | registry:ui | Code block for React and shadcn with Shiki syntax highlighting, a copy button, line highlights and long blocks that collapse under a blur. | `npx shadcn@latest add https://eased.dev/r/code-block.json` |
| code-tabs-demo | registry:example | An install block synced across package managers, then three files of different heights and languages. | `npx shadcn@latest add https://eased.dev/r/code-tabs-demo.json` |
| code-tabs | registry:ui | 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. | `npx shadcn@latest add https://eased.dev/r/code-tabs.json` |
| eased-code-core | registry:ui | The engine behind Eased code components: a lazily loaded Shiki singleton (shiki/core + the JavaScript regex engine, grammars for tsx, ts, js, jsx, json, css, b… | `npx shadcn@latest add https://eased.dev/r/eased-code-core.json` |
| snippet-demo | registry:example | An install card: a package-manager switch drives two commands, plus a long git clone that scrolls under edge fades. | `npx shadcn@latest add https://eased.dev/r/snippet-demo.json` |
| snippet | registry:ui | 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. | `npx shadcn@latest add https://eased.dev/r/snippet.json` |
| eased-skill | registry:item | The design skill Eased is built with, as an agent skill: alignment, the 1:2 spacing ratio, concentric radii, springs per role, enter and exit, focus rings, red… | `npx shadcn@latest add https://eased.dev/r/eased-skill.json` |
| eased-mac | registry:lib | The macOS look the Mac pack shares: the San Francisco font stack, frosted popover and HUD materials in light and dark, hairlines and macOS corner radii, with a… | `npx shadcn@latest add https://eased.dev/r/eased-mac.json` |
| mac-hud-demo | registry:example | A small macOS desktop with media keys: nudge volume, brightness and keyboard backlight (hold to repeat, or use the arrow keys) and switch between the classic a… | `npx shadcn@latest add https://eased.dev/r/mac-hud-demo.json` |
| mac-hud | registry:ui | macOS volume and brightness HUD for React and shadcn, square or macOS 26 pill, updating in place and holding 1.1s after each change. | `npx shadcn@latest add https://eased.dev/r/mac-hud.json` |
| mac-menu-popover-demo | registry:example | A menu bar usage tracker: session and weekly plan usage, a reset countdown and app actions, over a frosted desktop. | `npx shadcn@latest add https://eased.dev/r/mac-menu-popover-demo.json` |
| mac-menu-popover | registry:ui | macOS menu bar popover for React and shadcn, for Tauri and Electron apps: the panel grows from its arrow tip and reverses mid-flight. | `npx shadcn@latest add https://eased.dev/r/mac-menu-popover.json` |
| eased-mac-desktop | registry:component | The small macOS screen the Mac pack demos share: a soft wallpaper with a few files, a translucent menu bar with the app's menus, status items, Wi-Fi, battery a… | `npx shadcn@latest add https://eased.dev/r/eased-mac-desktop.json` |
| eased-inertia-core | registry:ui | useInertia: hand a MotionValue the release velocity and it coasts with UIScrollView friction onto the snap point the flick would reach (points, a step or a fun… | `npx shadcn@latest add https://eased.dev/r/eased-inertia-core.json` |
| image-compare-demo | registry:example | Plain vs Eased: the same share card as a default kit draws it and as Eased does, with a Loading mode that compares the skeleton with the loaded card. | `npx shadcn@latest add https://eased.dev/r/image-compare-demo.json` |
| image-compare | registry:ui | 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. | `npx shadcn@latest add https://eased.dev/r/image-compare.json` |
| like-button-demo | registry:example | A changelog post with replies: like it for the burst while other readers keep the count rolling. | `npx shadcn@latest add https://eased.dev/r/like-button-demo.json` |
| like-button | registry:ui | Animated like button for React and shadcn: the heart pops with a burst of sparks, and the optimistic count reverts if saving fails. | `npx shadcn@latest add https://eased.dev/r/like-button.json` |
| eased-calendar-core | registry:lib | Month, week and day grids, click-click and drag range selection over days or time slots with disabled units and length limits, WAI-ARIA grid keyboard movement,… | `npx shadcn@latest add https://eased.dev/r/eased-calendar-core.json` |
| eased-doc-core | registry:lib | Documents for contract review and docs: a paragraph/clause model with numbering and a text parser, word redlines on the diff package grouped into accept-or-rej… | `npx shadcn@latest add https://eased.dev/r/eased-doc-core.json` |
| eased-fixtures | registry:lib | Realistic, deterministic sample data per industry (AI, devtools, finance, crypto, SaaS, legal, e-commerce, real estate, health, HR), seeded and anchored to a f… | `npx shadcn@latest add https://eased.dev/r/eased-fixtures.json` |
| eased-flow-core | registry:lib | Node/edge graphs for CI pipelines, agent runs, payment routes and approval flows: a typed graph on thinking-core's StepStatus, a small-DAG auto layout (ranks, … | `npx shadcn@latest add https://eased.dev/r/eased-flow-core.json` |
| eased-realtime-core | registry:lib | Deterministic live data: a seeded RNG and tick stream (prices, rates, vitals), useClock and useTicker that pause off-screen and in hidden tabs and slow under r… | `npx shadcn@latest add https://eased.dev/r/eased-realtime-core.json` |
| eased-timeline-core | registry:lib | Events and timelines for matter histories, ledgers, deploy logs and activity feeds: a typed event model, Intl day grouping (Today, Yesterday, weekday), relativ… | `npx shadcn@latest add https://eased.dev/r/eased-timeline-core.json` |
| alert-demo | registry:example | Billing: a failed payment that retries into a success, and a note you can dismiss. | `npx shadcn@latest add https://eased.dev/r/alert-demo.json` |
| alert | registry:ui | Inline alert for React and shadcn for info, success, warning and error messages, with optional actions and a dismiss button. | `npx shadcn@latest add https://eased.dev/r/alert.json` |
| checkbox-demo | registry:example | An export dialog: All columns follows the columns below it. | `npx shadcn@latest add https://eased.dev/r/checkbox-demo.json` |
| checkbox | registry:ui | Animated checkbox for React and shadcn: the check draws itself and morphs into a dash for indeterminate parent checkboxes. | `npx shadcn@latest add https://eased.dev/r/checkbox.json` |
| eased-overlay-core | registry:ui | What every Eased overlay shares: panel, menu and modal surfaces, the blurred scrim, menu rows on shared tracks with a gliding highlight, a drawn check and shor… | `npx shadcn@latest add https://eased.dev/r/eased-overlay-core.json` |
| heading-demo | registry:example | A type scale from 48 to 16px, each size with its own weight and tracking. | `npx shadcn@latest add https://eased.dev/r/heading-demo.json` |
| heading | registry:ui | Heading component for React and shadcn: size, weight, tracking and leading set together from 16 to 60px, separate from the h1–h6 level. | `npx shadcn@latest add https://eased.dev/r/heading.json` |
| prose-demo | registry:example | Release notes that switch between chat and document density. | `npx shadcn@latest add https://eased.dev/r/prose-demo.json` |
| prose | registry:ui | Prose typography for rendered markdown in React and shadcn, with a chat density for AI replies and a document density for long reads. | `npx shadcn@latest add https://eased.dev/r/prose.json` |
| slider-demo | registry:example | Usage limits: a spend cap, a price range and an alert threshold. | `npx shadcn@latest add https://eased.dev/r/slider-demo.json` |
| slider | registry:ui | Range slider for React and shadcn, single or two-thumb, with a value readout whose digits roll as it steps. | `npx shadcn@latest add https://eased.dev/r/slider.json` |
| switch-demo | registry:example | Notification settings with switches on one right edge. | `npx shadcn@latest add https://eased.dev/r/switch-demo.json` |
| switch | registry:ui | Toggle switch for React and shadcn: the thumb stretches toward where it is going, and a label turns it into a settings row. | `npx shadcn@latest add https://eased.dev/r/switch.json` |
| dialog-demo | registry:example | API keys: a create-key dialog whose Cancel asks in a nested alert dialog, and a revoke alert dialog per key. | `npx shadcn@latest add https://eased.dev/r/dialog-demo.json` |
| dialog | registry:ui | Modal dialog for React and shadcn, with confirm (alert) dialogs and nested dialogs, built on Base UI. | `npx shadcn@latest add https://eased.dev/r/dialog.json` |
| command-palette-demo | registry:example | An issue tracker header whose search trigger (and ⌘K, while the demo is on screen) opens a palette of suggestions, navigation, theme and team commands. | `npx shadcn@latest add https://eased.dev/r/command-palette-demo.json` |
| command-palette | registry:ui | Command palette for React and shadcn: ⌘K opens it at once, commands filter as you type, and Enter runs the first match. | `npx shadcn@latest add https://eased.dev/r/command-palette.json` |
| context-menu-demo | registry:example | A grid of brand assets: right-click or press and hold a file to open, duplicate, tag, star or move it to Trash with undo. | `npx shadcn@latest add https://eased.dev/r/context-menu-demo.json` |
| context-menu | registry:ui | 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. | `npx shadcn@latest add https://eased.dev/r/context-menu.json` |
| dropdown-menu-demo | registry:example | A document's options menu: duplicate, rename, a Move to submenu, copy link, Show completed, Sort by and a danger Delete with undo. | `npx shadcn@latest add https://eased.dev/r/dropdown-menu-demo.json` |
| dropdown-menu | registry:ui | Dropdown menu for React and shadcn: one highlight glides between rows, and a chosen row blinks before the menu closes, as on macOS. | `npx shadcn@latest add https://eased.dev/r/dropdown-menu.json` |
| sheet-demo | registry:example | An orders list whose Filters open a right sheet (a bottom sheet on phones) with a nested Ship to sheet, and each order opens a bottom sheet. | `npx shadcn@latest add https://eased.dev/r/sheet-demo.json` |
| sheet | registry:ui | Sheet and side drawer for React and shadcn on Base UI Drawer: swipe to dismiss, and side sheets become bottom sheets under 640px. | `npx shadcn@latest add https://eased.dev/r/sheet.json` |
| combobox-demo | registry:example | A pull request's sidebar: a repository combobox, reviewers with avatars in grouped teams, and colour-dotted labels as chips. | `npx shadcn@latest add https://eased.dev/r/combobox-demo.json` |
| combobox | registry:ui | Searchable select (combobox) for React and shadcn, with filtering, a clear button and multi-select chips, on Base UI. | `npx shadcn@latest add https://eased.dev/r/combobox.json` |
| select-demo | registry:example | Workspace settings: a grouped data-region select, a timezone list that scrolls, and a fixed-width role select per member. | `npx shadcn@latest add https://eased.dev/r/select-demo.json` |
| select | registry:ui | Select dropdown for React and shadcn that opens with the chosen option over its trigger, like a macOS pop-up button. | `npx shadcn@latest add https://eased.dev/r/select.json` |
| toast-demo | registry:example | A project screen whose Deploy, Move to Done and Retry buttons fire a promise toast, an Undo toast and an error toast into the frame. | `npx shadcn@latest add https://eased.dev/r/toast-demo.json` |
| toast | registry:ui | Toast notifications for React and shadcn: toasts stack behind the newest, fan out on hover and pause their timers, with an Undo action. | `npx shadcn@latest add https://eased.dev/r/toast.json` |
| eased-crypto-core | registry:ui | Shared pieces for Eased crypto blocks: a monochrome token glyph, chain tints as tokens with a ≤10% glow, address truncation, and USD price, token amount and si… | `npx shadcn@latest add https://eased.dev/r/eased-crypto-core.json` |
| eased-copy | registry:ui | The copy → check morph: a clipboard write with a textarea fallback, a useCopy hook that holds the copied state for 1.6s, the copy icon that swaps to a check wi… | `npx shadcn@latest add https://eased.dev/r/eased-copy.json` |
| eased-hold-core | registry:ui | Hold-to-confirm: a time-true linear fill while the pointer, Space or Enter is held, a quick no-overshoot drain when let go early, and a button that reveals its… | `npx shadcn@latest add https://eased.dev/r/eased-hold-core.json` |
| breadcrumb-demo | registry:example | A file browser five folders deep: open folders to grow the trail, click a crumb or the … menu to climb back. | `npx shadcn@latest add https://eased.dev/r/breadcrumb-demo.json` |
| breadcrumb | registry:ui | Animated breadcrumb for React and shadcn that folds the middle crumbs into a menu when the trail runs out of room. | `npx shadcn@latest add https://eased.dev/r/breadcrumb.json` |
| pagination-demo | registry:example | An invoices list whose footer pages through 64 invoices, numbered in a wide tile and compact in a narrow one. | `npx shadcn@latest add https://eased.dev/r/pagination-demo.json` |
| pagination | registry:ui | Animated pagination for React and shadcn: the selected page chip glides on a spring, and the width never changes as you page. | `npx shadcn@latest add https://eased.dev/r/pagination.json` |
| rating-demo | registry:example | A recipe's reviews: an average with a count that rolls when you rate, a large rating with a word that follows the pointer, and recent reviews. | `npx shadcn@latest add https://eased.dev/r/rating-demo.json` |
| rating | registry:ui | Star rating for React and shadcn on Base UI RadioGroup, with hover preview, half stars and a read-only mode for any fraction. | `npx shadcn@latest add https://eased.dev/r/rating.json` |
| carousel-demo | registry:example | Customer stories for a finance product, one metric and quote per slide. | `npx shadcn@latest add https://eased.dev/r/carousel-demo.json` |
| carousel | registry:ui | Carousel for React and shadcn on native scroll snapping, with mouse drag, arrow keys and a dot that stretches between pages. | `npx shadcn@latest add https://eased.dev/r/carousel.json` |
| file-upload-demo | registry:example | Lease documents with a simulated upload: one file is too large, one drops its connection once. | `npx shadcn@latest add https://eased.dev/r/file-upload-demo.json` |
| file-upload | registry:ui | Drag and drop file upload for React and shadcn: the dropzone wakes when files cross the page, with per-file progress and retry. | `npx shadcn@latest add https://eased.dev/r/file-upload.json` |
| tree-demo | registry:example | A Next.js repository with git status markers and the selected path in the footer. | `npx shadcn@latest add https://eased.dev/r/tree-demo.json` |
| tree | registry:ui | React file tree for shadcn: folders spring open, one selection glides between rows, and arrow keys and typeahead follow WAI-ARIA. | `npx shadcn@latest add https://eased.dev/r/tree.json` |
| date-picker-demo | registry:example | Time off: an away range that can't start in the past, and a typed handover date that must fall before it on a weekday. | `npx shadcn@latest add https://eased.dev/r/date-picker-demo.json` |
| date-picker | registry:ui | 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. | `npx shadcn@latest add https://eased.dev/r/date-picker.json` |
| number-field-demo | registry:example | A limit order: shares with split steppers, a USD limit price and a scrubbable percent stop loss, with a rolling cost summary. | `npx shadcn@latest add https://eased.dev/r/number-field-demo.json` |
| number-field | registry:ui | Number input for React and shadcn on Base UI: steppers speed up the longer you hold them, and each step rolls the digits. | `npx shadcn@latest add https://eased.dev/r/number-field.json` |
| otp-field-demo | registry:example | Email verification with a 3-3 code, auto-verify on the last digit, a wrong-code error and a resend countdown. | `npx shadcn@latest add https://eased.dev/r/otp-field-demo.json` |
| otp-field | registry:ui | OTP input for React and shadcn on Base UI: SMS autofill, password managers and a pasted code fill every cell at once. | `npx shadcn@latest add https://eased.dev/r/otp-field.json` |
| eased-commerce-core | registry:ui | Shared pieces for Eased e-commerce blocks: drawn product art, colour swatches, the price line, a rolling quantity stepper, the bag button and money and stock f… | `npx shadcn@latest add https://eased.dev/r/eased-commerce-core.json` |
| variant-picker-demo | registry:example | The Ridgeline Down Jacket in three colourways, one marked down, with thin stock and a sold-out size. | `npx shadcn@latest add https://eased.dev/r/variant-picker-demo.json` |
| variant-picker | registry:ui | Product variant picker for React and shadcn: colour swatches and sizes on Base UI radio groups, with sold-out sizes struck through. | `npx shadcn@latest add https://eased.dev/r/variant-picker.json` |
| eased-saas-core | registry:ui | Shared pieces for Eased SaaS-admin blocks: a rolling delta chip that falls in warning, a usage meter that turns warning at 80%, relative times and compact mone… | `npx shadcn@latest add https://eased.dev/r/eased-saas-core.json` |
| eased-property-core | registry:ui | Shared pieces for Eased real-estate blocks: CRE units (SF, $/SF, terms, cap rates), lease-expiry status and its tints, the vacancy hatch and an expiry legend. | `npx shadcn@latest add https://eased.dev/r/eased-property-core.json` |
| eased-hr-core | registry:ui | Shared pieces for Eased HR and recruiting blocks: the 1–4 interview scale and its labels, four pips that fill to a rating, and the short time-in-stage clock. | `npx shadcn@latest add https://eased.dev/r/eased-hr-core.json` |
| eased-legal-core | registry:ui | Shared pieces for Eased legal blocks: the inline redline, the clause number track, deadline countdown wording, legal date and confidence formats, and the AI ma… | `npx shadcn@latest add https://eased.dev/r/eased-legal-core.json` |
| eased-health-core | registry:ui | Shared pieces for Eased health blocks: where a value sits against its range, a warning flag that pops in and out, and clinic clock times. | `npx shadcn@latest add https://eased.dev/r/eased-health-core.json` |
| area-chart-demo | registry:example | Weekly signups against the previous period, with a headline that follows the crosshair and a range switch that morphs the area. | `npx shadcn@latest add https://eased.dev/r/area-chart-demo.json` |
| area-chart | registry:ui | Area chart for React and shadcn that draws in once, morphs to new data while its scale springs, and has a crosshair tooltip. | `npx shadcn@latest add https://eased.dev/r/area-chart.json` |
| card-demo | registry:example | A workspace overview: a plan card with an action, a plain stat, two project cards that are links, and an activity card that grows. | `npx shadcn@latest add https://eased.dev/r/card-demo.json` |
| card | registry:ui | Card component for React and shadcn with shadcn's parts and slots, plus a CardLink that makes the whole card one clickable link. | `npx shadcn@latest add https://eased.dev/r/card.json` |
| appointment-scheduler-demo | registry:example | Booking a 20-minute follow-up at Willow Health across three clinicians and the next five weekdays. | `npx shadcn@latest add https://eased.dev/r/appointment-scheduler-demo.json` |
| appointment-scheduler | registry:ui | Appointment booking for React and shadcn: pick a provider, day and time, and the chosen slot lifts into the confirmation card. | `npx shadcn@latest add https://eased.dev/r/appointment-scheduler.json` |
| caption-ticker-demo | registry:example | Four onboarding captions on their own clock, each with its own timing, lighting the step they describe. | `npx shadcn@latest add https://eased.dev/r/caption-ticker-demo.json` |
| caption-ticker | registry:ui | An animated caption ticker for React and shadcn, stepping short captions in under a scene one line at a time. | `npx shadcn@latest add https://eased.dev/r/caption-ticker.json` |
| click-ripple-demo | registry:example | A settings panel where every press rings at the point you click, on the canvas and on the buttons, played once on its own first. | `npx shadcn@latest add https://eased.dev/r/click-ripple-demo.json` |
| click-ripple | registry:ui | An animated click ripple for React and shadcn, a ring that spreads from the exact press point. | `npx shadcn@latest add https://eased.dev/r/click-ripple.json` |
| demo-cursor-demo | registry:example | An attachments panel played by Ama's cursor: it picks up a file, drags it into the drop zone, then glides to Attach and presses it. | `npx shadcn@latest add https://eased.dev/r/demo-cursor-demo.json` |
| demo-cursor | registry:ui | An animated demo cursor for React and shadcn, a scripted pointer that glides to real elements and presses them. | `npx shadcn@latest add https://eased.dev/r/demo-cursor.json` |
| demo-scene | registry:example | The Product demo set on one timeline: a cursor presses Deploy, a ripple rings, the label swaps, the build count rolls, a caption steps on and the view pushes i… | `npx shadcn@latest add https://eased.dev/r/demo-scene.json` |
| eased-demo-core | registry:lib | What the Product demo set shares: useDemoTimeline, one drift-free clock of named steps that plays, loops, seeks, pauses off-screen and in hidden tabs, and rest… | `npx shadcn@latest add https://eased.dev/r/eased-demo-core.json` |
| zoom-spotlight-demo | registry:example | Fathom's usage overview pushing in on p95 latency, springing back, then lighting the latest deploy. | `npx shadcn@latest add https://eased.dev/r/zoom-spotlight-demo.json` |
| zoom-spotlight | registry:ui | An animated zoom spotlight for React and shadcn, pushing in on one region of live UI and dimming the rest. | `npx shadcn@latest add https://eased.dev/r/zoom-spotlight.json` |
| agency-clients | registry:block | Client names as wordmarks in a ruled grid, then three numbers that roll up once. | `npx shadcn@latest add https://eased.dev/r/agency-clients.json` |
| agency-contact | registry:block | The question, a line on how the studio replies, and the email set large with a copy button. | `npx shadcn@latest add https://eased.dev/r/agency-contact.json` |
| agency-core | registry:lib | Every word of the agency template and its client projects, plus the palette, tile mark, column, section labels, page heading, entrance, the drawn client sites … | `npx shadcn@latest add https://eased.dev/r/agency-core.json` |
| agency-footer | registry:block | A newsletter sign-up, the studio's links and address, and the legal line with its local time. | `npx shadcn@latest add https://eased.dev/r/agency-footer.json` |
| agency-header | registry:block | One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge. | `npx shadcn@latest add https://eased.dev/r/agency-header.json` |
| agency-intro | registry:block | What the studio is in one serif sentence, the page's heading, with one way into the work. | `npx shadcn@latest add https://eased.dev/r/agency-intro.json` |
| agency-latest | registry:block | News, writing and a role as cards with drawn covers, then the open roles as a ruled list. | `npx shadcn@latest add https://eased.dev/r/agency-latest.json` |
| agency-reel | registry:block | An ink-blue panel with a browser and a rail of projects: the address bar types each client's domain and the site loads line by line. | `npx shadcn@latest add https://eased.dev/r/agency-reel.json` |
| agency-services | registry:block | The studio's claim beside its four services as an accordion, each with what it delivers. | `npx shadcn@latest add https://eased.dev/r/agency-services.json` |
| agency-work-page | registry:block | Every project in one ruled grid: a small cover, the client, the project, its disciplines and its year. | `npx shadcn@latest add https://eased.dev/r/agency-work-page.json` |
| agency-work | registry:block | A grid of project covers with a filter by discipline; the grid reflows on a spring. | `npx shadcn@latest add https://eased.dev/r/agency-work.json` |
| agency | registry:block | A site for an independent design studio: its name across the page, a reel of client sites, the work, services, clients, news and contact, plus case studies, se… | `npx shadcn@latest add https://eased.dev/r/agency.json` |
| agency-careers | registry:block | The open roles as one ruled grid with what everyone gets and how the studio hires, and a job post per role with its facts and an apply link. | `npx shadcn@latest add https://eased.dev/r/agency-careers.json` |
| agency-case-study | registry:block | A project's story on its own page: the client's site drawn as wide as the page, the challenge beside the facts, what the studio made, three outcomes, the credi… | `npx shadcn@latest add https://eased.dev/r/agency-case-study.json` |
| agency-enquiry | registry:block | The email and the studio's address beside a project enquiry form with budget and timeline, checked on submit, that gives way to a sent state. | `npx shadcn@latest add https://eased.dev/r/agency-enquiry.json` |
| agency-journal | registry:block | The journal index as a ruled list with drawn covers, and a post page with its author, a wide cover, the text in one reading column and more posts. | `npx shadcn@latest add https://eased.dev/r/agency-journal.json` |
| agency-legal | registry:block | Privacy and imprint as a ruled list of parts, under a note that the text is a sample to replace. | `npx shadcn@latest add https://eased.dev/r/agency-legal.json` |
| agency-not-found | registry:block | The template's 404: the code beside the studio's mark with its tile missing, a line and the pages people usually want. | `npx shadcn@latest add https://eased.dev/r/agency-not-found.json` |
| agency-services-page | registry:block | The services index as one ruled list, and a page per service with a typical project's facts, what it delivers, how it runs week by week and recent work. | `npx shadcn@latest add https://eased.dev/r/agency-services-page.json` |
| agency-studio | registry:block | What the studio is, its people with initials avatars and how a project runs, with a line to the open roles. | `npx shadcn@latest add https://eased.dev/r/agency-studio.json` |
| eased-onboarding-core | registry:lib | The headless step engine under Eased onboarding flows: useSteps holds the open step, the direction of the last move, the data, per-step validity, branching, sk… | `npx shadcn@latest add https://eased.dev/r/eased-onboarding-core.json` |

## For AI agents

```text
You are adding components from @eased to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/eased.md) for the component list.
2. Fetch the machine-readable index: https://eased.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: eased).
```