A Magic UI alternative for animated React components

beUI vs Magic UI

What is Magic UI good at?

Magic UI calls itself a UI library for design engineers. Its free catalog is full of polished landing page pieces: marquee, bento grid, globe, dock, animated beams and borders, number ticker, shimmer and rainbow buttons, a wide range of text animations, background patterns and device mockups such as Safari and iPhone frames.

It installs with the same process as shadcn/ui and is MIT licensed, which makes it an easy, low-risk addition to any shadcn project. Magic UI Pro adds paid blocks and templates for teams that want complete pages.

Where does beUI differ from Magic UI?

The libraries overlap on effects like marquee, dock, number tickers and text reveals, and both are free and MIT licensed. The difference is scope. beUI's 107 web components go deeper into the parts of a product people interact with every day: select, combobox, tooltip, popover, context menu, tabs, sliders, wheel picker, bottom sheet and toasts, with keyboard and focus behavior built in.

beUI also ships two categories Magic UI does not list as of October 2026: Charts, such as treemap, candlestick and donut charts, and AI Agents, with message, prompt input, tool approval, streaming response and citation components. Many of these have React Native versions through beUI Native.

• Shared motion tokens so springs and easing feel consistent across components
• Movement gated behind useReducedMotion, with opacity and color feedback kept
• Controlled and uncontrolled state on larger components

How do I install a beUI component?

If you already install Magic UI components with the shadcn CLI, beUI needs no extra setup. beUI is listed in shadcn's official registry directory as @beui. This command adds the rolling slot-machine number ticker.

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

npx shadcn@latest add @beui/number-ticker

Can I use Magic UI and beUI in the same project?

Yes, and many projects should. Both are copy-paste source with the same Tailwind CSS and Framer Motion stack, so they coexist cleanly. Use Magic UI for landing page flourishes and mockups, and beUI for the app's controls, charts and agent chat surfaces.

Both libraries can install a file with a similar name, such as a marquee or dock. If the shadcn CLI asks before overwriting a file, choose a different path for one of them or keep the version you prefer.

When is Magic UI the better pick?

Magic UI is the better pick when you are building a marketing or portfolio site and want a wide menu of eye-catching effects, background patterns and device frames, or when you want its paid templates to start a full page. Pick beUI when the work is inside the product: forms, menus, data visualization, AI chat, or a matching React Native app.