BeUI Component Library

87 animated React components with live inline previews

Every component from beui.dev with interactive previews. Install via shadcn CLI.

Components

43 components

Free, open-source animated React components built with Motion and Tailwind CSS, available as copy-paste source through the shadcn registry.

Animated Color Selector

Live

Composable color swatches with a spring-gliding selection ring, press feedback, native radio keyboard navigation, and controlled or uncontrolled state.

Install
pnpm dlx shadcn@latest add @beui/color-selector
1 file

Animated Breadcrumb

Live

Composable breadcrumb navigation with soft path transitions, a hoverable overflow dropdown for long trails, custom separators, and router-link support.

Install
pnpm dlx shadcn@latest add @beui/breadcrumb
1 file

Tilt Card

Live

3D perspective tilt on hover with cursor-tracked glare.

Install
pnpm dlx shadcn@latest add @beui/tilt-card
1 file

Button

Live

Spring-pressed Button plus StatefulButton, MagneticButton, and MetallicButton variants.

Install
pnpm dlx shadcn@latest add @beui/button
5 files

Animated CTA Buttons

Live

Expressive call-to-action buttons with expanding, hold, and slide interactions.

Install
pnpm dlx shadcn@latest add @beui/expanding-arrow-button
1 file

Expandable Control

Live

Click-to-expand button and chip controls that reveal a label or trailing action through spring layout continuity.

Install
pnpm dlx shadcn@latest add @beui/expandable-control
1 file

Adaptive Stepper

Live

Composable numeric stepper whose fixed footprint adapts at its minimum and maximum while the value rolls between steps.

Install
pnpm dlx shadcn@latest add @beui/adaptive-stepper
1 file

Marquee

Live

Infinite horizontal or vertical scroll with pause-on-hover.

Install
pnpm dlx shadcn@latest add @beui/marquee
1 file

Tabs

Live

Pill, segment or underline tabs with a spring layoutId indicator.

Install
pnpm dlx shadcn@latest add @beui/tabs
1 file

Switch

Live

Toggle with a spring-driven thumb and press feedback.

Install
pnpm dlx shadcn@latest add @beui/switch
1 file

Input

Live

Text input with label, left/right icons, optional stable error row, error shake and success check draw.

Install
pnpm dlx shadcn@latest add @beui/input
1 file

Select

Live

Composable select primitives whose panel bouncily unfolds out of the trigger and separates, plus a Morph variant where the trigger grows into the panel via shared layout.

Install
pnpm dlx shadcn@latest add @beui/select
1 file

Combobox

Live

Searchable combobox with a morphing portal, grouped filtering, keyboard navigation, and controlled or uncontrolled state.

Install
pnpm dlx shadcn@latest add @beui/combobox
6 files

Multi Select

Live

Composable multi-select primitives with searchable options, removable animated tokens, and a morphing collision-aware panel.

Install
pnpm dlx shadcn@latest add @beui/multi-select
5 files

Checkbox

Live

Form choice control with a draw-on checkmark, spring press feedback and indeterminate state support.

Install
pnpm dlx shadcn@latest add @beui/checkbox
1 file

Radio Group

Live

Single-select choice control with a gliding layoutId indicator dot and spring press feedback.

Install
pnpm dlx shadcn@latest add @beui/radio
1 file

Bottom Sheet

Live

Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface.

Install
pnpm dlx shadcn@latest add @beui/bottom-sheet
1 file

Pull to Refresh

Live

Native-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.

Install
pnpm dlx shadcn@latest add @beui/pull-to-refresh
1 file

Shared Layout Background

Live

A pill that glides between hovered items via motion's shared layout, with blur enter/exit.

Install
pnpm dlx shadcn@latest add @beui/shared-layout-bg
1 file

Bounce Sidebar

Live

A vertical sidebar whose active dot jumps between destinations on a curved, spring-loaded path.

Install
pnpm dlx shadcn@latest add @beui/bounce-sidebar
1 file

Animated Sidebar

Live

A composable application sidebar with morphing nested navigation that folds into an animated icon rail on desktop and becomes a focus-managed sheet on mobile.

Install
pnpm dlx shadcn@latest add @beui/animated-sidebar
1 file

File Tree

Live

Composable file and folder primitives with springing branches, a gliding selection, and complete keyboard navigation.

Install
pnpm dlx shadcn@latest add @beui/file-tree
1 file

Preview Rail

Live

Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.

Install
pnpm dlx shadcn@latest add @beui/preview-rail
1 file

Dock

Live

macOS-style dock with grouped actions and a gliding active pill.

Install
pnpm dlx shadcn@latest add @beui/dock
1 file

Tooltip

Live

Hover or focus tooltip with a subtle scale and fade, collision-aware placement, and optional cursor tracking.

Install
pnpm dlx shadcn@latest add @beui/tooltip
3 files

Animated Context Menu

Live

Composable context-menu primitives with a pointer-origin clip morph, a gliding active row, checkbox and radio choices, keyboard navigation, typeahead, and long-press support.

Install
pnpm dlx shadcn@latest add @beui/context-menu
1 file

Popover

Live

Gooey popover whose panel oozes out of the trigger through an SVG goo filter — a liquid neck that stretches and pinches — with crisp content fading in on top, plus a Morph variant that clip-morphs open from the trigger corner. Click or hover trigger, controlled or uncontrolled.

Install
pnpm dlx shadcn@latest add @beui/popover
1 file

Morphing Modal

Live

Family-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content.

Click a row. The modal morphs height to match new content.

Install
pnpm dlx shadcn@latest add @beui/morphing-modal
1 file

Center Morph Modal

Live

A composable modal whose full-size surface unfolds from its exact center toward every edge, then folds back the same way with an inset close control.

Install
pnpm dlx shadcn@latest add @beui/center-morph-modal
1 file

Text Animation

Live

Animated text primitives for spring reveals, chromatic sweeps, shimmer loading states, letter-cascade swaps and character scrambles.

Install
pnpm dlx shadcn@latest add @beui/text-animation

Number Animation

Live

Animated number primitives for count-up values, rolling tickers, and fixed-slot digit swaps.

Install
pnpm dlx shadcn@latest add @beui/number

Animated Badge

Live

Status badge with animated state icons, pulse feedback and compact size variants.

Install
pnpm dlx shadcn@latest add @beui/animated-badge
1 file

Action Swap

Live

CTA button and slot primitives for swapping text and icons with blur motion.

Install
pnpm dlx shadcn@latest add @beui/action-swap
1 file

Animated Toast Stack

Live

Stacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.

Install
pnpm dlx shadcn@latest add @beui/animated-toast-stack
1 file

Theme Toggle

Live

Theme toggle button that repaints the whole page through the View Transition API — a rectangle or circle clip-path reveal, or slats that open across the screen like a shutter.

Install
pnpm dlx shadcn@latest add @beui/theme-toggle
1 file

Bouncy Accordion

Live

Single-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.

Install
pnpm dlx shadcn@latest add @beui/bouncy-accordion
1 file

Drawer

Live

Side panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.

Install
pnpm dlx shadcn@latest add @beui/drawer
1 file

Scroll Animation

Scroll-driven motion: a Lenis smooth-scroll provider and a reading-progress indicator that reads from it.

Collection component

Install
pnpm dlx shadcn@latest add @beui/scroll-animation

Range Slider

Live

Slider with tick dots and a vertical-bar thumb that bounces as it lands on each step. Drag or keyboard, reduced-motion safe.

Install
pnpm dlx shadcn@latest add @beui/range-slider
1 file

Wheel Picker

Live

iOS-style picker wheel: a 3D drum on native momentum scroll that snaps to the nearest notch, with wheel, drag and keyboard control. Composes side by side for date and time pickers, reduced-motion safe.

Install
pnpm dlx shadcn@latest add @beui/wheel-picker
1 file

Table

Live

Virtualized data table that stays smooth at 10k+ rows, with sortable headers, row selection, column resize and reorder, and a sticky header. Minimal, reduced-motion-safe motion.

Install
pnpm dlx shadcn@latest add @beui/table
12 files

Shader Background

Live

Canvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated variants.

Install
pnpm dlx shadcn@latest add @beui/shader-background
1 file

Cylinder Carousel

Live

A carousel whose items line the inside of a cylinder, receding into the center and growing toward the edges. Drag, scroll or arrow-key to roll it, with a springy glide and snap. Reduced-motion drops the glide.

Install
pnpm dlx shadcn@latest add @beui/cylinder-carousel
1 file

Loader

Live

Loading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs, newton, helix, percent, and five terminal-style ascii spinners. Scales from one size prop, uses currentColor, and reduced-motion swaps every transform for a calm opacity pulse.

Install
pnpm dlx shadcn@latest add @beui/loader
1 file

Charts

8 components

Animated React charts for activity, returns, price targets, and order books, built with Motion and Tailwind CSS as customizable copy-paste source.

Composition Chart

Live

Stacked bar and area shares with period tooltips and a compact interactive legend.

Install
pnpm dlx shadcn@latest add @beui/composition-chart
6 files

Funnel Chart

Live

Vertical and horizontal funnels with curved stages and animated number tooltips.

Install
pnpm dlx shadcn@latest add @beui/funnel-chart
2 files

Liquidity Heatmap

Live

Animated liquidity bands across price and time, with a price trace and depth tooltips.

Install
pnpm dlx shadcn@latest add @beui/liquidity-heatmap
2 files

Bump Chart

Live

Animated rankings with curved paths, interactive rank dots, and tooltips.

Install
pnpm dlx shadcn@latest add @beui/bump-chart
8 files

Order Book

Live

Animated order book with bid and ask depth, spread, and volume balance.

Install
pnpm dlx shadcn@latest add @beui/order-book
3 files

Heat Calendar

Live

Composable activity calendar with Grid, Legend, and Tooltip parts, controlled range selection, and UTC calendar dates. Supply weekly intensities to visualize activity and total a selected span.

Install
pnpm dlx shadcn@latest add @beui/heat-calendar
7 files

Returns Calendar

Live

Composable monthly returns calendar with Grid and Tooltip parts, controlled month or year selections, and compounded totals. Supply your own years and monthly percentages.

Install
pnpm dlx shadcn@latest add @beui/returns-calendar
6 files

Price Target Fan

Live

Composable price target chart with Header, Plot, SVG, Axes, History, Targets, Now, Cursor, and Tooltip parts. Supply dated price history and targets; scrub with a pointer or keyboard and customize the active readout.

Install
pnpm dlx shadcn@latest add @beui/price-target-fan
8 files

AI Agents

14 components

Animated React components for agent reasoning, progress, tool activity, and conversational AI interfaces.

Message Bubble

Live

A focused conversational surface with visual tones, independent alignment, grouped messages, expandable content, and interactive link or button support.

Install
pnpm dlx shadcn@latest add @beui/message-bubble
1 file

Message

Live

Composable conversation primitives for message rows, grouped bubbles, avatars, metadata, live markers, and a mount-only trailing-edge pop-up for newly sent rows.

Install
pnpm dlx shadcn@latest add @beui/message
1 file

Message Scroller

Live

A reader-aware conversation viewport that follows streamed output at the live edge and releases control when the reader moves away.

Install
pnpm dlx shadcn@latest add @beui/message-scroller
1 file

Prompt Input

Live

An auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states.

Install
pnpm dlx shadcn@latest add @beui/prompt-input
1 file

Todo List

Live

A collapsible agent task plan with morphing status marks, a completion count, compact metadata, and smooth list updates.

Install
pnpm dlx shadcn@latest add @beui/todo-list
1 file

Code Block

Live

A syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.

Install
pnpm dlx shadcn@latest add @beui/code-block
1 file

Approval Card

A human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows.

Collection component

Install
pnpm dlx shadcn@latest add @beui/approval-card
2 files

File Diff

Live

A syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse.

Install
pnpm dlx shadcn@latest add @beui/file-diff
1 file

Tool Result

A lightweight execution disclosure for syntax-highlighted terminal output and request responses that collapses into a compact completed state.

Collection component

Install
pnpm dlx shadcn@latest add @beui/tool-result
1 file

Streaming Response

Live

A stable response surface with completion actions, rendered content, and an expandable source summary.

Install
pnpm dlx shadcn@latest add @beui/streaming-response
1 file

Image Generation

Live

A stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift.

Install
pnpm dlx shadcn@latest add @beui/image-generation
1 file

Tool Approval

Live

A human-in-the-loop permission card for reviewing tool details, allowing once, remembering access, or denying execution.

Install
pnpm dlx shadcn@latest add @beui/tool-approval
1 file

Citations

Live

Inline citation markers paired with a collapsible, progressively rendered reference collection for grounded agent responses.

Install
pnpm dlx shadcn@latest add @beui/citations
1 file

Agent Activity

Live

One adaptive activity stream for reasoning, searches, tool calls, structured execution traces, or a chronological mix.

Install
pnpm dlx shadcn@latest add @beui/agent-activity
3 files

Agent Loading States

Three thoughtful loading states for AI interfaces: shimmering status text, live agent progress, and cycling reasoning phrases.

Collection component

Install
pnpm dlx shadcn@latest add @beui/loading-states
4 files

AI Sidebar

Live

A collapsible AI workspace sidebar for folders, projects, files, and bookmarks with keyboard navigation, optimistic moves, inline rename, and overflow-aware labels.

Install
pnpm dlx shadcn@latest add @beui/ai-sidebar
1 file

Chat App

Live

A complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated media, sources, and prompt input.

Install
pnpm dlx shadcn@latest add @beui/chat-app
1 file

Blocks

22 components

Product-ready animated React UI blocks built with Motion and Tailwind CSS, available as customizable copy-paste source.

Infinite Masonry

Live

Responsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end.

Install
pnpm dlx shadcn@latest add @beui/infinite-masonry
1 file

Notification Stack

Live

Compact notification cards that spring from a stacked summary into a readable list on hover, focus or tap.

Install
pnpm dlx shadcn@latest add @beui/notification-stack
1 file

Project Folder

Live

An interactive project folder that opens its file fan on hover or focus, expands into a focus-managed overlay, then retraces the complete path when closed.

Install
pnpm dlx shadcn@latest add @beui/project-folder
1 file

Card Folder

Live

A landscape card tucked into a stitched purse pocket that lifts forward as the purse compresses into its bottom seam, with controlled open and card-detail visibility plus a separate overflow action.

Install
pnpm dlx shadcn@latest add @beui/card-folder
1 file

Fixtures

Live

Animated tournament fixtures in two styles: a knockout bracket that pages through rounds, and a wheel that wraps the same tree around the champion. Both read the same array of rounds, so one dataset draws either.

Install
pnpm dlx shadcn@latest add @beui/knockout-bracket
1 file

Availability Scheduler

Live

Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrollable dropdown, and a copy menu clones hours to other days.

Install
pnpm dlx shadcn@latest add @beui/availability-scheduler
6 files

Multi-chain Swap

Live

Cross-chain swap widget with chain + token selectors, morphing views, animated flip and quote.

Install
pnpm dlx shadcn@latest add @beui/swap
10 files

Dynamic Island

Live

iOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades.

Install
pnpm dlx shadcn@latest add @beui/dynamic-island
1 file

Command Palette

Live

⌘K palette with fuzzy filter, spring-animated active row and glass surface.

Install
pnpm dlx shadcn@latest add @beui/command-palette
1 file

Morphing Search

Live

Search field or compact icon that morphs into a glass results surface, whether opened by click or keyboard shortcut.

Install
pnpm dlx shadcn@latest add @beui/morphing-search
1 file

Expandable Action Bar

Live

Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.

Install
pnpm dlx shadcn@latest add @beui/expandable-action-bar
1 file

Overflow Actions

Live

Connected pill rail for primary actions that springs open to reveal extra controls.

Install
pnpm dlx shadcn@latest add @beui/overflow-actions
1 file

Expandable Tabs

Live

Icon tab bar where the active tab expands to a labelled pill, with a panel above that morphs height and slides content direction-aware on switch.

Install
pnpm dlx shadcn@latest add @beui/expandable-tabs
1 file

Morphing Tabs

Live

Reorderable tabs whose selected item grows into a white content surface, with the active shape gliding as tabs move and a shared morph between rooms.

Install
pnpm dlx shadcn@latest add @beui/morphing-tabs
1 file

Swipeable List

Live

Mobile-style list rows that swipe left or right to reveal contextual action buttons.

Install
pnpm dlx shadcn@latest add @beui/swipeable-list
1 file

File Upload

Live

Two file upload patterns: an attachment workspace for mixed files, links, audio and media, plus a progress queue with retry and removal.

Install
pnpm dlx shadcn@latest add @beui/file-upload
1 file

Prediction Market

Live

Animated market listing cards with outcome CTAs, probabilities and bookmarks, plus a trade ticket with buy/sell modes and rolling amount entry.

Install
pnpm dlx shadcn@latest add @beui/prediction-market
1 file

Wallet Card

Live

Wallet overview card with an account switcher and search that morph open from their triggers, a cascading balance with a live change pill and privacy toggle, copy-address, and Send / Deposit / Swap / Buy actions.

Install
pnpm dlx shadcn@latest add @beui/wallet-card
10 files

OTP Input

Live

One-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw.

Install
pnpm dlx shadcn@latest add @beui/otp-input
1 file

Sign Up Form

Live

Composed sign-up form that flags a field only once it is left, then clears the moment it is fixed, with a length-weighted strength meter, password reveal and an animated submit lifecycle.

Install
pnpm dlx shadcn@latest add @beui/signup-form
1 file

Bloom Menu

Live

A button that morphs open into a menu and blooms iris-out from the center, the grid revealing in every direction with radially staggered items.

Install
pnpm dlx shadcn@latest add @beui/bloom-menu
1 file

Feedback Widget

Live

Corner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states.

Install
pnpm dlx shadcn@latest add @beui/feedback-widget
1 file

404 / Not Found

Animated 404 pages in five styles: glitch scramble, magnetic digits, cursor spotlight, a fanning card stack and a typed terminal.

Collection component

Install
pnpm dlx shadcn@latest add @beui/not-found
7 files