Beui

What is Beui

Beui is an open-source animated UI component library for React and Next.js that focuses on motion-heavy interface patterns. It is built with Motion and Tailwind CSS, and the site presents it as a collection of copy-paste React components that can also be added through the shadcn CLI.

The library currently shows 108 components on the site, with both free and Pro browsing paths visible in the interface. The product positioning is clearly geared toward developers who want polished interaction design without building every animation from scratch.

A few things stand out immediately:

• It is designed for React 19 and Tailwind 4.
• It is distributed via shadcn, not as a typical locked package-only UI kit.
• The component set includes motion primitives as well as more opinionated patterns like search, modal, tabs, and dock interactions.

Key features

Beui focuses on animated React components that are ready to adapt into production interfaces.

• Motion-first components: The site says the library is built on Framer Motion / Motion, so the emphasis is on transitions, spring behavior, and shared layout animation.
• Copy-paste workflow: Components can be copied from the source, which is useful for teams that prefer owning the code directly.
• shadcn CLI install: The library can be added with the shadcn CLI using the package path shown on the site.
• Free and open source: The core library is presented as free and open source.
• Fully customizable: The components are meant to be edited in your own codebase rather than used as a closed widget.
• Wide component range: Examples visible on the site include:
  • Morphing Search, with click or keyboard shortcut activation
  • Project Folder, which opens a file fan on hover or focus
  • Morphing Modal, with view changes inside a single panel
  • Animated Toast Stack, with swipe dismissal and action support
  • Dock, modeled after a macOS-style launcher
  • Tabs with spring-animated indicators
  • Dynamic Island-style live activity pill
  • Command Palette with fuzzy filtering and an animated active row
  • Expandable Action Bar and Expandable Tabs patterns

How to use it

Beui is meant to fit into a React or Next.js codebase rather than act as a standalone app.

1. Pick a component from the gallery that matches the interaction you need, such as a search field, modal, toast system, or tab set.
2. Choose your integration path:
   • copy the source directly, or
   • install it with the shadcn CLI.
3. Add the dependencies and styling stack the component expects, especially Motion and Tailwind CSS.
4. Paste or install the component into your project and adapt it to your layout, copy, and theme.
5. Test the interaction states such as hover, focus, keyboard shortcut, loading, success, error, and dismissal where applicable.

Because the library is built around interaction design, implementation usually means wiring the animation component into your existing app structure and content, not just dropping in a static visual asset.

Who it is for

Beui is a good fit for developers and product teams building modern interfaces in React or Next.js.

• Frontend engineers who want reusable animated UI building blocks
• Next.js teams that already use Tailwind CSS
• Designers and developers prototyping premium-feeling interactions
• Indie hackers who want to move fast with polished interface patterns
• Product teams that prefer source-level control over embedded widgets

It is especially relevant when you need motion-rich microinteractions such as floating action menus, command palettes, morphing containers, or animated notification stacks.

What to know before you use it

Beui is a component library, not a full app framework or design system with a fixed opinion on product architecture. You still need to integrate the pieces into your own codebase and handle your own content, data, and state.

Important caveats:

• The site confirms React and Next.js support, but it does not document support for other frameworks.
• The page shows Motion and Tailwind CSS as required building blocks, so this is not a zero-dependency solution.
• The component catalog is broad, but the site does not guarantee that every component behaves identically in every app without configuration.
• The public source material shown here does not include pricing details for Pro, so treat upgrade terms as unknown unless you review the live site.
• For exact installation steps, component props, and current availability, use the official Beui documentation and component pages rather than relying on summaries.

Beui is strongest when you want animated UI components you can own, edit, and ship inside a React or Next.js project. If you need the latest API details, installation syntax, or commercial terms, check the official source before you build around it.