B
starc007/ui-components
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.
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.
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.
Button Buttonbutton-basePress scale, hover lift, variants and sizes.
Button Magnetic Buttonbutton-magneticButton composed with the Magnetic wrapper for cursor-attracted pull.
Button Stateful Buttonbutton-statefulIdle → loading → success / error with blur-swap slots and morphing width.
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.
CheckboxcheckboxForm 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.
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.
DockdockmacOS-style dock with grouped actions and a gliding active pill.
DrawerdrawerSide panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.
Animated CTA Buttons Hold Action Buttonhold-action-buttonHold to complete with a vertical or horizontal liquid fill; release early to cancel.
InputinputText input with label, left/right icons, error shake and success check draw.
LoaderloaderLoading 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.
MarqueemarqueeInfinite horizontal or vertical scroll with pause-on-hover.
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.
Number Animation Number Tickernumber-tickerSlot-machine rolling digits with staggered entry.
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 panel is laid out full size but clipped to the corner nearest the trigger, then unclips as one piece — a single-surface morph with a drop-shadow that hugs the shape. 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.
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 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.
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 staggered items. 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.
SwitchswitchToggle 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.
TabstabsPill, segment or underline tabs with a spring layoutId indicator.
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 Shimmertext-shimmerGradient sweep across text for loading or emphasis.
Theme Toggletheme-toggleTheme toggle button with a full-page rectangle clip-path reveal via the View Transition API.
Tilt Cardtilt-card3D perspective tilt on hover with cursor-tracked glare.
TooltiptooltipHover or focus tooltip with blur enter/exit and spring spawn.
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.