Beui

Beui is a free, open-source library of animated components for React and Next.js. This guide walks through the features that make Beui the easiest way to add professional motion to your interface.

Animated component gallery. The core of Beui is a visual gallery of animated components. Every component is shown as a live example, so you can see exactly what the animation looks like before you commit to it. Cards, buttons, modals, navigation, and more — all animated with Motion.

Copy-paste components. Every component on Beui is designed to be copied. Open the component, copy the source, paste it into your project. That is the whole install process — no build steps, no wrappers, no configuration files to touch.

shadcn CLI support. For developers who prefer structure, Beui is a shadcn-compatible registry. Install components with the same npx shadcn add workflow you already use for shadcn/ui, and the registry handles dependencies for you.

Built on Motion + Tailwind CSS. Beui components use the modern React animation stack: Motion for animation and Tailwind CSS for styling. Because Beui uses the tools already standard in the React ecosystem, the components integrate without friction.

Open source and free. Beui is fully open source with a price of zero dollars. No tiers, no watermarks, no license traps — the components are free for personal and commercial projects alike.

Theme system. Beui ships with multiple themes — violet, blue, and more — using the standard CSS-variable pattern, so they integrate with your existing Tailwind and shadcn theming setup.

No lock-in. Because Beui components are source code in your repository, you own them completely. Customize every animation, every color, every layout — the code is yours.

If you build interfaces with React or Next.js, Beui is worth bookmarking. Browse the gallery, copy a component, and your interface immediately feels more alive. Free, open source, and built for the way developers actually work — that is Beui.