Animations
Component animation tokens and keyframes — accordion, alert-dialog, collapsible, dialog — and where they are imported.
Component enter/exit and overlay animations are defined as CSS custom properties and keyframes. The app imports the animation styles in @layer components and components reference them via data-[state=open]:animate-* (or equivalent state).
Where animations live
In the www app, these four files are imported inside @layer components in apps/www/app/globals.css (lines 278–281):
../../../packages/registry/registry/default/styles/overlay.css(shared scrim)../styles/accordion.css../styles/alert-dialog.css../styles/collapsible.css../styles/dialog.css
Theme blocks use a bare @theme. Keyframes are defined in @layer components.
Accordion
File: apps/www/styles/accordion.css
| Token | Keyframes | Duration | Easing |
|---|---|---|---|
--animate-accordion-open | slideDownAccordion | 250ms | ease-in-out |
--animate-accordion-closed | slideUpAccordion | 250ms | ease-in-out |
- slideDownAccordion:
height: 0→height: var(--radix-accordion-content-height) - slideUpAccordion:
height: var(--radix-accordion-content-height)→height: 0
Uses Radix's content-height variable for smooth height animation (allowed for collapsible/accordion in the animation foundation).
Alert dialog and Dialog
Files: apps/www/styles/alert-dialog.css, apps/www/styles/dialog.css
Modal scrims do not use those overlay utilities. AlertDialog, Dialog, Sheet (including the mobile Sidebar sheet), Drawer, Command, and ComboboxBackdrop share .aura-overlay from packages/registry/registry/default/styles/overlay.css.
That class sets background-color: var(--aura-overlay) and a 4px backdrop-filter blur. --aura-overlay is rgb(16 11 33 / 0.08) (dark gray-1, #100B21, at 8%) in both light and dark. It is not var(--gray-1), because gray-1 is near-white in light mode. The enter fade is opacity 0 → 1 in 150ms with cubic-bezier(0.16, 1, 0.3, 1). @media (prefers-reduced-motion: reduce) sets animation: none and transition: none.
Content tokens stay on the dialog stylesheets:
| Token | Keyframes | Duration | Easing |
|---|---|---|---|
--animate-content-show | contentShow | 150ms | cubic-bezier(0.16, 1, 0.3, 1) |
- contentShow:
opacity: 0andtransform: scale(0.96)→opacity: 1andtransform: scale(1)
DialogContent and AlertDialogContent use data-[state=open]:animate-content-show. Each overlay keeps its own z-50.
Collapsible
File: apps/www/styles/collapsible.css
| Token | Keyframes | Duration | Easing |
|---|---|---|---|
--animate-collapsible-down | slideDownCollapsible | 500ms | ease |
--animate-collapsible-up | slideUpCollapsible | 500ms | ease |
- slideDownCollapsible:
height: 0→height: var(--radix-collapsible-content-height) - slideUpCollapsible:
height: var(--radix-collapsible-content-height)→height: 0
Usage in components
Apply the animation tokens with Tailwind (or equivalent) using the state that Radix exposes, e.g.:
- Scrim: class
aura-overlay(fade is insideoverlay.css, not a per-component utility) - Content:
data-[state=open]:animate-content-show - Accordion/Collapsible content: use the corresponding open/closed or down/up tokens on the content wrapper that has the height transition.
Animations follow the Aura animation foundation: compositor-friendly properties (transform, opacity; height only for collapsible/accordion), and you should respect prefers-reduced-motion where applicable (e.g. reduced or no animation for users who request it).