beUI

29mins agoupdate 9 0 0
Collect 0

Animated motion component library for React and Next.js built on Framer Motion and Tailwind CSS v4, distributed via shadcn registry and AI agent skills.

Country:
India
Added On:
2026-09-18
Open siteMobile view
beUIbeUI
beUIOpen site

beUI is an open-source motion component library and design system for modern React and Next.js applications created by Saurabh Chauhan. Engineered on top of Framer Motion and Tailwind CSS v4, beUI embraces the “copy the source, own the code” philosophy popularized by shadcn/ui. Rather than locking developers behind heavy npm runtime dependencies, each interactive motion component can be installed directly into your codebase via a single CLI command or integrated natively into AI coding agents like Cursor and Claude Code.

Key Architectural Principles

Modern frontend development has shifted away from monolithic UI component libraries (like Material UI or Ant Design) toward headless, modular, and fully customizable primitives. beUI expands this trend into fluid micro-interactions and smooth physics-based animations:

  • Direct Code Ownership: Zero wrapper packages. Every component lives directly inside your repository’s components/ui directory, allowing full customization of motion easing, timing, and styling.
  • Shadcn CLI Registry Compatibility: Install any animated primitive using the official shadcn CLI under the @beui namespace: 
    npx shadcn@latest add @beui/animated-toast-stack
  • Tailwind CSS v4 & React 19 Ready: Optimized for modern React Server Components (RSC), Next.js App Router, and the latest Tailwind CSS v4 engine.
  • AI Coding Agent Integration (llms.txt & Skills CLI): Exposes clean machine-readable endpoints (/llms.txt and raw JSON registry files) and an official Claude/Cursor skill (npx skills add starc007/ui-components --skill beui) so AI coding agents automatically select existing motion primitives before inventing new UI.

Featured Motion Primitives & Components

Component Category Example Primitives Motion & Interaction Characteristics
Navigation & Docks Animated Dock, Fluid Navbar, Floating Tabs macOS-style magnification on hover, spring physics, layout animations
Feedback & Notifications Animated Toast Stack, Action Badges, Status Dots Physics-based stacking, drag-to-dismiss, smooth height transitions
Buttons & Triggers Glow Button, Morphing Action Button, Magnetic Click Radial cursor tracking, gradient shifts, active tactile feedback
Overlays & Modals Morphing Dialog, Drawer Sheets, Expanding Cards Shared element transitions (FLIP layout animations) without layout thrashing

Installation & Usage

1. Install via shadcn Registry

You can add components directly to an existing Next.js / Tailwind project:

# Add via namespace
npx shadcn@latest add @beui/animated-toast-stack

# Or add directly via registry URL
npx shadcn@latest add https://beui.dev/r/animated-toast-stack.json

2. Equip AI Coding Agents (Cursor & Claude Code)

Teach your coding assistant to recommend and write beUI motion components automatically:

npx skills add starc007/ui-components --skill beui

Frequently Asked Questions

Does beUI require installing a separate npm package?

No. Like shadcn/ui, beUI distributes code directly into your repository. You only need standard dependencies (such as framer-motion and lucide-react) installed in your project.

Can I use beUI with React 19 and Next.js 15?

Yes. beUI is actively maintained and tested against React 19, Next.js 15 App Router, and Tailwind CSS v4.

Is beUI completely free for commercial projects?

Yes. The core beUI library is open-source and released under the permissive MIT License, allowing unrestricted use in personal and commercial web applications.

How does beUI work with AI coding agents?

beUI provides a specialized llms.txt index and machine-readable JSON endpoints at beui.dev/r. When integrated via the skills CLI, coding assistants like Cursor and Claude Code can fetch exact component code without manual copy-pasting.

data statistics

Relevant Navigation

No comments

none
No comments...