AnimBits
50+ production-ready animation components for React, powered by Framer Motion. Copy-paste buttons, cards, text effects, loaders, icons, and page transitions into any shadcn/ui project with a single CLI command.
Overview
AnimBits is an official shadcn registry of 50+ animation components for React, built on Framer Motion and designed to drop into existing shadcn/ui projects without extra configuration. Each component is copy-paste ready: install with the shadcn CLI, import it, and customize behavior through simple props.
The collection covers the kinds of motion details that usually take hours to polish โ magnetic buttons, parallax cards, shimmer text, staggered list reveals, gooey loaders, and theme transitions using the View Transitions API. Animations are tuned to feel smooth rather than flashy, and the library respects prefers-reduced-motion for accessibility.
Documentation at animbits.dev is built with Fumadocs and includes live previews for every component, grouped into categories like buttons, cards, text, icons, lists, loaders, transitions, and reusable animation hooks.
Registry
Install via the shadcn CLI registry:
npx shadcn@latest add @animbits/component-name