An input combined with a list of predefined items to select.
Installation
Install the packages
Add the shadcn/ui component
Animate it
The CLI finds your shadcn/ui components through components.json, swaps their primitive imports for Animate UI's and removes the CSS animation classes Motion replaces.
shadcn/ui's Combobox uses Base UI's Combobox for every base, Radix UI included: animate-ui animate combobox swaps its @base-ui/react import in both.
Usage
Import the primitive from Animate UI instead of Base UI. Everything else stays the same.
import { Combobox } from '@animate-ui/react/primitives/base-ui/combobox';
const frameworks = ['Next.js', 'React Router', 'Astro', 'SvelteKit'];
export function FrameworkPicker() {
return (
<Combobox.Root items={frameworks}>
<Combobox.Input
aria-label="Framework"
placeholder="Search a framework…"
/>
<Combobox.Portal>
<Combobox.Positioner sideOffset={6}>
<Combobox.Popup>
<Combobox.Empty>No framework found.</Combobox.Empty>
<Combobox.List>
{(item: string) => (
<Combobox.Item key={item} value={item}>
{item}
</Combobox.Item>
)}
</Combobox.List>
</Combobox.Popup>
</Combobox.Positioner>
</Combobox.Portal>
</Combobox.Root>
);
}import { Combobox } from '@base-ui/react' (shadcn/ui's import) becomes import { Combobox } from '@animate-ui/react/primitives/base-ui': the barrel mirrors the @base-ui/react umbrella.
Multiple selection
Check animation
The chosen item's check draws itself while the previous one erases itself. With animation="pop" on every item's ItemIndicator, the check glides from the previous item to the chosen one instead (a first choice pops it in from half its size):
<Combobox.Item key={item} value={item}>
{item}
<Combobox.ItemIndicator animation="pop">✓</Combobox.ItemIndicator>
</Combobox.Item>With a multiple selection, each check pops in and shrinks back out on its own.
The same demo with checkAnimation="pop" (its Controls switch it back to draw):
To pop every check of your app at once (checkboxes, menus, selects, comboboxes), set checkAnimation="pop" on an AnimateUIProvider instead.
Animation
Base UI's Combobox has no Animate UI v1 counterpart: it moves like v1's Base UI Menu.
- Popup fades and scales in from 0.9, from the input (
--transform-origin), in 220ms ({ duration: 0.22, ease: [0.215, 0.61, 0.355, 1] }, a soft ease-out), and closes the same way before it unmounts. Reopening while it closes picks up from where it is. - The highlight: one surface glides behind the highlighted item on a spring (stiffness 500, damping 40), following the pointer and the arrow keys alike, like v1's menu highlight. Moving to another item, it carries on from where it is, at its speed: however fast the pointer or the arrow keys go, there's one highlight on screen. It only fades in (200ms, on CSS's
ease) when it appears from nothing, and its color changes the same way when the item's highlighted background differs from the previous one's. It glides on the compositor (a Web Animation oftransform), so a busy main thread, a heavy render for instance, doesn't stall it. When the pointer leaves the list, it stays on the last item. It wears the item's own highlighted background (focus:bg-accent,data-highlighted:bg-accent…), read from your styles: the item's background is cleared while it's highlighted; its text colors stay. - Filtering while typing is instant: items appear and disappear on the next frame, with no per-item or height animation.
- Base UI resets the query and syncs the input when the popup unmounts, so the list doesn't change while it fades out.
- Chip: a chip added to the selection pops in from half its size with a fade, on the popovers' spring (stiffness 400, damping 29). A removed one (with its remove button or Backspace) leaves the selection at once, and a copy of it shrinks out where it was, out of the flow, in 0.15s. Either way, the chips after it and the input glide to make room or close the gap, on a quick spring without overshoot (stiffness 500, damping 40), instead of jumping, and when the row wraps onto a line more (or one less), the Chips grow (or shrink) to it on the same spring. A placeholder showing up as the input glides back (the last chip removed) fades in once the input is there, from a light blur (2px, 0.3s on a strong ease-out), instead of riding along. Chips already selected on mount don't animate. The copy is only seen: hidden from assistive tech, inert, without your ids, and without the chip's
data-slot, so it doesn't count as a chip (shadcn/ui's Chips narrow their padding while they hold one). - ItemIndicator (kept mounted on every item, so a check can hide itself): with a single value, the chosen item's check draws itself like a Checkbox's check (its stroke and opacity in 0.3s on Motion's easeOut, at once) while the previous one erases itself, and the list holds still for 250ms before it closes, so the change is seen nearly done before the list fades out. With
animation="pop"(orcheckAnimation="pop"on anAnimateUIProvider), the check glides there instead, on the highlight's spring (stiffness 500, damping 40), and the list holds for 150ms, and a first choice pops it in from half its size out of a 2px blur (a spring, stiffness 500, damping 24). The demo's Controls switch between the two. Choosing the item already chosen, and closing any other way (Escape, a click outside), don't wait. Withmultiple, a selected item's check draws itself, and erases itself when it's deselected; withpop, it pops in from half its size and shrinks back out in 0.15s; a check written as text ("✓") fades (or pops). Only a change of selection animates the checks: opening the list shows them at rest. - Animate UI passes an
actionsRefto the Root and unmounts the popup when its exit is over. Your ownactionsRefstill works,onOpenChangeCompletefires after the entrance and after the exit, andkeepMountedon the Portal keeps the closed popup mounted and hidden. - Open from the start (
defaultOpen), the popup plays its entrance on page load. - Under reduced motion, nothing scales or glides: the popup, chips and checks only fade, a placeholder showing up fades in out of its blur (the chips after an added or removed one move at once), and the list doesn't hold; the highlight jumps from item to item and only fades in when it appears.
API Reference
Every part takes exactly the props of Base UI's Combobox. Animate UI adds the animation props below.
Root, Input, InputGroup, Trigger, Clear, Value, Icon, Portal, Backdrop, Positioner, List, Row, Collection, Group, GroupLabel, Empty, Status, Separator, Arrow, Label, ChipRemove
Base UI props only. They are not animated.
Item
Base UI props only. It takes part in the highlight; it needs nothing more.
Chips
Base UI props only. It drives the reflow: its chips and the input glide when a chip comes or goes, and it grows or shrinks when the row wraps onto a line more or one less, on a quick spring without overshoot (stiffness 500, damping 40).
Popup
Base UI props, except render (Animate UI renders the popup as a motion.div), plus:
| Prop | Type | Default |
|---|---|---|
transition? | Transition | { duration: 0.22, ease: [0.215, 0.61, 0.355, 1] } |
exitTransition? | Transition | transition |
Chip
Base UI props, plus:
| Prop | Type | Default |
|---|---|---|
transition? | Transition | { type: 'spring', stiffness: 400, damping: 29 } |
exitTransition? | Transition | { duration: 0.15, ease: [0.23, 1, 0.32, 1] } |
ItemIndicator
Base UI props, plus:
| Prop | Type | Default |
|---|---|---|
animation? | 'draw' | 'pop' | the closest AnimateUIProvider's checkAnimation, else 'draw' |
transition? | Transition | draw: 0.3s on Motion's easeOut both ways (a Checkbox's, without its delay); pop: a spring (stiffness 500, damping 24) in, 0.15s out, and the highlight's spring (stiffness 500, damping 40) for the glide |