Displays a list of options for the user to pick from, triggered by a button.
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 Radix UI. Everything else stays the same.
import { Select } from '@animate-ui/react/primitives/radix-ui';
export function FontPicker() {
return (
<Select.Root defaultValue="geist">
<Select.Trigger aria-label="Font">
<Select.Value placeholder="Choose a font" />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<Select.Content position="popper" sideOffset={4}>
<Select.Viewport>
<Select.Item value="inter">
<Select.ItemText>Inter</Select.ItemText>
<Select.ItemIndicator>✓</Select.ItemIndicator>
</Select.Item>
<Select.Item value="geist">
<Select.ItemText>Geist</Select.ItemText>
<Select.ItemIndicator>✓</Select.ItemIndicator>
</Select.Item>
</Select.Viewport>
</Select.Content>
</Select.Portal>
</Select.Root>
);
}Coming from the @radix-ui/react-select package? Use the subpath: import * as SelectPrimitive from '@animate-ui/react/primitives/radix-ui/select'.
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 value="geist">
<Select.ItemText>Geist</Select.ItemText>
<Select.ItemIndicator animation="pop">✓</Select.ItemIndicator>
</Select.Item>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
Radix's Select has no Animate UI v1 counterpart: it moves like v1's Dropdown Menu.
- Content with
position="popper"fades and scales in from 0.9, from the trigger (--radix-select-content-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. - With
position="item-aligned"(Radix's default), the list is laid over the trigger with the selected item lined up on the value, so it only fades: there is no side to grow from, and a scale would skew Radix's measurement. - 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: 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. Only a change of selection animates the checks: opening the list shows them at rest. Radix renders the indicator for the chosen item only: in the animated list, Animate UI renders it on every item (the same<span aria-hidden>), so a check can hide itself. - Reopening while the list is closing picks up from where it is. A closing list is
inert, so it can't be clicked through. - After the exit, the closed list goes back to Radix, which keeps the items mounted off-screen: the trigger keeps its label, typeahead on the closed trigger and native form submission still work.
forceMount(onContentorPortal) doesn't keep the closed list mounted: it plays its exit, then leaves, so a closed select never blocks clicks on the page.- Open from the start (
defaultOpen), the list plays its entrance on page load. - Under reduced motion, nothing scales or glides: the list 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 Radix UI's Select. Animate UI adds the animation props below.
Root, Trigger, Value, Icon, Portal, Viewport, ItemText, Group, Label, Separator, ScrollUpButton, ScrollDownButton, Arrow
Radix UI props only. They are not animated.
Item
Radix UI props only. It takes part in the highlight; it needs nothing more.
Content
Radix UI props, plus:
| Prop | Type | Default |
|---|---|---|
transition? | Transition | { duration: 0.22, ease: [0.215, 0.61, 0.355, 1] } |
exitTransition? | Transition | transition |
ItemIndicator
Radix 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 |