Dev Design Library

beUI components

Motion components for React. Copy, paste, done.

Components
155
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
1,723
Source
https://github.com/starc007/ui-components
Website
https://beui.dev
Install
npx shadcn@latest add @beui/{name}

All beUI components

  • Action Swap
  • Action Swap Blur
  • Action Swap Cascade
  • Action Swap Roll
  • Adaptive Stepper: Composable numeric stepper whose fixed footprint adapts at its minimum and maximum while the value rolls between steps.
  • Agent Activity: Renders progressive agent work as message content.
  • Agent Code
  • Agent Disclosure: Shared transform-only reveal for collapsible agent content.
  • Ai Sidebar: Composes the shell with editable projects, folders, files, and bookmarks.
  • Alert: Feedback that eases in and folds away.
  • Animated Badge: Status badge with animated state icons, pulse feedback and compact size variants.
  • Animated Number
  • Animated Sidebar: A composable application sidebar with morphing nested navigation that folds into an animated icon rail on desktop and becomes a…
  • Animated Toast Stack: Stacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.
  • Approval Card: Collects structured human input during a paused run.
  • Arc Picker: Radial text picker with top, bottom, left or right curves, smooth wheel movement and live selection on each scroll step. One persistent…
  • Aspect Ratio: Responsive media with smooth aspect ratio transitions.
  • Attachment Upload: A mixed attachment workspace with a dropzone, staggered file and image rows, animated upload, success, failure, retry and removal…
  • Availability Scheduler: Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion…
  • Avatar Group: Overlapping avatars that fan apart on hover, lift with a name tooltip, and expand from a +N count to show everyone.
  • Bar Chart: Grouped, stacked and horizontal bars that grow in, rescale and reorder with springs.
  • Bloom Menu: A button that morphs open into a menu and blooms iris-out from the center, the grid revealing in every direction with radially staggered…
  • Bottom Sheet: Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface.
  • Bounce Sidebar: A vertical sidebar whose active dot jumps between destinations on a curved, spring-loaded path.
  • Bouncy Accordion: Single-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.
  • Breadcrumb: Composable breadcrumb navigation with soft path transitions, a hoverable overflow dropdown for long trails, custom separators, and…
  • Bump Chart: Animated rankings with curved paths, interactive rank dots, and tooltips.
  • Button: Spring press, ripple, icons and a stateful variant.
  • Candlestick Chart: Live OHLC candles with volume, a last-price line, and a crosshair readout.
  • Card: Composable surfaces, selectable with press feedback.
  • Card Dealer: A card table with a face-down deck, a fanned hand and a discard pile. Cards arc across the table between them and flip in flight, hop over…
  • Card Folder: A landscape card tucked into a stitched purse pocket that lifts forward as the purse compresses into its bottom seam, with controlled open…
  • Casino: Shared chrome for the casino games: balance, bet controls, sound toggle and result dialogs.
  • Center Morph Modal: A composable modal whose full-size surface unfolds from its exact center toward every edge, then folds back the same way with an inset…
  • Chat App: A complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated…
  • Checkbox: Form choice control with a draw-on checkmark, spring press feedback and indeterminate state support.
  • Chromatic Text Reveal
  • Citations: Connects completed claims to supporting sources.
  • Code Block: Provides the shared syntax presentation for source lines.
  • Collapsible: Expandable content with a smooth reveal.
  • Color Picker: A popover picker with a loupe under your finger.
  • Color Selector: Composable color swatches with a spring-gliding selection ring, press feedback, native radio keyboard navigation, and controlled or…
  • Combobox: Searchable combobox with a morphing portal, grouped filtering, keyboard navigation, and controlled or uncontrolled state.
  • Command Palette: ⌘K palette with fuzzy filter, spring-animated active row and glass surface.
  • Composition Chart: Stacked bar and area shares with period tooltips and a compact interactive legend.
  • Context Menu: Composable context-menu primitives with a pointer-origin clip morph, a gliding active row, checkbox and radio choices, keyboard…
  • Crash: A crash game: a paper plane flies the multiplier up a curve until it crashes at a random point. Cash out before it does. After a cash out…
  • Cylinder Carousel: 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…
  • Date Range Picker: Composable date range picker with root, trigger, popover content, calendar, header, grid, summary, footer, clear and preset parts, plus a…
  • Digit Swap: Fixed-slot digits and mask glyphs that roll on change with controllable direction, stagger, replay, and suffix emphasis.
  • Dock: macOS-style dock with grouped actions and a gliding active pill.
  • Donut Chart: Rounded share segments with a linked center readout and legend.
  • Drawer: Side panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.
  • Dynamic Island: iOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades.
  • Expandable Action Bar: Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.
  • Expandable Control: Click-to-expand button and chip controls that reveal a label or trailing action through spring layout continuity.
  • Expandable Tabs: 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…
  • Expanding Arrow Button
  • Feedback Widget: Corner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states.
  • File Diff: Explains additions and removals around highlighted code.
  • File Tree: Composable file and folder primitives with springing branches, a gliding selection, and complete keyboard navigation.
  • File Upload
  • Funnel Chart: Vertical and horizontal funnels with curved stages and animated number tooltips.
  • Heat Calendar: Compose Grid, Tooltip and Legend, or omit children for the complete chart.
  • Hold Action Button
  • Image Generation: A stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift.
  • Infinite Masonry: Responsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end.
  • Input: Text input with label, left/right icons, optional stable error row, error shake and success check draw.
  • Knockout Bracket: Pages one round at a time. The leftmost round stacks at a fixed rhythm, each later round centers between its two feeder matches, and…
  • Knockout Wheel: The tournament drawn radially. The champion holds the hub, each round is a ring further out, and the teams themselves form the rim. Nodes…
  • Line Chart: Line and area charts that morph with your data, with a snapping crosshair and value tooltips.
  • Liquid: Gooey container (Liquid and LiquidItem): items placed inside merge into one liquid silhouette through an SVG filter.
  • Liquidity Heatmap: Animated liquidity bands across price and time, with a price trace and depth tooltips.
  • Loader: Loading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs, newton, helix…
  • Loading States: Covers work before a durable plan is available.
  • Magnetic: Button composed with the Magnetic wrapper for cursor-attracted pull.
  • Marquee: Infinite horizontal or vertical scroll with pause-on-hover.
  • Message: Adds sender alignment, metadata, and avatar placement.
  • Message Bubble: Supplies the visual surface inside the row.
  • Message Context
  • Message Scroller: Can fill the inset with the selected conversation.
  • Mines: A mines board: pick tiles to find gems, each raising the multiplier, and cash out before you hit a mine. The round's end reveals every tile.
  • Morphing Lightbox
  • Morphing Modal: Family-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content.
  • Morphing Search: Search field or compact icon that morphs into a glass results surface, whether opened by click or keyboard shortcut.
  • Morphing Search Chips
  • Morphing Tabs: Reorderable tabs whose selected item grows into a white content surface, with the active shape gliding as tabs move and a shared morph…
  • Multi Select: Composable multi-select primitives with searchable options, removable animated tokens, and a morphing collision-aware panel.
  • Not Found
  • Notification Stack: Compact notification cards that spring from a stacked summary into a readable list on hover, focus or tap.
  • Number Ticker
  • Order Book: Animated order book with bid and ask depth, spread, and volume balance.
  • Otp Input: One-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw.
  • Overflow Actions: Connected pill rail for primary actions that springs open to reveal extra controls.
  • Pagination: Page navigation with a gliding current-page pill, page numbers that slide as the window moves, and ellipses that jump several pages.
  • Parallax: Wrapper that drifts its children at a speed factor as they cross the viewport, on either axis. Reduced-motion safe.
  • Plinko: A Plinko board where balls drop through rows of pegs, bounce left or right off each one and land in a slot. Pegs flash when hit, the slot…
  • Popover
  • Popover Morph: Popover that grows out of its trigger button, sharing the same shape.
  • Popover Position
  • Prediction Market
  • Prediction Market Card: A listing surface with outcome CTAs and an independent bookmark toggle.
  • Preview Rail: Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.
  • Price Target Fan: Owns chart data and interaction; children may replace or rearrange the default parts.
  • Project Folder: An interactive project folder that opens its file fan on hover or focus, expands into a focus-managed overlay, then retraces the complete…
  • Prompt Input: Can anchor the composer beneath active resource content.
  • Pull To Refresh: Native-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.
  • Radio: Single-select choice control with a gliding layoutId indicator dot and spring press feedback.
  • Range Slider: A bar thumb that glides between steps.
  • Range Slider Bubble
  • Range Slider Fluid: Range slider with two thumbs and a fluid, springy fill between them.
  • Range Slider Inline
  • Range Slider Ruler
  • Range Slider Wave
  • Returns Calendar: Compose Grid and Tooltip, or omit children for the complete chart.
  • Sankey Chart: Weighted flows between stages that draw in and morph with your data.
  • Scroll Progress: Reading-progress indicator — fixed bar or circular ring — driven by scroll position via useSmoothScroll, with spring smoothing.
  • Scroll Reveal: Reveals its children with a spring slide and blur as they enter the viewport, once or every time. Reduced-motion keeps a fade.
  • Scroll To: Button that smooth-scrolls to a target (offset, selector or element) via the active SmoothScroll provider; reduced-motion jumps instantly.
  • Select: Choosing an option updates the value, clears the query, closes the listbox, and restores the selected label in the input.
  • Select Morph: Select whose trigger expands and changes shape into the list of options.
  • Shader Background: Canvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop…
  • Shared Layout Bg: A pill that glides between hovered items via motion's shared layout, with blur enter/exit.
  • Signup Form: 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…
  • Slide Action Button
  • Slide Game: A slide game: set a bet and a target, then a reel of multiplier cards races past two tabs at the center of the stage, tilting in 3D as…
  • Smooth Scroll: Smooth-scroll provider over Lenis with a useSmoothScroll hook exposing scroll offset, progress and velocity. Reduced-motion safe.
  • Sortable List: Stable item ids keep focus and content attached to their row during sorting.
  • Sortable Stack: Composable sortable list with group, item, drag handle, content and undo parts, plus a shared state hook. Spring layout, keyboard…
  • Sparkline: A compact inline trend for stat cards and tables, with a change badge and optional readout.
  • Status Bar: Animated status history with rounded bars and period tooltips.
  • Streaming Response: Provides the active and completed response lifecycle.
  • Swap: Cross-chain swap widget with chain + token selectors, morphing views, animated flip and quote.
  • Swipeable List: Mobile-style list rows that swipe left or right to reveal contextual action buttons.
  • Switch: Toggle with a spring-driven thumb and press feedback.
  • Table
  • Tabs: Pill, segment or underline tabs with a spring layoutId indicator.
  • Text Cascade: Letter-by-letter slot roll for standalone text — the old letters drop away as the new ones land, left to right. Same motion as the…
  • Text Reveal
  • Text Scramble: A controlled character scramble that resolves changed text while keeping its final value accessible.
  • Text Shimmer: Text with a band of light sweeping across it in a loop.
  • Theme Toggle: Theme toggle button that repaints the whole page through the View Transition API — a rectangle or circle clip-path reveal, or slats that…
  • Tilt Card: 3D perspective tilt on hover with cursor-tracked glare.
  • Timeline: A draggable timeline of dated events around a focused card.
  • Todo List: Shows which planned work is paused by the decision.
  • Tool Approval: Temporarily replaces freeform input with scoped permission.
  • Tool Result: Presents the evidence produced by an active task.
  • Tooltip: Hover or focus tooltip with a subtle scale and fade, collision-aware placement, and optional cursor tracking.
  • Tooltip Surface: Presentation only: the unanimated parent owns measurement and positioning.
  • Treemap: Proportional tiles that morph with your data, with value and share tooltips.
  • Voice Orb: A liquid sphere that moves with your voice.
  • Volume Profile: Animated volume by price, with point of control and value area highlights.
  • Wallet Card: Wallet overview card with an account switcher and search that morph open from their triggers, a cascading balance with a live change pill…
  • Wheel Picker: iOS-style picker wheel: a 3D drum on native momentum scroll that snaps to the nearest notch, with wheel, drag and keyboard control…
  • Xy: Shared chart helpers: scales, axes and the XY layout the charts draw on.

Browse by category