Animated shadcn/ui components that install with the same CLI

beUI vs shadcn/ui

What is shadcn/ui good at?

shadcn/ui describes itself as a set of beautifully designed, accessible components and a code distribution platform, and says plainly that it is not a component library but how you build your own. You get the source for every component, consistent composable APIs, strong defaults and a CLI that copies code into your project.

It also defines the registry format that lets anyone publish components the CLI can install. Its registry directory lists community registries under namespaces such as @beui, which is why the rest of this page works with no extra setup. For most apps, shadcn/ui is the right foundation, and it is where to start.

What does beUI add on top of shadcn/ui?

beUI focuses on motion. Its components use Framer Motion springs and gestures where shadcn/ui components generally use CSS transitions: tabs with a spring indicator that glides between triggers, a select panel that unfolds from its trigger, a switch with a spring-driven thumb, tooltips with scale-and-fade entry, and a combobox whose active row glides as you move through results.

It also covers areas outside a base component set: Charts such as treemap and candlestick, an AI Agents category with messages, prompt input and tool approval, and Blocks like a command palette and dynamic island. Transform-based motion is gated behind useReducedMotion, and React Native versions of many components are available through beUI Native.

How do I add animated components to a shadcn/ui project?

If your project already has a components.json from shadcn init, skip the first command. Each beUI component installs its own files, and any internal helpers it imports, into your project.

# once per project, if components.json does not exist yet
npx shadcn@latest init

npx shadcn@latest add @beui/tabs
npx shadcn@latest add @beui/select
npx shadcn@latest add @beui/tooltip

Can beUI and shadcn/ui components live in the same app?

Yes, that is the intended setup. Both copy source into your repo and both use Tailwind CSS, so you can keep shadcn/ui as your base and use beUI only where motion helps, for example animated tabs on a settings page or a spring select in a signup flow.

beUI motion components install under components/motion, while shadcn/ui components usually live under components/ui, so files with similar names do not collide. Import each from its own path, and swap one component at a time if you want to compare the feel.

When should I stick with plain shadcn/ui?

Stick with shadcn/ui when you want the widest set of base components, the fewest dependencies, or CSS-only transitions. It covers far more form, layout and data components than an animation library aims to, and its Radix UI and Base UI versions give you a choice of primitive. Reach for beUI when a specific interaction should feel physical, or when you want animated charts and agent UI that install the same way.