sh4dcnv2 · atlas
← libraries

@beui

Bespoke motion components for React. Copy-paste components with shadcn-compatible installs, Tailwind CSS v4, and Motion.

60 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://beui.dev/r/registry.json
pnpm pnpm dlx shadcn@latest add https://beui.dev/r/registry.json
bun bunx shadcn@latest add https://beui.dev/r/registry.json
fetch registry curl -s https://beui.dev/r/registry.json

Components

60 total
Tilt Card component

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

npx shadcn@latest add https://beui.dev/r/tilt-card.json
Button Button component

Press scale, hover lift, variants and sizes.

npx shadcn@latest add https://beui.dev/r/button-base.json
Button Stateful Button component

Idle → loading → success / error with blur-swap slots and morphing width.

npx shadcn@latest add https://beui.dev/r/button-stateful.json
Button Magnetic Button component

Button composed with the Magnetic wrapper for cursor-attracted pull.

npx shadcn@latest add https://beui.dev/r/button-magnetic.json
Marquee component

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

npx shadcn@latest add https://beui.dev/r/marquee.json
Tabs component

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

npx shadcn@latest add https://beui.dev/r/tabs.json
Switch component

Toggle with a spring-driven thumb and press feedback.

npx shadcn@latest add https://beui.dev/r/switch.json
Input component

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

npx shadcn@latest add https://beui.dev/r/input.json
Select Select component

Composable primitives (Select, SelectTrigger, SelectValue, SelectContent, SelectItem); the panel pinches off the trigger and separates, with staggered items. P…

npx shadcn@latest add https://beui.dev/r/select.json
Select Morph Select component

Composable primitives (MorphSelect, MorphSelectTrigger, MorphSelectValue, MorphSelectContent, MorphSelectItem) where the trigger morphs into the panel via a sh…

npx shadcn@latest add https://beui.dev/r/select-morph.json
Checkbox component

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

npx shadcn@latest add https://beui.dev/r/checkbox.json
Radio Group component

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

npx shadcn@latest add https://beui.dev/r/radio.json
Bottom Sheet component

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

npx shadcn@latest add https://beui.dev/r/bottom-sheet.json
Shared Layout Background component

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

npx shadcn@latest add https://beui.dev/r/shared-layout-bg.json
Dock component

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

npx shadcn@latest add https://beui.dev/r/dock.json
Tooltip component

Hover or focus tooltip with blur enter/exit and spring spawn.

npx shadcn@latest add https://beui.dev/r/tooltip.json
Popover component

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. …

npx shadcn@latest add https://beui.dev/r/popover.json
Morphing Modal component

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

npx shadcn@latest add https://beui.dev/r/morphing-modal.json
Text Animation Text Reveal component

Word or character reveal with spring slide-up and blur.

npx shadcn@latest add https://beui.dev/r/text-reveal.json
Text Animation Text Shimmer component

Gradient sweep across text for loading or emphasis.

npx shadcn@latest add https://beui.dev/r/text-shimmer.json
Text Animation Text Cascade component

Letter-by-letter slot roll for standalone text — old letters drop away as new ones land, left to right.

npx shadcn@latest add https://beui.dev/r/text-cascade.json
Number Animation Number Ticker component

Slot-machine rolling digits with staggered entry.

npx shadcn@latest add https://beui.dev/r/number-ticker.json
Number Animation Animated Number component

Spring-driven count-up triggered when in view.

npx shadcn@latest add https://beui.dev/r/animated-number.json
Animated Badge component

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

npx shadcn@latest add https://beui.dev/r/animated-badge.json
Action Swap Cascade component

Letter-by-letter slot roll — the old label's letters drop away as the new ones land, left to right.

npx shadcn@latest add https://beui.dev/r/action-swap-cascade.json
Action Swap Blur component

Copy-button style swap with blur, opacity and scale.

npx shadcn@latest add https://beui.dev/r/action-swap-blur.json
Action Swap Roll component

The next text or icon rolls in from below with blur.

npx shadcn@latest add https://beui.dev/r/action-swap-roll.json
Animated Toast Stack component

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

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

Theme toggle button with a full-page rectangle clip-path reveal via the View Transition API.

npx shadcn@latest add https://beui.dev/r/theme-toggle.json
Bouncy Accordion component

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

npx shadcn@latest add https://beui.dev/r/bouncy-accordion.json
Drawer component

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

npx shadcn@latest add https://beui.dev/r/drawer.json
Scroll Animation Smooth Scroll component

Smooth-scroll provider over Lenis with a useSmoothScroll hook exposing scroll offset, progress and velocity. Reduced-motion safe.

npx shadcn@latest add https://beui.dev/r/smooth-scroll.json
Scroll Animation Scroll Progress component

Reading-progress indicator — fixed bar or circular ring — driven by scroll position via useSmoothScroll, with spring smoothing.

npx shadcn@latest add https://beui.dev/r/scroll-progress.json
Scroll Animation Parallax component

Wrapper that drifts its children at a speed factor as they cross the viewport, on either axis. Reduced-motion safe.

npx shadcn@latest add https://beui.dev/r/parallax.json
Scroll Animation Scroll To component

Button that smooth-scrolls to a target (offset, selector or element) via the active SmoothScroll provider; reduced-motion jumps instantly.

npx shadcn@latest add https://beui.dev/r/scroll-to.json
Scroll Animation Scroll Reveal component

Reveals its children with a spring slide and blur as they enter the viewport, once or every time. Reduced-motion keeps a fade.

npx shadcn@latest add https://beui.dev/r/scroll-reveal.json
Range Slider component

Range slider with tick dots and a bouncy vertical-bar thumb that glides between snapped steps; drag and keyboard control, reduced-motion safe.

npx shadcn@latest add https://beui.dev/r/range-slider.json
Table Data Table component

10k virtualized rows with sortable headers, row selection, column resize and reorder.

npx shadcn@latest add https://beui.dev/r/table.json
Table Editable Table component

Edit cells inline and insert or delete rows and columns via border handles; the table re-renders from the updated data and column defs.

npx shadcn@latest add https://beui.dev/r/table-editable.json
Table Async Table component

Loads pages on demand — skeleton rows on first load, then infinite scroll via onEndReached as the virtualized list nears the bottom.

npx shadcn@latest add https://beui.dev/r/table-async.json
Shader Background component

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

npx shadcn@latest add https://beui.dev/r/shader-background.json
Cylinder Carousel component

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 sprin…

npx shadcn@latest add https://beui.dev/r/cylinder-carousel.json
Loader component

Loading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs, newton, helix, percent, and five termina…

npx shadcn@latest add https://beui.dev/r/loader.json
Multi-chain Swap block

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

npx shadcn@latest add https://beui.dev/r/swap.json
Dynamic Island block

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

npx shadcn@latest add https://beui.dev/r/dynamic-island.json
Command Palette block

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

npx shadcn@latest add https://beui.dev/r/command-palette.json
Expandable Action Bar block

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

npx shadcn@latest add https://beui.dev/r/expandable-action-bar.json
Overflow Actions block

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

npx shadcn@latest add https://beui.dev/r/overflow-actions.json
Expandable Tabs block

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.

npx shadcn@latest add https://beui.dev/r/expandable-tabs.json
Swipeable List block

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

npx shadcn@latest add https://beui.dev/r/swipeable-list.json
File Upload block

Drag-and-drop upload queue with progress rows, retry/remove actions and reduced-motion-safe state changes.

npx shadcn@latest add https://beui.dev/r/file-upload.json
Prediction Market block

Prediction market trade ticket with buy/sell modes, outcome prices, rolling amount entry, quick add chips and trade states.

npx shadcn@latest add https://beui.dev/r/prediction-market.json
Wallet Card block

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, c…

npx shadcn@latest add https://beui.dev/r/wallet-card.json
OTP Input block

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

npx shadcn@latest add https://beui.dev/r/otp-input.json
Bloom Menu block

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.

npx shadcn@latest add https://beui.dev/r/bloom-menu.json
Feedback Widget block

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

npx shadcn@latest add https://beui.dev/r/feedback-widget.json
404 / Not Found Glitch block

Digits scramble through random glyphs before resolving, with a chromatic split on hover.

npx shadcn@latest add https://beui.dev/r/not-found-glitch.json
404 / Not Found Magnetic block

Each digit is cursor-attracted via the Magnetic wrapper and springs back on leave.

npx shadcn@latest add https://beui.dev/r/not-found-magnetic.json
404 / Not Found Spotlight block

A dark panel where a cursor-tracked spotlight reveals the bright code from a dim base.

npx shadcn@latest add https://beui.dev/r/not-found-spotlight.json
404 / Not Found Stacked block

A code card over a hidden stack that fans out with a spring on hover.

npx shadcn@latest add https://beui.dev/r/not-found-stacked.json