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.
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 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.
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 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.
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.
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.
CitationscitationsInline 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.
ComboboxcomboboxSearchable combobox with a morphing portal, grouped filtering, keyboard navigation, and controlled or uncontrolled state.
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.
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.
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.
InputinputText input with label, left/right icons, optional stable error row, 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.
MessagemessageComposable 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.
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.
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 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.
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.
Streaming Responsestreaming-responseA stable response surface with completion actions, rendered content, and an expandable source summary.
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 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.
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.
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.