Animated shadcn components
These are the shadcn primitives you already reach for, such as Accordion, Tabs, Tooltip and Date Picker, with open, close, focus and selection animated for you.
They work the shadcn way: the CLI copies each one into your project as source, so you can read and change every line.
70 of the 109 components in Eased UI are free under MIT, every one on this page among them.
11 components, running
Disclosures whose height springs open with no overshoot, content fading in as the height lands and the chevron turning on the same spring.
npx shadcn add https://eased.dev/r/accordion.jsonTabs with a gliding indicator (underline or pill) and panels that cross-fade 6px in the direction of travel while their container's height springs.
npx shadcn add https://eased.dev/r/tabs.jsonA short label that waits 400ms for the first trigger, then follows the pointer instantly across its neighbours.
npx shadcn add https://eased.dev/r/tooltip.jsonA date field with a calendar popover on Base UI and calendar-core.
npx shadcn add https://eased.dev/r/date-picker.jsonA one-time-code input on Base UI's OTPField: autofill and paste fill every cell, the caret blinks in the empty cell, characters pop in, a wrong code shakes once and an accepted one ripples green.
npx shadcn add https://eased.dev/r/otp-field.jsonA number input on Base UI's NumberField with steppers that speed up while held, digits that roll on every step, Intl formatting with a true minus, min, max and step, and an optional scrub label.
npx shadcn add https://eased.dev/r/number-field.jsonNumbered pages whose selected chip glides on a spring, with ellipses in a fixed number of slots so the width never changes.
npx shadcn add https://eased.dev/r/pagination.jsonA trail from the root to the current page that folds its middle crumbs into a menu when it runs out of room, measured rather than guessed.
npx shadcn add https://eased.dev/r/breadcrumb.jsonA status or count chip in six tones: counts roll their digits, and a count-only badge pops in above zero and leaves when cleared.
npx shadcn add https://eased.dev/r/badge.jsonAvatar and AvatarGroup on Base UI Avatar: images fade in from a 4px blur once loaded, so a quick image never flashes the initials.
npx shadcn add https://eased.dev/r/avatar.jsonA dropzone that wakes when files cross the page and lifts as they reach it.
npx shadcn add https://eased.dev/r/file-upload.json
Start here if you already use shadcn
The components directory lists everything, including charts, AI pieces and Pro blocks. This page is the short list of everyday controls to swap into an existing shadcn app first.
How to install
1.Add a component by its registry URL:
npx shadcn add https://eased.dev/r/accordion.json2.Eased UI is listed in the shadcn registry index as @eased, so the short form works without a registries entry in components.json:
npx shadcn add @eased/accordion3.The component lands in components/eased/, beside your components/ui. The first one also merges the Eased tokens and motion helpers into your global CSS. Installation docs
Questions
Do these replace my shadcn/ui components?
No, they sit beside them. The CLI writes to components/eased/, not components/ui/, so you can move one import at a time and leave the rest alone.
What do they install?
Of the 11 on this page, 7 use @base-ui/react for behaviour and keyboard support, and 7 use motion for animation. The CLI installs whatever a component needs, so there is nothing to add by hand.
Can I use @eased instead of the full URL?
Yes. Eased UI is in the shadcn registry index under @eased, so npx shadcn add @eased/<name> resolves with no setup.
Will they change my shadcn theme?
No. Every Eased variable starts with --eased-, and its utility names don't exist in shadcn/ui or Tailwind's default theme, so text-base, rounded-lg and bg-accent keep your values. Dark mode follows the .dark class shadcn already uses.