# [beUI](<https://beui.dev/>)

[beui.dev](<https://beui.dev/>)

Free, open-source animated components for React and Next.js — 108 motion primitives and blocks built with Motion and Tailwind, installable via the shadcn CLI.

[UI & UX Design](<https://creatorstoolbox.com/communities/ui-ux>)[Development](<https://creatorstoolbox.com/communities/development>)[Open Source](<https://creatorstoolbox.com/communities/open-source>)[Animation & Motion](<https://creatorstoolbox.com/communities/animation>)

Media 1 of 2

## About beUI

beUI is a free, open-source library of animated components for React and Next.js, built with Motion and Tailwind CSS. It covers 108 components split between motion primitives — buttons, modals, toasts, tabs, cards — and blocks, which are larger assemblies like command palettes, dynamic islands, and swap widgets. Components install through the shadcn registry with npm, pnpm, yarn, or bun, or you can copy the source directly; either way the code lands in your project as editable source rather than a dependency you configure around.

Everything is MIT licensed. A separate Pro tier at [pro.beui.dev](<https://pro.beui.dev/>) exists, but the free library is substantial on its own.

Pricing model: Freemium

## Features

- 108 animated components across motion primitives and blocks

- Primitives: buttons, modals, toasts, tabs, cards

- Blocks: command palettes, dynamic islands, swap widgets

- Built with React, Next.js, Motion, and Tailwind CSS

- Install through the shadcn registry or copy the source

- MIT licensed and fully customisable

## FAQs

Common questions about beUI

How do I install a component?

Through the shadcn registry with your package manager of choice — npm, pnpm, yarn, or bun — or by copying the source straight into your project.

What is it built with?

React and Next.js, with Motion for the animation and Tailwind CSS for styling.

Is beUI free?

The library is free and MIT licensed. There is a separate Pro offering at pro.beui.dev, but the free set covers 108 components.

## Similar products

- [![useLayouts](<https://www.google.com/s2/favicons?domain=uselayouts.com&sz=128>)

useLayoutsuselayouts.com

Free animated React components and micro-interactions built with Framer Motion and Tailwind CSS, designed to work with shadcn/ui.](<https://creatorstoolbox.com/products/uselayouts>)

- [![Loading.dev](<https://loading.dev/favicon.ico>)

Loading.devloading.dev

A free, open-source collection of animated loading indicators for React, with live previews and copyable usage examples.](<https://creatorstoolbox.com/products/loading-dev>)

- [![React Bits](<https://reactbits.dev/favicon.ico>)

React Bitsreactbits.dev

An open-source collection of 200+ animated, interactive React components and micro-interactions.](<https://creatorstoolbox.com/products/react-bits>)

- [![Dot Matrix](<https://dotmatrix.zzzzshawn.cloud/icon.svg>)

Dot Matrixdotmatrix.zzzzshawn.cloud

Open-source React component library of 55+ expressive dot-matrix loaders — install via the shadcn registry and own the code locally.](<https://creatorstoolbox.com/products/dotmatrix>)

- [![animations.dev](<https://www.google.com/s2/favicons?domain=animations.dev&sz=128>)

animations.devanimations.dev

Learn professional web animations with Framer Motion — interactive course by Emil Kowalski.](<https://creatorstoolbox.com/products/animations-dev>)

- [Stageshowbenji.org

Free MIT-licensed agent skill for faux product UI stills, cursor animations, and bento grids, in React and plain CSS.](<https://creatorstoolbox.com/products/stageshow>)

---
Canonical source: https://creatorstoolbox.com/products/beui