Components

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

43 components with live previews

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
Files (1)
  • components/motion/color-selector.tsx

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
Files (1)
  • components/motion/breadcrumb.tsx

Tilt Card

Live

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

Install
pnpm dlx shadcn@latest add @beui/tilt-card
Files (1)
  • components/motion/tilt-card.tsx

Button

Live

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

Install
pnpm dlx shadcn@latest add @beui/button
Files (5)
  • components/motion/button/base.tsx
  • components/motion/button/index.tsx
  • components/motion/button/magnetic.tsx
  • components/motion/button/metallic.tsx
  • components/motion/button/stateful.tsx

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
Files (1)
  • components/motion/expanding-arrow-button.tsx

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
Files (1)
  • components/motion/expandable-control.tsx

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
Files (1)
  • components/motion/adaptive-stepper.tsx

Marquee

Live

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

Install
pnpm dlx shadcn@latest add @beui/marquee
Files (1)
  • components/motion/marquee.tsx

Tabs

Live

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

Install
pnpm dlx shadcn@latest add @beui/tabs
Files (1)
  • components/motion/tabs.tsx

Switch

Live

Toggle with a spring-driven thumb and press feedback.

Install
pnpm dlx shadcn@latest add @beui/switch
Files (1)
  • components/motion/switch.tsx

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
Files (1)
  • components/motion/input.tsx

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
Files (1)
  • components/motion/select.tsx

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
Files (6)
  • components/motion/combobox.tsx
  • components/motion/combobox/content.tsx
  • components/motion/combobox/context.tsx
  • components/motion/combobox/list.tsx
  • components/motion/combobox/trigger.tsx
  • components/motion/combobox/use-active-option.ts

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
Files (5)
  • components/motion/multi-select/content.tsx
  • components/motion/multi-select/context.tsx
  • components/motion/multi-select/index.tsx
  • components/motion/multi-select/list.tsx
  • components/motion/multi-select/trigger.tsx

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
Files (1)
  • components/motion/checkbox.tsx

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
Files (1)
  • components/motion/radio.tsx

Bottom Sheet

Live

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

Install
pnpm dlx shadcn@latest add @beui/bottom-sheet
Files (1)
  • components/motion/bottom-sheet.tsx

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
Files (1)
  • components/motion/pull-to-refresh.tsx

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
Files (1)
  • components/motion/shared-layout-bg.tsx

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
Files (1)
  • components/motion/bounce-sidebar.tsx

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
Files (1)
  • components/motion/animated-sidebar.tsx

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
Files (1)
  • components/motion/file-tree.tsx

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
Files (1)
  • components/motion/preview-rail.tsx

Dock

Live

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

Install
pnpm dlx shadcn@latest add @beui/dock
Files (1)
  • components/motion/dock.tsx

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
Files (3)
  • components/motion/tooltip.tsx
  • components/motion/tooltip/positioner.tsx
  • components/motion/tooltip/use-position.ts

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
Files (1)
  • components/motion/context-menu.tsx

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
Files (1)
  • components/motion/popover.tsx

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
Files (1)
  • components/motion/morphing-modal.tsx

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
Files (1)
  • components/motion/center-morph-modal.tsx

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
Files (1)
  • components/motion/animated-badge.tsx

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
Files (1)
  • components/motion/action-swap.tsx

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
Files (1)
  • components/motion/animated-toast-stack.tsx

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
Files (1)
  • components/motion/theme-toggle.tsx

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
Files (1)
  • components/motion/bouncy-accordion.tsx

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
Files (1)
  • components/motion/drawer.tsx

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
Files (1)
  • components/motion/range-slider.tsx

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
Files (1)
  • components/motion/wheel-picker.tsx

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
Files (12)
  • components/motion/table/editable-cell.tsx
  • components/motion/table/index.tsx
  • components/motion/table/row-handle.tsx
  • components/motion/table/skeleton-rows.tsx
  • components/motion/table/table-header.tsx
  • components/motion/table/table-menu.tsx
  • components/motion/table/types.ts
  • components/motion/table/use-column-reorder.ts
  • components/motion/table/use-column-resize.ts
  • components/motion/table/use-column-sort.ts
  • components/motion/table/use-row-selection.ts
  • components/motion/table/utils.ts

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
Files (1)
  • components/motion/shader-background.tsx

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
Files (1)
  • components/motion/cylinder-carousel.tsx

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
Files (1)
  • components/motion/loader.tsx