A common form component for choosing a predefined value in a dropdown menu.
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.
Usage
Import the primitive from Animate UI instead of Base UI. Everything else stays the same.
import { Select } from '@animate-ui/react/primitives/base-ui/select';
const fonts = [
{ label: 'Inter', value: 'inter' },
{ label: 'Geist', value: 'geist' },
];
export function FontPicker() {
return (
<Select.Root items={fonts} defaultValue="geist">
<Select.Trigger aria-label="Font">
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<Select.Positioner alignItemWithTrigger={false} sideOffset={4}>
<Select.Popup>
<Select.List>
{fonts.map((font) => (
<Select.Item key={font.value} value={font.value}>
<Select.ItemText>{font.label}</Select.ItemText>
<Select.ItemIndicator>✓</Select.ItemIndicator>
</Select.Item>
))}
</Select.List>
</Select.Popup>
</Select.Positioner>
</Select.Portal>
</Select.Root>
);
}Using the @base-ui/react umbrella import instead? The barrel mirrors it: import { Select } from '@animate-ui/react/primitives/base-ui'.
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):
<Select.Item key={font.value} value={font.value}>
<Select.ItemText>{font.label}</Select.ItemText>
<Select.ItemIndicator animation="pop">✓</Select.ItemIndicator>
</Select.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 Select has no Animate UI v1 counterpart: it moves like v1's Base UI Menu.
- Popup fades and scales in from 0.9, from the trigger (
--transform-origin), in 220ms ({ duration: 0.22, ease: [0.215, 0.61, 0.355, 1] }, a soft ease-out), and closes the same way; then Base UI unmounts it (or hides it, when it keeps the items mounted for typeahead on the closed trigger). - With
alignItemWithTrigger(Base UI's default), the list is laid over the trigger with the selected item on the value, like a native select: it only fades. - 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. - 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, the list stays open: 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. - Reopening while the list is closing picks up from where it is.
- Base UI's Select has no
keepMounted: Animate UI passes anactionsRefto the Root and unmounts the popup when its exit is over. Your ownactionsRefstill works, andonOpenChangeCompletefires after the entrance and after the exit. - Open from the start (
defaultOpen), the list plays its entrance on page load. - Under reduced motion, nothing scales or glides: the popup and the checks only fade, 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 Select. Animate UI adds the animation props below.
Root, Trigger, Value, Icon, Portal, Backdrop, Positioner, List, ItemText, Group, GroupLabel, Separator, ScrollUpArrow, ScrollDownArrow, Arrow, Label
Base UI props only. They are not animated.
Item
Base UI props only. It takes part in the highlight; it needs nothing more.
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 |
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 |