Beui

Beui

Beui is a free, open-source collection of animated components for React and Next.js, built with Motion and Tailwind CSS. If you want polished animations in your app without writing animation code from scratch, Beui is the fastest route. Here is how to use it.

Step 1: Open the Beui gallery. The Beui site presents its components visually — you can see exactly what each animated component looks like before you touch any code. Browse the collection and find the components that fit your interface.

Step 2: Copy the source. Every component on Beui is designed to be copied. Open the component you want, copy its source, and paste it into your project. Because Beui is built with Motion and Tailwind CSS, the code drops into any React or Next.js project that already uses those tools — which is most of them.

Step 3: Or install with the shadcn CLI. If you prefer a structured install, Beui is a shadcn-compatible registry. Run the shadcn CLI with the Beui component name, and the component is installed into your project the same way shadcn/ui components are. The Beui registry works with the workflow you already use.

Step 4: Customize and ship. Because Beui components are source code in your project — not a black box library — you can tweak every animation, color, and layout. There is no lock-in: what you copy is yours, forever.

A few things make Beui stand out. It is free and open source, with no subscription and no watermarks. It is built with the modern React stack — Motion for animation, Tailwind CSS for styling — so it integrates without friction. It works for React and Next.js equally. And the copy-paste model means you never have to read a long installation guide; the source is right there.

Beui is the kind of library developers appreciate: high quality, zero cost, and no strings attached. Open Beui, copy an animated component, paste it into your project, and watch your interface come to life.