A shadcn/ui registry of opinionated React components, from WebGL shaders and animated backgrounds to footers, 404 pages and a gooey colour picker, installed by CLI so you own the code.
components
23rd.devAnimate UI
animate-ui.com
Animate UI replaces shadcn/ui primitives with animated versions built on Radix UI, Base UI and React Aria, driven by Motion.
What is Animate UI?
Animate UI animates the primitives underneath your components rather than the components themselves. A shadcn/ui Accordion keeps its structure, styles and API; only the import changes to the Animate UI version, and a CLI command (npx @animate-ui/cli@latest animate all) rewrites imports for every installed component.
The motion is deliberately restrained: springs and short tweens on a strong ease-out, exits quicker than entrances, transform and opacity rather than layout, interruptible animations, nothing on keyboard navigation, and reduced motion respected without setup. Each primitive keeps the accessibility of the library it wraps, and an agent skill is available for Claude Code, Cursor and Codex.
Best for
- Teams already on shadcn/ui that want motion without rewriting components
- React developers animating Radix UI, Base UI or React Aria primitives
- Adding accessible animation while keeping existing styles and APIs
Key features
- Animated primitives for Radix UI, Base UI and React Aria
- One CLI command swaps imports for installed components
- Motion springs and tweens with reduced-motion support
- Keeps each underlying library's accessibility
- Agent skill for Claude Code, Cursor and Codex
Related resources
23rd.dev
About 130 hand-crafted animated React components built with Tailwind CSS v4 — text effects, backgrounds, cards, widgets and bento grids — installed with the shadcn CLI.
components
animata.design
Visitopens in a new tab
Library of live animated UI components for the web and SwiftUI, where each entry plays in the browser and its code can be copied straight into a project.
components
bluma.design
Visitopens in a new tab