What's automatic

With <Cuts /> in your root layout, Keyframery finds shadcn's own parts on the page and animates them. You don't import anything, and nothing in components/ui changes.

Dialogs, alert dialogs and the command menuCopy Anchor Link

A dialog grows out of the button that opened it, and closes back into it. Alert dialogs and the command menu do the same.

Reference: Dialog, Alert dialog, Command.

Sheets and drawersCopy Anchor Link

A sheet slides in from its edge while the page steps back behind it. A drawer keeps its own swipe, and the page steps back the same way.

Reference: Sheet, Drawer.

TabsCopy Anchor Link

The tab indicator moves first and the new panel follows a beat later, while the height eases to fit.

Reference: Tabs.

ToastsCopy Anchor Link

A toast flies out of the button you pressed, so you can see which action it's about. It works with Sonner and Base UI toasts, and you call toast() as usual.

Reference: Toast and Sonner.

Menus, popovers and the restCopy Anchor Link

Popover, dropdown menu, context menu, menubar, select, combobox, hover card, tooltip, navigation menu, accordion and collapsible already open from their trigger. Keyframery gives them the same speed and easing as everything else.

Reference: Tuned components.

What stays stillCopy Anchor Link

Buttons, inputs, checkboxes and other controls that don't change the picture stay as they are. Motion there would only be noise.

To animate lists, numbers, loading states or a card that opens into a page, use the four small components under Animate your app in the sidebar.