# Eased > Eased is a library of motion-first React components and page blocks, built on React 19, Tailwind CSS v4 and Motion. Components are installed with the shadcn CLI, so the source lives in your project. Early access is opening to the waitlist at https://eased.dev. ## 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 are coming with early access ## 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 ## Free components (MIT, 25) - [Undo Pill](https://eased.dev/components/undo-pill): A pill that rises after a destructive action with a draining countdown ring. Undo (or ⌘Z) reverts it; only expiry commits it. Hover or focus pauses the countdown. - Install: `npx shadcn add https://eased.dev/r/undo-pill.json` - JSON: https://eased.dev/r/undo-pill.json - Demo: `npx shadcn add https://eased.dev/r/undo-pill-demo.json` - [Concentric Frame](https://eased.dev/components/concentric-frame): A layout primitive that exposes outer, padding and inner radius as CSS variables so nested corners stay concentric. - Install: `npx shadcn add https://eased.dev/r/concentric-frame.json` - JSON: https://eased.dev/r/concentric-frame.json - Demo: `npx shadcn add https://eased.dev/r/concentric-frame-demo.json` - [Accordion](https://eased.dev/components/accordion): Disclosures whose height springs open with no overshoot, content fading in as the height lands and the chevron turning on the same spring. Base UI Accordion behaviour. - Install: `npx shadcn add https://eased.dev/r/accordion.json` - JSON: https://eased.dev/r/accordion.json - Demo: `npx shadcn add https://eased.dev/r/accordion-demo.json` - [Avatar](https://eased.dev/components/avatar): Avatar and AvatarGroup on Base UI Avatar: images fade in from a 4px blur once loaded so initials never flash; overlapping stacks with a cut-out ring spread apart on hover; the overflow count rolls. - Install: `npx shadcn add https://eased.dev/r/avatar.json` - JSON: https://eased.dev/r/avatar.json - Demo: `npx shadcn add https://eased.dev/r/avatar-demo.json` - [Badge](https://eased.dev/components/badge): A status or count chip. Counts roll their digits; a count-only badge pops in above zero and leaves when cleared; a live dot breathes slowly and stops under reduced motion. - Install: `npx shadcn add https://eased.dev/r/badge.json` - JSON: https://eased.dev/r/badge.json - Demo: `npx shadcn add https://eased.dev/r/badge-demo.json` - [Button](https://eased.dev/components/button): A Base UI button whose press scale depends on its width, whose label swaps with y + blur while the width springs, and whose loading spinner overlays the label so the width never changes. Popover triggers never scale. - Install: `npx shadcn add https://eased.dev/r/button.json` - JSON: https://eased.dev/r/button.json - Demo: `npx shadcn add https://eased.dev/r/button-demo.json` - [Field](https://eased.dev/components/field): Label, control and one message line on Base UI Field. The description and the error share the line and swap with y + blur; inside Base UI's Form, submitting focuses the first invalid field. - Install: `npx shadcn add https://eased.dev/r/field.json` - JSON: https://eased.dev/r/field.json - Demo: `npx shadcn add https://eased.dev/r/field-demo.json` - [Hover Card](https://eased.dev/components/hover-card): A link preview that opens after a 300ms dwell and stays open while the pointer travels into it. Pair it with Eased Avatar, whose image fades in once loaded so initials never flash. - Install: `npx shadcn add https://eased.dev/r/hover-card.json` - JSON: https://eased.dev/r/hover-card.json - Demo: `npx shadcn add https://eased.dev/r/hover-card-demo.json` - [Input](https://eased.dev/components/input): A Base UI text input whose focus is the border alone. An error shakes it once, 6px, then the field's message opens with a height spring. Leading and trailing addons. - Install: `npx shadcn add https://eased.dev/r/input.json` - JSON: https://eased.dev/r/input.json - Demo: `npx shadcn add https://eased.dev/r/input-demo.json` - [Kbd](https://eased.dev/components/kbd): A keycap that presses down when the real key does: the face drops 1px onto its base and springs back on release. Glyphs are announced by name; useKeysHeld lights up whatever a chord belongs to. - Install: `npx shadcn add https://eased.dev/r/kbd.json` - JSON: https://eased.dev/r/kbd.json - Demo: `npx shadcn add https://eased.dev/r/kbd-demo.json` - [Number Roll](https://eased.dev/components/number-roll): Tabular digits that roll in the direction of change: a 9 → 0 carry rolls forward, a value that changes mid-roll redirects, new places fade in while the rest slide over. Intl formatting, locale-aware separators. - Install: `npx shadcn add https://eased.dev/r/number-roll.json` - JSON: https://eased.dev/r/number-roll.json - Demo: `npx shadcn add https://eased.dev/r/number-roll-demo.json` - [Popover](https://eased.dev/components/popover): A panel that opens from its trigger's transform-origin with a 5px directional offset, closes at half the distance in 150ms, and reverses mid-flight. Its trigger presses by colour, never by scale. - Install: `npx shadcn add https://eased.dev/r/popover.json` - JSON: https://eased.dev/r/popover.json - Demo: `npx shadcn add https://eased.dev/r/popover-demo.json` - [Progress](https://eased.dev/components/progress): A progress bar on Base UI Progress: the bar rides a spring and its value rolls; an unknown length sweeps with an accelerate–decelerate curve and hands over to the bar when a value arrives. - Install: `npx shadcn add https://eased.dev/r/progress.json` - JSON: https://eased.dev/r/progress.json - Demo: `npx shadcn add https://eased.dev/r/progress-demo.json` - [Progressive Blur](https://eased.dev/components/progressive-blur): A blur that ramps from 0 to 20px over 80px toward an edge, from stacked masked backdrop layers, for headers, bottom bars and composers. Optionally scroll-linked so it appears only once content is underneath. - Install: `npx shadcn add https://eased.dev/r/progressive-blur.json` - JSON: https://eased.dev/r/progressive-blur.json - Demo: `npx shadcn add https://eased.dev/r/progressive-blur-demo.json` - [Radio Group](https://eased.dev/components/radio-group): Radios whose dot scales out from the centre on a snappy spring, and radio cards whose selected border travels between cards. Base UI RadioGroup behaviour. - Install: `npx shadcn add https://eased.dev/r/radio-group.json` - JSON: https://eased.dev/r/radio-group.json - Demo: `npx shadcn add https://eased.dev/r/radio-group-demo.json` - [Scroll Area](https://eased.dev/components/scroll-area): A native scroller with a thin themed overlay scrollbar that thickens under the pointer, and edge fades that appear only when there is more to scroll. Base UI Scroll Area underneath. - Install: `npx shadcn add https://eased.dev/r/scroll-area.json` - JSON: https://eased.dev/r/scroll-area.json - Demo: `npx shadcn add https://eased.dev/r/scroll-area-demo.json` - [Search Field](https://eased.dev/components/search-field): A search input whose clear button pops in once there is text, whose ⌘K hint fades out on focus, and whose loading spinner sits in the icon slot so nothing shifts. Escape clears. - Install: `npx shadcn add https://eased.dev/r/search-field.json` - JSON: https://eased.dev/r/search-field.json - Demo: `npx shadcn add https://eased.dev/r/search-field-demo.json` - [Segmented](https://eased.dev/components/segmented): A single-choice segmented control whose thumb glides to the selection on a spring. Base UI RadioGroup behaviour, concentric thumb, labels that never change weight. - Install: `npx shadcn add https://eased.dev/r/segmented.json` - JSON: https://eased.dev/r/segmented.json - Demo: `npx shadcn add https://eased.dev/r/segmented-demo.json` - [Skeleton](https://eased.dev/components/skeleton): Loading placeholders with one page-wide shimmer: every skeleton shares a viewport-space highlight and one phase, so a single band sweeps across all of them. Wrap the real content and it hands off in place, fading in from a soft blur. - Install: `npx shadcn add https://eased.dev/r/skeleton.json` - JSON: https://eased.dev/r/skeleton.json - Demo: `npx shadcn add https://eased.dev/r/skeleton-demo.json` - [Spinner](https://eased.dev/components/spinner): A quarter arc turning on a faint ring, the eased.dev status-badge mark. Spins on the compositor, pauses off-screen, freezes under reduced motion, announces itself unless visible text already does. - Install: `npx shadcn add https://eased.dev/r/spinner.json` - JSON: https://eased.dev/r/spinner.json - Demo: `npx shadcn add https://eased.dev/r/spinner-demo.json` - [Tabs](https://eased.dev/components/tabs): Tabs with a gliding indicator (underline or pill) and panels that cross-fade 6px in the direction of travel while their container's height springs. Base UI Tabs behaviour. - Install: `npx shadcn add https://eased.dev/r/tabs.json` - JSON: https://eased.dev/r/tabs.json - Demo: `npx shadcn add https://eased.dev/r/tabs-demo.json` - [Text Swap](https://eased.dev/components/text-swap): Change a label, status or short value with y + blur, and spring the width to fit, so neighbours glide instead of jumping. Direction-aware for counts and steps. - Install: `npx shadcn add https://eased.dev/r/text-swap.json` - JSON: https://eased.dev/r/text-swap.json - Demo: `npx shadcn add https://eased.dev/r/text-swap-demo.json` - [Textarea](https://eased.dev/components/textarea): A textarea that grows with its text on a smooth height spring instead of jumping a line at a time. The character counter rolls its digits and turns warning-coloured at 90%. - Install: `npx shadcn add https://eased.dev/r/textarea.json` - JSON: https://eased.dev/r/textarea.json - Demo: `npx shadcn add https://eased.dev/r/textarea-demo.json` - [Toggle Group](https://eased.dev/components/toggle-group): Toggle buttons sharing one highlight: it travels between items in single mode, and pressed neighbours fuse into one shape in multiple mode. Base UI ToggleGroup behaviour. - Install: `npx shadcn add https://eased.dev/r/toggle-group.json` - JSON: https://eased.dev/r/toggle-group.json - Demo: `npx shadcn add https://eased.dev/r/toggle-group-demo.json` - [Tooltip](https://eased.dev/components/tooltip): A short label that waits 400ms for the first trigger, then follows the pointer instantly across its neighbours. Enters 3px toward its trigger, shows an optional shortcut, never appears on touch. - Install: `npx shadcn add https://eased.dev/r/tooltip.json` - JSON: https://eased.dev/r/tooltip.json - Demo: `npx shadcn add https://eased.dev/r/tooltip-demo.json` ## Pro components (5; waitlist, not in the public registry yet) - [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. - [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. - [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. - [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. - [Squircle](https://eased.dev/components/squircle): Superellipse corners: CSS corner-shape: superellipse(K) where supported, an identical measured clip-path elsewhere, with a hairline ring that follows the shape. ## Pricing - Free: a growing set of MIT-licensed components - Pro: one-time lifetime payment for every current and future component and block; waitlist members get early-bird pricing ## Links - [Home and waitlist](https://eased.dev) - [Components](https://eased.dev/components) - [Pricing](https://eased.dev/#pricing) - [X](https://x.com/easedui)