Docs
Animated Card
Composable card with animated gradient rim, frosted surface, and optional header, content, and footer slots
Header, content, and footer slots share the same gradient rim and frosted surface as the polished search field. Footer actions use AnimatedCardButton so labels stay high-contrast in dark mode.
Use AnimatedCardContent for the main body between the header and footer. Tab through the header action or footer buttons to see focus-within on the rim.
Title and description only — no content slot or footer. Same rim and hover behavior.
Pro workflow
Open in v0 and the Pro CLI install shortcut are part of Cult UI Pro. Upgrade to use them in your projects.
Get Propnpm add @base-ui/react motion
Source code is available for Pro members.
Upgrade to copy and use these components in your projects.
View pricing