B
beUI
Action Swap Bluraction-swap-blurCopy-button style swap with blur, opacity and scale.
Action Swap Cascadeaction-swap-cascadeLetter-by-letter slot roll — the old label's letters drop away as the new ones land, left to right.
Action Swap Rollaction-swap-rollThe next text or icon rolls in from below with blur.
Adaptive Stepperadaptive-stepperComposable numeric stepper whose fixed footprint adapts at its minimum and maximum while the value rolls between steps.
Agent Activityagent-activityOne adaptive activity stream for reasoning, searches, tool calls, structured execution traces, or a chronological mix.
Agent Loading States Agent Progressagent-progressA compact activity glyph, action verb, and live tabular timer for longer-running agent work.
AI Sidebarai-sidebarA collapsible AI workspace sidebar for folders, projects, files, and bookmarks with keyboard navigation, optimistic moves, inline rename, and overflow-aware labels.
Animated AlertalertComposable feedback with smooth transitions.
Animated Badgeanimated-badgeStatus badge with animated state icons, pulse feedback and compact size variants.
Number Animation Animated Numberanimated-numberSpring-driven count-up triggered when in view.
Animated Sidebaranimated-sidebarA composable application sidebar with morphing nested navigation that folds into an animated icon rail on desktop and becomes a focus-managed sheet on mobile.
Animated Toast Stackanimated-toast-stackStacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.
Approval Cardapproval-cardA human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows.
Arc Pickerarc-pickerRadial text picker with top, bottom, left or right curves, smooth wheel movement and live selection on each scroll step. One persistent bracket frame grows and squeezes around each label. Supports drag momentum, keyboard input, disabled choices, controlled or uncontrolled values, forms and reduced motion.
Aspect Ratioaspect-ratioResponsive media with smooth aspect ratio transitions.
Bar Chartbar-chartGrouped, stacked and horizontal bars that grow in, rescale and reorder with springs.
Bottom Sheetbottom-sheetVaul-inspired draggable bottom sheet with snap points, inertia and glass surface.
Bounce Sidebarbounce-sidebarA vertical sidebar whose active dot jumps between destinations on a curved, spring-loaded path.
Bouncy Accordionbouncy-accordionSingle-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.
Animated BreadcrumbbreadcrumbComposable breadcrumb navigation with soft path transitions, a hoverable overflow dropdown for long trails, custom separators, and router-link support.
Bump Chartbump-chartAnimated rankings with curved paths, interactive rank dots, and tooltips.
Button Buttonbutton-basePress scale, hover lift, variants and sizes.
Button Magnetic Buttonbutton-magneticButton composed with the Magnetic wrapper for cursor-attracted pull.
Button Metallic Buttonbutton-metallicA neutral button surface framed by a pronounced chrome rim with a straight traveling reflection.
Button Stateful Buttonbutton-statefulIdle → loading → success / error with blur-swap slots and morphing width.
Candlestick Chartcandlestick-chartLive OHLC candles with volume, a last-price line, and a crosshair readout.
CardComposable card with header, title, description, action, content and footer parts. Outlined or muted surfaces, standard or compact spacing, and an opt-in selectable state with press feedback that composes with Checkbox, Radio and Button.
Center Morph Modalcenter-morph-modalA 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.
Chat Appchat-appA complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated media, sources, and prompt input.
CheckboxForm choice control with a draw-on checkmark, spring press feedback and indeterminate state support.
Text Animation Dia Text Animationchromatic-text-revealA Dia-inspired text effect with a fixed sentence prefix and a cycling final word revealed by a colorful sweep.
CitationsInline citation markers paired with a collapsible, progressively rendered reference collection for grounded agent responses.
Code Blockcode-blockA syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.
Animated CollapsiblecollapsibleExpandable content with a smooth reveal.
Color Pickercolor-pickerComposable color picker whose trigger chip morphs into the saturation and brightness area. A loupe lifts off each thumb while you drag. Includes hue and opacity sliders, hex, RGB and HSL fields, an eye dropper, presets, full keyboard control, and a controlled or uncontrolled value.
Animated Color Selectorcolor-selectorComposable color swatches with a spring-gliding selection ring, press feedback, native radio keyboard navigation, and controlled or uncontrolled state.
ComboboxSearchable combobox with a morphing portal, grouped filtering, keyboard navigation, and controlled or uncontrolled state.
Composition Chartcomposition-chartStacked bar and area shares with period tooltips and a compact interactive legend.
Animated Context Menucontext-menuComposable context-menu primitives with a pointer-origin clip morph, a gliding active row, checkbox and radio choices, keyboard navigation, typeahead, and long-press support.
Cylinder Carouselcylinder-carouselA 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.
Date Range Pickerdate-range-pickerComposable date range picker with root, trigger, popover content, calendar, header, grid, summary, footer, clear and preset parts, plus a shared state hook. Compact inline and dropdown compositions, direct month and year selection, and full keyboard navigation.
Number Animation Digit Swapdigit-swapFixed-slot digits and mask glyphs that roll on change with controllable direction, stagger, replay, and suffix emphasis.
DockmacOS-style dock with grouped actions and a gliding active pill.
Donut Chartdonut-chartRounded share segments with a linked center readout and legend.
DrawerSide panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.
Expandable Controlexpandable-controlClick-to-expand button and chip controls that reveal a label or trailing action through spring layout continuity.
Animated CTA Buttons Expanding Arrow Buttonexpanding-arrow-buttonAn accent tile that expands into a dotted-arrow trail on hover or focus.
File Difffile-diffA syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse.
File Treefile-treeComposable file and folder primitives with springing branches, a gliding selection, and complete keyboard navigation.
Funnel Chartfunnel-chartVertical and horizontal funnels with curved stages and animated number tooltips.
Heat Calendarheat-calendarComposable 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.
Animated CTA Buttons Hold Action Buttonhold-action-buttonHold to complete with a vertical or horizontal liquid fill; release early to cancel.
Image Generationimage-generationA stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift.
InputText input with label, left/right icons, optional stable error row, error shake and success check draw.
Line Chartline-chartLine and area charts that morph with your data, with a snapping crosshair and value tooltips.
Liquidity Heatmapliquidity-heatmapAnimated liquidity bands across price and time, with a price trace and depth tooltips.
LoaderLoading 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.
MarqueeInfinite horizontal or vertical scroll with pause-on-hover.
MessageComposable conversation primitives for message rows, grouped bubbles, avatars, metadata, live markers, and a mount-only trailing-edge pop-up for newly sent rows.
Message Bubblemessage-bubbleA focused conversational surface with visual tones, independent alignment, grouped messages, expandable content, and interactive link or button support.
Message Scrollermessage-scrollerA reader-aware conversation viewport that follows streamed output at the live edge and releases control when the reader moves away.
Image Viewer Morphingmorphing-lightboxA thumbnail-connected image viewer with composable gallery, thumbnail, content, caption and navigation parts, plus a shared state hook. Expand into the full-size image and return to the thumbnail on close, with swipe navigation, zoom and pan.
Morphing Modalmorphing-modalFamily-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content.
Multi Selectmulti-selectComposable multi-select primitives with searchable options, removable animated tokens, and a morphing collision-aware panel.
Number Animation Number Tickernumber-tickerSlot-machine rolling digits with staggered entry.
Order Bookorder-bookAnimated order book with bid and ask depth, spread, and volume balance.
Scroll Animation ParallaxparallaxWrapper that drifts its children at a speed factor as they cross the viewport, on either axis. Reduced-motion safe.
Popover Gooey PopoverpopoverComposable Popover, PopoverTrigger, PopoverContent; the panel oozes out of the trigger through an SVG goo filter with a liquid neck, crisp content fading in on top. Click or hover, controlled or uncontrolled.
Popover Morph Popoverpopover-morphComposable MorphPopover, MorphPopoverTrigger, MorphPopoverContent. The full-size panel reveals from the corner nearest the trigger on one synchronized spring clip, keeping content and borders unscaled, then retraces the clip on close. Clip-path and its drop-shadow may paint. Side/align aware, controlled or uncontrolled.
Preview Railpreview-railCodex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.
Price Target Fanprice-target-fanComposable 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.
Prompt Inputprompt-inputAn auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states.
Pull to Refreshpull-to-refreshNative-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.
Radio GroupradioSingle-select choice control with a gliding layoutId indicator dot and spring press feedback.
Range Slider Range Sliderrange-sliderTick dots, and a vertical-bar thumb that bounces as it lands on each step.
Range Slider Bubble Sliderrange-slider-bubbleGrab the thumb and a value bubble pops out of it. The bubble tilts and squashes with how fast you drag, then settles upright.
Range Slider Fluid Sliderrange-slider-fluidNo thumb. The fill slides behind a rounded liquid cap, and the label flips color wherever the fill covers it.
Range Slider Inline Sliderrange-slider-inlineAn inset fill and inline label and value. Ten evenly spaced stops span the track; markers under text stay hidden but remain interactive, and the thumb parts around either label as it passes.
Range Slider Ruler Sliderrange-slider-rulerThe needle stays put and the scale scrolls under it. A flick keeps going and settles on the nearest tick. Fractional steps read at the step's own precision.
Range Slider Wave Sliderrange-slider-waveEqualizer bars peak around the handle and drop back once it passes, so the value moves down the track as a wave.
Agent Loading States Reasoning Textreasoning-textShimmering reasoning copy with an ASCII loader and cascade, phrase-swap, or per-letter scramble transitions.
Returns Calendarreturns-calendarComposable monthly returns calendar with Grid and Tooltip parts, controlled month or year selections, and compounded totals. Supply your own years and monthly percentages.
Sankey Chartsankey-chartWeighted flows between stages that draw in and morph with your data.
Scroll Animation Scroll Progressscroll-progressReading-progress indicator — fixed bar or circular ring — driven by scroll position via useSmoothScroll, with spring smoothing.
Scroll Animation Scroll Revealscroll-revealReveals its children with a spring slide and blur as they enter the viewport, once or every time. Reduced-motion keeps a fade.
Scroll Animation Scroll Toscroll-toButton that smooth-scrolls to a target (offset, selector or element) via the active SmoothScroll provider; reduced-motion jumps instantly.
Select SelectselectComposable primitives (Select, SelectTrigger, SelectValue, SelectContent, SelectItem); the panel pinches off the trigger and separates, with a short, shared row reveal. Position-aware (opens upward when needed).
Select Morph Selectselect-morphComposable primitives (MorphSelect, MorphSelectTrigger, MorphSelectValue, MorphSelectContent, MorphSelectItem) where the trigger morphs into the panel via a shared layoutId — one continuous surface that grows open and shrinks back, never detaching.
Shader Backgroundshader-backgroundCanvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated variants.
Shared Layout Backgroundshared-layout-bgA pill that glides between hovered items via motion's shared layout, with blur enter/exit.
Animated CTA Buttons Slide Action Buttonslide-action-buttonDrag the thumb to the end to confirm an action; release early to spring back.
Scroll Animation Smooth Scrollsmooth-scrollSmooth-scroll provider over Lenis with a useSmoothScroll hook exposing scroll offset, progress and velocity. Reduced-motion safe.
Sortable Listsortable-stackComposable sortable list with group, item, drag handle, content and undo parts, plus a shared state hook. Spring layout, keyboard reordering, accessible position announcements, and controlled or uncontrolled items.
SparklineA compact inline trend for stat cards and tables, with a change badge and optional readout.
Status Barstatus-barAnimated status history with rounded bars and period tooltips.
Streaming Responsestreaming-responseA stable response surface with completion actions, rendered content, and an expandable source summary.
SwitchToggle with a spring-driven thumb and press feedback.
Table Data Tabletable10k virtualized rows with sortable headers, row selection, column resize and reorder.
Table Async Tabletable-asyncLoads pages on demand — skeleton rows on first load, then infinite scroll via onEndReached as the virtualized list nears the bottom.
Table Editable Tabletable-editableEdit cells inline and insert or delete rows and columns via border handles; the table re-renders from the updated data and column defs.
TabsPill, segment or underline tabs with a spring layoutId indicator and optional icons.
Text Animation Text Cascadetext-cascadeLetter-by-letter slot roll for standalone text — old letters drop away as new ones land, left to right.
Text Animation Text Revealtext-revealWord or character reveal with spring slide-up and blur.
Text Animation Text Scrambletext-scrambleA controlled character scramble that resolves changed text while keeping its final value accessible.
Text Animation Text Shimmertext-shimmerGradient sweep across text for loading or emphasis.
Theme Toggletheme-toggleTheme 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.
Agent Loading States Thinking Shimmerthinking-shimmerA quiet shimmer that keeps the agent's current status readable while work continues.
Tilt Cardtilt-card3D perspective tilt on hover with cursor-tracked glare.
TimelineA draggable timeline of dated events around a focused card.
Todo Listtodo-listA collapsible agent task plan with morphing status marks, a completion count, compact metadata, and smooth list updates.
Tool Approvaltool-approvalA human-in-the-loop permission card for reviewing tool details, allowing once, remembering access, or denying execution.
Tool Resulttool-resultA lightweight execution disclosure for syntax-highlighted terminal output and request responses that collapses into a compact completed state.
TooltipComposable hover, focus and tap tooltip with a subtle scale and fade, collision-aware side and alignment, an optional arrow, a pointer corridor onto hoverable content, one label at a time, keyboard-only focus reveal and optional cursor tracking.
TreemapProportional tiles that morph with your data, with value and share tooltips.
Voice Orbvoice-orbBreathing liquid voice visualization with flowing highlights, custom pigments and a soft, voice-reactive silhouette. Accepts a normalized level, MotionValue or caller-owned audio analyser, pauses offscreen and supports reduced motion.
Volume Profilevolume-profileAnimated volume by price, with point of control and value area highlights.
Wheel Pickerwheel-pickeriOS-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.