---
name: "@beui"
slug: "beui"
description: "Bespoke motion components for React. Copy-paste components with shadcn-compatible installs, Tailwind CSS v4, and Motion."
category: "Animated components"
tags: ["animation", "auth", "backgrounds", "buttons", "cards", "crypto", "dashboard", "forms", "loaders", "media", "navigation", "overlays", "pro-available", "retro", "tables", "text-effects", "theming"]
framework: "react"
license: "MIT"
author: "starc007"
website: "https://beui.dev"
github: "https://github.com/starc007/ui-components"
registry: "https://beui.dev/r/registry.json"
pro: true
pro_url: "https://pro.beui.dev/?utm_source=beui&utm_medium=referral&utm_campaign=free_to_pro&utm_content=navbar"
github_stars: 608
component_count: 76
generated_at: "2026-07-28T08:00:50.948Z"
---

# @beui

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

## Links

- Website: https://beui.dev
- GitHub: https://github.com/starc007/ui-components
- Registry JSON: https://beui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/beui
- This file: https://sh4dcn.vercel.app/md/beui.md
- Pro / pricing: https://pro.beui.dev/?utm_source=beui&utm_medium=referral&utm_campaign=free_to_pro&utm_content=navbar

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://beui.dev/r/registry.json
pnpm dlx shadcn@latest add https://beui.dev/r/registry.json
bunx shadcn@latest add https://beui.dev/r/registry.json
# clone the source repo
git clone https://github.com/starc007/ui-components.git
# fetch the raw registry index
curl -s https://beui.dev/r/registry.json
```

## Components (76)

| name | type | description | install |
| --- | --- | --- | --- |
| tilt-card | registry:component | 3D perspective tilt on hover with cursor-tracked glare. | `npx shadcn@latest add https://beui.dev/r/tilt-card.json` |
| button-base | registry:component | Press scale, hover lift, variants and sizes. | `npx shadcn@latest add https://beui.dev/r/button-base.json` |
| button-stateful | registry: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 | registry:component | Button composed with the Magnetic wrapper for cursor-attracted pull. | `npx shadcn@latest add https://beui.dev/r/button-magnetic.json` |
| hold-action-button | registry:component | Hold to complete with a vertical or horizontal liquid fill; release early to cancel. | `npx shadcn@latest add https://beui.dev/r/hold-action-button.json` |
| slide-action-button | registry:component | Drag the thumb to the end to confirm an action; release early to spring back. | `npx shadcn@latest add https://beui.dev/r/slide-action-button.json` |
| marquee | registry:component | Infinite horizontal or vertical scroll with pause-on-hover. | `npx shadcn@latest add https://beui.dev/r/marquee.json` |
| tabs | registry:component | Pill, segment or underline tabs with a spring layoutId indicator. | `npx shadcn@latest add https://beui.dev/r/tabs.json` |
| switch | registry:component | Toggle with a spring-driven thumb and press feedback. | `npx shadcn@latest add https://beui.dev/r/switch.json` |
| input | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface. | `npx shadcn@latest add https://beui.dev/r/bottom-sheet.json` |
| pull-to-refresh | registry:component | Native-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling. | `npx shadcn@latest add https://beui.dev/r/pull-to-refresh.json` |
| shared-layout-bg | registry: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` |
| bounce-sidebar | registry:component | A vertical sidebar whose active dot jumps between destinations on a curved, spring-loaded path. | `npx shadcn@latest add https://beui.dev/r/bounce-sidebar.json` |
| preview-rail | registry:component | Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview. | `npx shadcn@latest add https://beui.dev/r/preview-rail.json` |
| dock | registry:component | macOS-style dock with grouped actions and a gliding active pill. | `npx shadcn@latest add https://beui.dev/r/dock.json` |
| tooltip | registry:component | Hover or focus tooltip with blur enter/exit and spring spawn. | `npx shadcn@latest add https://beui.dev/r/tooltip.json` |
| context-menu | registry:component | Composable context-menu primitives with a pointer-origin clip morph, a gliding active row, checkbox and radio choices, keyboard navigation, typeahead, and long… | `npx shadcn@latest add https://beui.dev/r/context-menu.json` |
| popover | registry:component | Composable Popover, PopoverTrigger, PopoverContent; the panel oozes out of the trigger through an SVG goo filter with a liquid neck, crisp content fading in on… | `npx shadcn@latest add https://beui.dev/r/popover.json` |
| popover-morph | registry:component | Composable MorphPopover, MorphPopoverTrigger, MorphPopoverContent; the panel is laid out full size but clipped to the corner nearest the trigger, then unclips … | `npx shadcn@latest add https://beui.dev/r/popover-morph.json` |
| morphing-modal | registry: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` |
| center-morph-modal | registry:component | 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. | `npx shadcn@latest add https://beui.dev/r/center-morph-modal.json` |
| chromatic-text-reveal | registry:component | A Dia-inspired text effect with a fixed sentence prefix and a cycling final word revealed by a colorful sweep. | `npx shadcn@latest add https://beui.dev/r/chromatic-text-reveal.json` |
| text-reveal | registry:component | Word or character reveal with spring slide-up and blur. | `npx shadcn@latest add https://beui.dev/r/text-reveal.json` |
| text-shimmer | registry:component | Gradient sweep across text for loading or emphasis. | `npx shadcn@latest add https://beui.dev/r/text-shimmer.json` |
| text-cascade | registry: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-ticker | registry:component | Slot-machine rolling digits with staggered entry. | `npx shadcn@latest add https://beui.dev/r/number-ticker.json` |
| animated-number | registry:component | Spring-driven count-up triggered when in view. | `npx shadcn@latest add https://beui.dev/r/animated-number.json` |
| animated-badge | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |
| smooth-scroll | registry: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-progress | registry: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` |
| parallax | registry: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-to | registry: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-reveal | registry: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 | registry: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` |
| wheel-picker | registry:component | 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 d… | `npx shadcn@latest add https://beui.dev/r/wheel-picker.json` |
| table | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |
| infinite-masonry | registry:block | Responsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end. | `npx shadcn@latest add https://beui.dev/r/infinite-masonry.json` |
| notification-stack | registry:block | Compact notification cards that spring from a stacked summary into a readable list on hover, focus or tap. | `npx shadcn@latest add https://beui.dev/r/notification-stack.json` |
| knockout-wheel | registry:block | The tournament drawn radially. The champion holds the hub, each round is a ring further out, and the teams themselves form the rim. Nodes spring in ring by rin… | `npx shadcn@latest add https://beui.dev/r/knockout-wheel.json` |
| knockout-bracket | registry:block | Pages one round at a time. The leftmost round stacks at a fixed rhythm, each later round centers between its two feeder matches, and cards, elbow connectors, h… | `npx shadcn@latest add https://beui.dev/r/knockout-bracket.json` |
| availability-scheduler | registry:block | Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrol… | `npx shadcn@latest add https://beui.dev/r/availability-scheduler.json` |
| swap | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |
| not-found-glitch | registry: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` |
| not-found-magnetic | registry: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` |
| not-found-spotlight | registry: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` |
| not-found-stacked | registry: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` |
| not-found-terminal | registry:block | A terminal window that types a failed cd command and a 404 status, with a blinking caret. | `npx shadcn@latest add https://beui.dev/r/not-found-terminal.json` |

## For AI agents

```text
You are adding components from @beui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/beui.md) for the component list.
2. Fetch the machine-readable index: https://beui.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: beui).
```