Animated
Copy-button style swap with blur, opacity and scale.
ReactTailwindButton
beUI
Animated React components for product interfaces: spring count-ups, blur-and-roll label swaps, bloom menus, magnetic buttons, dynamic islands, toast stacks, morphing modals and scroll reveals.
71 published items
starc007
71 published items
Animated
Letter-by-letter slot roll: the old label's letters drop away as the new ones land, left to right.
ReactTailwindButton
Animated
The next text or icon rolls in from below with blur.
ReactTailwindButton
Animated
Status badge with animated state icons, pulse feedback and compact size variants.
ReactTailwind
Animated
Spring-driven count-up triggered when in view.
ReactTailwindText
Animated
Stacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.
ReactTailwind
Animated
Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrollable dropdown, and a copy menu clones hours to other days.
ReactTailwind
Animated
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.
ReactTailwind
Animated
Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface.
ReactTailwindOverlay
Animated
Single-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.
ReactTailwindAccordion
Animated
Button composed with the Magnetic wrapper for cursor-attracted pull.
ReactTailwindButton
Animated
Idle → loading → success / error with blur-swap slots and morphing width.
ReactTailwindButton
Glass
⌘K palette with fuzzy filter, spring-animated active row and glass surface.
ReactTailwind
Animated
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 springy glide and snap. Reduced-motion drops the glide.
ReactTailwindCarousel
Animated
iOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades.
ReactTailwind
Animated
Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.
ReactTailwindNavigation
Animated
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.
ReactTailwind
Animated
Corner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states.
ReactTailwind
Upload
Drag-and-drop upload queue with progress rows, retry/remove actions and reduced-motion-safe state changes.
ReactTailwind
Animated
Hold to complete with a vertical or horizontal liquid fill; release early to cancel.
ReactTailwindButton
Responsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end.
ReactTailwind
Chart
Google-style tournament bracket that pages one round at a time: the leftmost round stacks compactly while later rounds center between their feeder matches, with cards, elbow connectors, headers and container height animating to every new layout.
ReactTailwind
Loading 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.
ReactTailwindLoader
Animated
Family-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content.
ReactTailwindOverlay
Animated
Digits scramble through random glyphs before resolving, with a chromatic split on hover.
ReactTailwind
Animated
Each digit is cursor-attracted via the Magnetic wrapper and springs back on leave.
ReactTailwind
Animated
A dark panel where a cursor-tracked spotlight reveals the bright code from a dim base.
ReactTailwind
Animated
A code card over a hidden stack that fans out with a spring on hover.
ReactTailwind
Animated
A terminal window that types a failed cd command and a 404 status, with a blinking caret.
ReactTailwind
Animated
Compact notification cards that spring from a stacked summary into a readable list on hover, focus or tap.
ReactTailwind
Animated
Slot-machine rolling digits with staggered entry.
ReactTailwindText
Animated
Connected pill rail for primary actions that springs open to reveal extra controls.
ReactTailwindMenu
Wrapper that drifts its children at a speed factor as they cross the viewport, on either axis. Reduced-motion safe.
ReactTailwindBackground
Animated
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 top. Click or hover, controlled or uncontrolled.
ReactTailwindOverlay
Animated
Composable 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.
ReactTailwindOverlay
Prediction market trade ticket with buy/sell modes, outcome prices, rolling amount entry, quick add chips and trade states.
ReactTailwindCard
Animated
Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.
ReactTailwindNavigation
Animated
Native-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.
ReactTailwindList
Input
Single-select choice control with a gliding layoutId indicator dot and spring press feedback.
ReactTailwind
Input
Range slider with tick dots and a bouncy vertical-bar thumb that glides between snapped steps; drag and keyboard control, reduced-motion safe.
ReactTailwind
Animated
Reading-progress indicator, fixed bar or circular ring, driven by scroll position via useSmoothScroll, with spring smoothing.
ReactTailwind