Base UI vs Radix
Keyframery animates shadcn/ui the same way on Base UI and Radix. What differs underneath: open-state attributes, exit handling, drawers and toasts.
shadcn/ui ships each component on two bases: Base UI and Radix. Both name their parts with the same data-slot attributes, such as dialog-content and tabs-trigger. Keyframery finds parts by those names, so the same <Cuts /> works on either base. Every cut is tested on both, in Chromium, WebKit and Firefox.
What differs
| Base UI | Radix | |
|---|---|---|
| Open state on parts | data-open / data-closed | data-state="open" / "closed" |
| Exit animations | the popup stays mounted until its exit ends | Presence keeps it mounted until its exit ends |
| Drawer | drawer-popup, Base UI's own drawer | drawer-content, built on Vaul |
| Toast | Base UI Toast, plus sonner | sonner |
Keyframery reads both forms of the open state, waits for the exit like the library does, and handles both drawers and both toasts.
What you write is the same
Menus, variables and attributes are identical on both bases. A project can even switch base later without touching its Keyframery setup.
Reduced motion and accessibility
How Keyframery respects prefers-reduced-motion: every cut becomes a short fade, and motion never gets in the way of focus or screen readers.
Compatibility
How each of shadcn/ui's 63 components works with Keyframery, and the shadcn CLI, React, Next.js, Tailwind and browser versions it is tested with.