beUI - Motion Component Library

Animated components for React and Next.js. Copy the source, own the code.

Website · Components · llms.txt

Interfaces that move with intent

beUI brings motion to everyday product interfaces: buttons, navigation, menus, charts, and AI conversations. Built with React, TypeScript, Tailwind CSS, and Motion, with live previews and copyable usage examples.

• Own the source. Install individual components into your app and change them to fit your product.
• Compose your interface. Combine focused primitives or start with a complete block.
• Make motion useful. Springs, shared layouts, and press feedback communicate state and keep interactions connected.
• Keep interaction in reach. Components include keyboard behavior and reduced-motion support where applicable; the project maintains an accessibility test suite.

Explore the library

| Collection | What you'll find | | --- | --- | | Components | Animated breadcrumbs, color selectors, buttons, tabs, tooltips, and other primitives | | Blocks | Command palettes, file uploads, signup forms, and composed widgets | | AI agents | Chat layouts, prompt inputs, messages, approvals, and tool results | | Charts | Composition, ranking, funnel, calendar, and financial visualizations |

Install a component

In a project configured for shadcn/ui, add a component using the @beui namespace:

npx shadcn@latest add @beui/animated-toast-stack

Direct URLs also work:

npx shadcn@latest add https://beui.dev/r/animated-toast-stack.json

Browse a component's page for its preview, usage example, and exact install command. Prefer a manual setup? Copy its source and supporting files from the page instead.

For AI agents

Connect your coding agent to the public MCP server to discover components and retrieve their source and usage examples. No license key is required:

https://mcp.beui.dev/mcp

See the AI agents guide for client setup. You can also install the beUI skill to help your agent find and compose existing components:

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

For direct access without MCP:

| Endpoint | Contents | | --- | --- | | /llms.txt | Documentation index for agents | | /r/registry.json | Installable component catalog | | /r/{slug}.json | shadcn-compatible registry item with source and dependencies | | /r/{slug}/raw | Raw component source |

Run locally

To work on the library or documentation site, install Bun and clone the repository:

git clone https://github.com/starc007/ui-components.git
cd ui-components
bun install
bun run dev

Open http://localhost:3000.

Checks

bun run check
bun test

bun run check runs TypeScript, Biome lint, and registry source validation. bun test runs the accessibility-only test suite. See CONTRIBUTING.md for the testing policy.

Contributing

Keep component source, previews, and catalog entries together when adding or changing a component:

| Location | Purpose | | --- | --- | | components/motion/ | Motion primitives and blocks | | components/agents/ | AI agent interface components | | components/charts/ | Data visualization components | | components/previews/ | Demos and public usage examples | | lib/registry.ts | Component catalog and install metadata | | lib/ease.ts | Shared animation tokens |

Read CONTRIBUTING.md for the contribution and testing workflow, and AGENTS.md for component and motion conventions.

Want complete pages and templates?

beUI Pro includes premium animated sections and full Next.js templates with editable source and private registry access.

Pro customers can install the licensed block workflow:

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

Star history

Author

Saurabh Chauhan · @saurra3h

License

MIT. Use and adapt beUI in personal and commercial projects.