Skip to content

MotionVaultAnimated UI vault

Motion Sites

Full animated website templates

Category

Site Templates→

Top tags

#template #landing #hero #saas #feature #bento

Filter by tech

React Bits

Advanced animated components

Category

Top tags

#component #alt #skin #card #stack #tabs

Filter by tech

Uiverse

Buttons, loaders, toggles

Category

Top tags

#element #kit #button #form #loader #input

Filter by tech

Anime.js

Spring, drag & scroll motion

Category

Top tags

#animation #take #alt #text #scroll #canvas

Filter by tech

Aceternity UI

Glow cards, tilt, starfield…

Category

Top tags

#component #alt #skin #card #stack #tabs

Filter by tech

Motion Sites React Bits Uiverse Anime.js Aceternity UI Hall2023 · 1,342,092

2023 assets · 1,342,092 prompts copied

UI Elements/React

327 React ui elements — previewed live, shipped via prompt

Only react elements make this layer: each one runs live in a sandboxed iframe and ships with an AI prompt you can paste into Cursor, Claude Code or v0 to reproduce it 1:1 in your react project.

All UI Elements →Tailwind →

UI Elements⚛ TSX Live preview

Glow Slide Toggle · Mono Pearl

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Mono Pearl palette.

HTMLCSSReactAdvanced

Featured UI Elements⚛ TSX Live preview

Rotating conic glow border card

A 2px conic-gradient border slowly spins around a glass card via @property angle animation — pro upgrade cards.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Aurora Teal

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Aurora Teal palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Candy Pink

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Candy Pink palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Status Badge Chips · Deep Indigo

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Deep Indigo palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Terminal Copyable Command Block

A shell-command hash chip with a $ prompt and an inline copy button that flips to a green ✓ confirmation.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Equalizer Bars Loader · Crimson Heat

Five gradient bars pumping like an audio equalizer with staggered scaleY animation. Rendered in the Crimson Heat palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Mono Pearl

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Mono Pearl palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Draw-on Checkbox · Cyber Lime

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Cyber Lime palette.

HTMLCSSReactAdvanced

Featured UI Elements⚛ TSX Live preview

Striped Progress Bar · Rose Gold

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Rose Gold palette.

HTMLCSSJavaScriptAdvanced

Featured UI Elements⚛ TSX Live preview

Pop Star Rating · Ultra Violet

Interactive five-star rating with gradient-filled stars and a springy pop on select. Rendered in the Ultra Violet palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Glow Slide Toggle · Cyber Lime

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Cyber Lime palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Royal Gold

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Royal Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Deep Indigo

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Deep Indigo palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Draw-on Checkbox · Aurora Teal

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Aurora Teal palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Liquid Glow Range Slider · Candy Pink

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Candy Pink palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Mint Breeze

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Mint Breeze palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Striped Progress Bar · Deep Indigo

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Deep Indigo palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Sunset Amber

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Sunset Amber palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Liquid Glow Range Slider · Mint Breeze

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Mint Breeze palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Glow Slide Toggle · Crimson Heat

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Crimson Heat palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Floating Orb Empty State · Sunset Amber

A calming zero-state: drifting gradient orb with dashed orbit ring, empty copy and a soft CTA. Rendered in the Sunset Amber palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Glow Slide Toggle · Ultra Violet

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Ultra Violet palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Cyber Lime

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Cyber Lime palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Liquid Glow Range Slider · Royal Gold

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Royal Gold palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Striped Progress Bar · Crimson Heat

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Crimson Heat palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Floating Glow Input · Candy Pink

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Candy Pink palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Status Badge Chips · Mono Pearl

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Mono Pearl palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Rose Gold

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Rose Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Pop Star Rating · Cyber Lime

Interactive five-star rating with gradient-filled stars and a springy pop on select. Rendered in the Cyber Lime palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Equalizer Bars Loader · Candy Pink

Five gradient bars pumping like an audio equalizer with staggered scaleY animation. Rendered in the Candy Pink palette.

HTMLCSSReactAdvanced

Featured UI Elements⚛ TSX Live preview

Liquid Glow Range Slider · Ultra Violet

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Ultra Violet palette.

HTMLCSSJavaScriptAdvanced

Featured UI Elements⚛ TSX Live preview

Orbiting border beam card

A bright light travels around the card's border via an animated conic-gradient mask and @property angle.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Glow Button

Primary button with neon glow, hover lift and active press effect.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Gradient Border Button

Button with animated gradient border using a rotating conic background.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Shimmer Button

Button with a diagonal light sweep shimmer across its surface on hover.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Pulse Dot Badge

Small badge with a pulsing ring to signal live/active status.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Progress Bar Loading

Determinate progress bar with striped animation and percentage.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Toggle Switch

Accessible switch with knob travel animation and checked glow.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Aurora Teal

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Aurora Teal palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Frosted Glass Pricing Cards

Backdrop-blur pricing tiers floating over animated aurora blobs; the popular plan scales up with a gradient flag.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Floating Glow Input · Ocean Sky

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Ocean Sky palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Floating Glow Input · Royal Gold

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Royal Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Swift Command Palette · Crimson Heat

A ⌘K-style palette: type to filter actions, arrow keys to move, Enter to run — with shortcut hints. Rendered in the Crimson Heat palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Radio Card

Radio select styled as a card with ring highlight when chosen.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Floating Input

Input with floating label that lifts and shrinks on focus.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Search Input Icon

Search field with leading icon and clear button on input.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Tag Pill

Compact tag pill with optional remove icon on hover.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Tooltip Bubble

Hover tooltip with fade/scale entrance and arrow pointer.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Star Rating Input

Interactive star rating with hover preview and filled state.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Range Slider

Custom range slider with filled track and draggable thumb.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Stepper Counter

Quantity stepper with plus/minus buttons and animated value.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Skeleton Shimmer

Loading placeholder blocks with a sweeping shimmer overlay.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Avatar with Status

Round avatar with online/offline status dot and ring.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Crimson Heat

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Crimson Heat palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Swift Command Palette · Mono Pearl

A ⌘K-style palette: type to filter actions, arrow keys to move, Enter to run — with shortcut hints. Rendered in the Mono Pearl palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Equalizer Bars Loader · Royal Gold

Five gradient bars pumping like an audio equalizer with staggered scaleY animation. Rendered in the Royal Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Swift Command Palette · Ultra Violet

A ⌘K-style palette: type to filter actions, arrow keys to move, Enter to run — with shortcut hints. Rendered in the Ultra Violet palette.

HTMLCSSJavaScriptAdvanced

Featured UI Elements⚛ TSX Live preview

Clip-path shutter text reveal

Headline lines reveal left-to-right like a camera shutter opening, via animated inset clip-path.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Equalizer Bars Loader · Deep Indigo

Five gradient bars pumping like an audio equalizer with staggered scaleY animation. Rendered in the Deep Indigo palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Avatar Group

Overlapping avatar cluster with count chip and hover expand.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Initials Avatar

Gradient initials avatar with size variants and hover ring.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Badge Counter

Numeric badge for cart/notifications with pop animation on change.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Breadcrumb Dots

Trailing breadcrumb with collapse-to-dots and expand on hover.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Floating Glow Input · Sunset Amber

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Sunset Amber palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Divider with Label

Content divider with centered label and gradient line.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Input Group Button

Input with attached action button (e.g. copy or search).

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Password Strength Meter · UI Element

Password field with live strength bar and hint text.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Select Dropdown

Custom dropdown select with chevron rotation and option list.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Tag Input Field

Tag editor with removable chips and Enter-to-add.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Floating Orb Empty State · Ocean Sky

A calming zero-state: drifting gradient orb with dashed orbit ring, empty copy and a soft CTA. Rendered in the Ocean Sky palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Morphing Liquid Blob Button

Organic blob CTA whose border-radius melts and follows the cursor, with a rotating sheen on hover.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Status Badge Chips · Cyber Lime

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Cyber Lime palette.

HTMLCSSReactAdvanced

Featured UI Elements⚛ TSX Live preview

Glow Slide Toggle · Candy Pink

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Candy Pink palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Ocean Sky

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Ocean Sky palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Alert Callout

Info/success/warning/error callout with icon and dismiss.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Infinite Marquee

Seamless horizontal marquee of text or logos with pause on hover.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Text Gradient Header

Big heading with animated gradient text sweep.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Bordered Card Frame

Card with gradient border glow using border-image trick.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Animated Underline Link

Link with animated underline that sweeps in on hover.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Card Flip Tilt

Card with 3D tilt on hover and shine sweep.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Dot Pagination Dots

Carousel dot indicators with active dot expanding to a pill.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Scroll Progress Bar

Thin progress bar pinned to top showing scroll position.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Striped Progress Bar · Mint Breeze

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Mint Breeze palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Glow Slide Toggle · Deep Indigo

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Deep Indigo palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Equalizer Bars Loader · Ocean Sky

Five gradient bars pumping like an audio equalizer with staggered scaleY animation. Rendered in the Ocean Sky palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Gold shimmer sweep text

A champagne-gold highlight sweeps across dark gold lettering on a loop — award-badge typography.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Menu Button Three Dots

Three-dot kebab menu button with popover actions.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Icon Button Circle

Circular icon-only button with focus ring and active scale.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Labeled Radio Group

Vertical radio group with custom labels and descriptions.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Percentage Ring

Circular progress ring showing a percentage with animated arc.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Toggle Pill Switch

Pill-shaped toggle with sliding text indicator (On/Off).

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Pop Star Rating · Ocean Sky

Interactive five-star rating with gradient-filled stars and a springy pop on select. Rendered in the Ocean Sky palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Field Error State

Form field with error border, icon and message text.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Social Icon Row

Row of social media icon buttons with hover brand colors.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Bouncing Dots Loader · Ocean Sky

Four gradient dots bouncing in a staggered wave — the classic chat-typing energy. Rendered in the Ocean Sky palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Loading Button State

Button that shows a spinner while busy, then success check.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Animated weather mini icons

Spinning glowing sun, floating cloud and a raining cloud with looping raindrop streaks — all CSS keyframes.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Glow Slide Toggle · Royal Gold

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Royal Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Swift Command Palette · Cyber Lime

A ⌘K-style palette: type to filter actions, arrow keys to move, Enter to run — with shortcut hints. Rendered in the Cyber Lime palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Swift Command Palette · Aurora Teal

A ⌘K-style palette: type to filter actions, arrow keys to move, Enter to run — with shortcut hints. Rendered in the Aurora Teal palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Floating Glow Input · Rose Gold

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Rose Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Sunset Amber

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Sunset Amber palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Deep Indigo

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Deep Indigo palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Draw-on Checkbox · Sunset Amber

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Sunset Amber palette.

HTMLCSSReactAdvanced

Featured UI Elements⚛ TSX Live preview

Neon Pulse Button · Ultra Violet

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Ultra Violet palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Pop Star Rating · Candy Pink

Interactive five-star rating with gradient-filled stars and a springy pop on select. Rendered in the Candy Pink palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Floating Orb Empty State · Ultra Violet

A calming zero-state: drifting gradient orb with dashed orbit ring, empty copy and a soft CTA. Rendered in the Ultra Violet palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Status Badge Chips · Aurora Teal

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Aurora Teal palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Sleep/Activity Ring Sliders

Two ring sliders showing time spent in sleep and activity.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Floating Orb Empty State · Rose Gold

A calming zero-state: drifting gradient orb with dashed orbit ring, empty copy and a soft CTA. Rendered in the Rose Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Royal Gold

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Royal Gold palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Floating Orb Empty State · Aurora Teal

A calming zero-state: drifting gradient orb with dashed orbit ring, empty copy and a soft CTA. Rendered in the Aurora Teal palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Shimmer Skeleton Loading Cards

Three placeholder cards with the brand-hue moving shine — drop in anywhere data is loading.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Bubbles

Pure-CSS tooltips with data-attribute text, arrow and an overshoot pop, positioning top or bottom.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon CTA Button Duo

Two gradient buttons with neon glow, hover lift and press scale used side by side.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Equalizer Bars Loader · Rose Gold

Five gradient bars pumping like an audio equalizer with staggered scaleY animation. Rendered in the Rose Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Floating-Label Input Pair

Two inputs whose labels float above on focus, with error and success states.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Gradient Range Slider

Single range slider with a gradient-filled track and thumb glow.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Ring + Dots Combo Loader

Loading pair combining a rotating gradient ring and staggered typing dots.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Status Badge Set

Active/pending/error/offline badges with color dots and soft backgrounds.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Star Rating with Half Stars

Interactive star rating supporting halves with hover preview and value label.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Avatar Stack with Online Dots

Overlapping avatar cluster with presence dots, count chip and hover fan-out.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Quantity Stepper + Pagination

Quantity counter beside a numbered pagination with disabled edges.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Pop Star Rating · Rose Gold

Interactive five-star rating with gradient-filled stars and a springy pop on select. Rendered in the Rose Gold palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Status Badge Chips · Crimson Heat

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Crimson Heat palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Draw-on Checkbox · Deep Indigo

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Deep Indigo palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Equalizer Bars Loader · Mint Breeze

Five gradient bars pumping like an audio equalizer with staggered scaleY animation. Rendered in the Mint Breeze palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Pop Star Rating · Royal Gold

Interactive five-star rating with gradient-filled stars and a springy pop on select. Rendered in the Royal Gold palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Arrow Tooltip Kit

Four directional tooltips appearing on hover with fade-scale entrance.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Custom Select with Checkmark

Styled dropdown select with option checkmark, scroll and keyboard open.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Inline Alert Stack

Success/info/warning/error callouts with icons, titles and dismiss buttons.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Shimmer Action Button

A primary button sweeping a diagonal light shimmer on hover.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Auto-Advance OTP Input · Mint Breeze

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Mint Breeze palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Checkbox Custom Set

Custom checkboxes with draw-in checkmark and indeterminate state.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Search Input with Clear

Search field with leading icon, debounce dots and a clear button on input.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Volume Slider with Icon

Media volume slider linked to a mute icon that toggles state.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Skeleton Card Loader

Card-shaped loading skeleton with sweeping shimmer overlay.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Removable Tag Pills

Tag pills with remove buttons that delete with a small collapse animation.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Score Breakdown Bars

Aggregate rating display with per-star percentage bars and average bubble.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Status Badge Chips · Ultra Violet

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Ultra Violet palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Aurora Teal

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Aurora Teal palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Conic Ring Loader · Sunset Amber

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Sunset Amber palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Status Badge Chips · Candy Pink

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Candy Pink palette.

HTMLCSSReactAdvanced

Featured UI Elements⚛ TSX Live preview

RGB glitch hover text

Hover the word and cyan/red RGB-split layers jitter in stepped keyframes — cyberpunk title effect.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Initials Avatar with Ring

Gradient initials avatar with hover ring and size variants.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Checkout Progress Steps

Multi-step progress indicator with completed checks and animated connector.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Help Popover Card

Click-triggered help popover with title, description and a link.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Radio Card Selector

Radio choices styled as cards with ring highlight and icons.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Dismissible Banner

Top announcement banner with gradient, icon and close action.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Ghost Outline Button Pair

Outline and ghost button pair with hover fills and focus rings.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Radio Custom Set

Custom radio dots with animated selection ring and label groups.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Password Strength Input

Password field with live strength meter, checklist hints and visibility toggle.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Price Range Dual Slider

Dual-thumb price range slider with selected span highlight.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Shimmer Button with Loading → Success States

Tri-state CTA: idle, animated shimmer sweep with ellipsis dots while loading, then a morphing green ✓ success state.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Progress Bar with Percent

Determinate progress bar with percent readout and striped animation.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Draw-on Checkbox · Rose Gold

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Rose Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Striped Progress Bar · Aurora Teal

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Aurora Teal palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Liquid Glow Range Slider · Ocean Sky

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Ocean Sky palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Ocean Sky

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Ocean Sky palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Sliding Pill Segmented Control

Text and icon segmented controls where a gradient pill springs between options with overshoot easing.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Pulse Live Dot Badge

Live/recording badge with a pulsing ring and subtle glow.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Star Rating Input Buttons

Clickable star row with scale pop on selection and reset on double-click.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Avatar with Status Ring

Round avatar with colored presence ring and small status icon.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Counter with Min/Max Guard

Numeric stepper guarding min/max with disabled state and press-hold repeat.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Info Icon Tooltip

Small info icon revealing a tooltip with rich content and arrow.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Multi-Select Chips Dropdown

Multi-select dropdown with selected chips, backspace removal and search.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Auto-Advance OTP Input · Rose Gold

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Rose Gold palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Toast Notification Stack · UI Element

Stacked toast notifications sliding in with icons, undo action and auto-dismiss.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Icon Button with Label

Icon-plus-label button with ripple, tooltip and disabled state.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Segmented Toggle Control

Segmented single-select toggle with sliding thumb and equal widths.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Input Group with Attached Button

Input fused with an action button (copy/search) with shared hover state.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Conic Ring Loader · Ultra Violet

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Ultra Violet palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Expanding Accordion Card Deck

Five gradient panels in a row — click one and it smoothly stretches while the others shrink to a rail.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Striped Progress Bar · Candy Pink

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Candy Pink palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Steps Slider with Tick Marks

Discrete slider with tick labels and snapping thumb.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Spinner with Text State

Spinner paired with loading text that swaps to success check.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Notification Counter Badge

Numeric badge for bell/cart with pop animation on increment.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Emoji Mood Rating

Five emoji faces rating with bounce on selection and label feedback.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Presence Dot Legend

Avatar with label rows showing each presence state with colored dots.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Breadcrumb Trail with Dots

Breadcrumb path with chevrons, home icon and collapse-to-dots overflow.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Floating Glow Input · Ultra Violet

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Ultra Violet palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Copy Tooltip Feedback

Copy button whose tooltip morphs to a check with copied confirmation.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Select with Preview Pane

Option select that updates a live preview pane beside it.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Inline Form Error

Field-level error alert with icon, retry hint and focus affordance.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Loading Button States

Button cycling idle/loading/success with spinner swap and disabled guard.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Status Badge Chips · Royal Gold

A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Royal Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Circular Loader Ring

Spinner ring with rotating gradient arc and smooth easing.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Theme Light/Dark Toggle

Sun/moon switch with orbit animation and icon morph.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Dots Typing Loader

Three bouncing dots representing typing/loading with staggered animation.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Textarea with Chars Left

Growing textarea with live char counter and soft limit warning.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Rating Slider Hybrid

Slider fused with star labels from 1 to 5 with value bubble.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Typing Dots Loader

Three bouncing dots suggesting typing with staggered motion.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Checkbox Custom

Custom checkbox with checkmark draw-in animation on check.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

New Feature Badge with Sparkle

Sparkle-animated NEW badge for feature flags and launches.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Inline Thumbs Rating

Lightweight up/down thumbs rating with count flip animation.

HTMLCSSJavaScriptAdvanced

Featured UI Elements⚛ TSX Live preview

Swift Command Palette · Candy Pink

A ⌘K-style palette: type to filter actions, arrow keys to move, Enter to run — with shortcut hints. Rendered in the Candy Pink palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Group Chip Overflow

Avatar group with +N overflow chip and hover reveal tooltip.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Pagination Ellipsis Pager

Pager with first/last, ellipsis compression and active page glow.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Image Hotspot Tooltip

Image with interactive hotspots opening tooltips at points.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Pop Star Rating · Sunset Amber

Interactive five-star rating with gradient-filled stars and a springy pop on select. Rendered in the Sunset Amber palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Country Select with Flag

Country dropdown with flag chips, code hints and searchable list.

HTMLCSSJavaScriptAdvanced

Featured UI Elements⚛ TSX Live preview

Conic Ring Loader · Deep Indigo

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Deep Indigo palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Neon Pulse Button · Cyber Lime

A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Cyber Lime palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Mint Breeze

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Mint Breeze palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Floating Orb Empty State · Deep Indigo

A calming zero-state: drifting gradient orb with dashed orbit ring, empty copy and a soft CTA. Rendered in the Deep Indigo palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Bouncing Dots Loader · Royal Gold

Four gradient dots bouncing in a staggered wave — the classic chat-typing energy. Rendered in the Royal Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Rose Gold

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Rose Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Offline Status Banner

Connectivity banner appearing offline with retry spinner and auto-recover.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Split Button with Dropdown

Primary split button revealing secondary actions in a dropdown.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Toggle with Labels Left/Right

Switch flanked by descriptive labels that invert meaning on state.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Floating Orb Empty State · Mono Pearl

A calming zero-state: drifting gradient orb with dashed orbit ring, empty copy and a soft CTA. Rendered in the Mono Pearl palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Autocomplete Input List

Input with filtered suggestion list, keyboard nav and active highlight.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Brightness/Contrast Sliders

Two linked media sliders previewing a live filter on a swatch.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Orb Morphing Loader

Liquid orb loader morphing shapes with gradient rotation.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Tier Badge with Icon

Gold/silver/bronze tier badges with icons and gradient fills.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Detailed Survey Rating

Question rows each with star rating and required indicator.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Candy Pink

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Candy Pink palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Bordered Avatar Wall

Dense avatar wall with thin borders and tooltip names on hover.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Install Wizard Steps

Install steps with terminal ticks, current pulse and done checks.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Conic Ring Loader · Rose Gold

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Rose Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Split-flap departure board text

Letters flip in from -90deg like an airport split-flap board, cycling words on a timer — monospace amber glow.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Draw-on Checkbox · Ocean Sky

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Ocean Sky palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Striped Progress Bar · Royal Gold

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Royal Gold palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Crimson Heat

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Crimson Heat palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Mono Pearl

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Mono Pearl palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Status Pill

Status indicator pill (active/pending/error) with color coding.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Stroke-draw success checkmark

On action the button draws a circle then a check via stroke-dashoffset animation and tints green — completion feedback.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Deep Indigo

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Deep Indigo palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Status Explanation Tooltip

Hovering a status dot explains its meaning in a rich tooltip.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Select with Grouped Optgroups

Grouped dropdown with optgroup headers and indented options.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Success Confirmation Toast

Full-width success toast with check icon, message and close.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

FAB Expand Stack

Floating action button expanding to reveal stacked secondary FABs with labels.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Toggle with Icons Inside

Switch with sun/moon or play/pause glyphs inside the thumb.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Date Input with Calendar Pop

Text date input popping a mini calendar on focus for quick picks.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Auto-Advance OTP Input · Ocean Sky

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Ocean Sky palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Equalizer Bars Slider

Vertical sliders styled as an equalizer that animate together.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Logo Shimmer Loader

Branded loader with a shimmer sweep across a logo mark.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Category Tag with Icon

Category tag chips each with a leading glyph and hover lift.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Lifetime Value Rating Bar

Compact bar rating with segmented filled blocks and value.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Neon signboard flicker text

Classic broken-sign flicker on neon-tube lettering with layered fuchsia/cyan text-shadow glow.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Morph Icon Button · Ultra Violet

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Ultra Violet palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Countdown Timer

Live countdown with flip-style digits for deals/events.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Avatar with Activity Heat

Avatar whose ring thickness reflects recent activity level.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Swift Command Palette · Royal Gold

A ⌘K-style palette: type to filter actions, arrow keys to move, Enter to run — with shortcut hints. Rendered in the Royal Gold palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Stepper with Collapsible Steps

Vertical stepper where completed steps collapse to summaries.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Floating Glow Input · Mint Breeze

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Mint Breeze palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Pronunciation Tooltip

Text word with speaker icon tooltip offering pronunciation audio.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Select with Custom Thumbnails

Avatar-style options with thumbnail, name and role in the dropdown.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Back-to-Top Button

Floating button that appears on scroll and smooth-scrolls up.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Update Available Banner

App update banner with version note, reload action and dismiss.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Danger Confirm Button

Danger button with two-step confirm (click to arm, click again to confirm).

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Accordion Toggle Section

Compact section toggling open with height animation and chevron.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

OTP Code Input Row

Six OTP boxes with auto-advance, paste split and backspace jump.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Color Channel Sliders

Three RGB sliders updating a live color swatch with hex readout.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Glow Ring Loader

Thick ring loader with pulsing glow and gradient arc.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Liquid Glow Range Slider · Rose Gold

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Rose Gold palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Rose Gold

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Rose Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Pop Star Rating · Mint Breeze

Interactive five-star rating with gradient-filled stars and a springy pop on select. Rendered in the Mint Breeze palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Spring-Pop Star Rating

Five oversized stars with overshoot spring animation, glow and live label (Terrible → Legendary).

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Ultra Violet

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Ultra Violet palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Floating Action Button with Fan Menu

A glowing FAB that springs open four action items fanning out in an arc, with the main icon rotating.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Candy Pink

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Candy Pink palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Draw-on Checkbox · Ultra Violet

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Ultra Violet palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Copy Button Feedback

Copy-to-clipboard button with checkmark success state.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Liquid Glow Range Slider · Cyber Lime

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Cyber Lime palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Breadcrumb Toggle

Breadcrumb that collapses to a button on small screens.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Accordion Arrow

Single accordion item with animated chevron and smooth height.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Priority Flag Badges

Low/med/high/critical priority badges for tickets and issues.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Rating with Animated Stars

Stars that light up sequentially with pop and confetti tick at max.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Notification Sender Avatars

Feed avatars with tiny unread bubbles and time dots.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Streak Counter Flame

Day-streak counter with flame pulse and calendar dots.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Definition Term Tooltip

Underlined terms revealing dictionary-style tooltips with phonetic.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Year Range Selector

Two linked selects for from/to years with swap guard.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Nudge Micro-Banner

Tiny dismissible nudge prompting an action with arrow.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Text Link Button Variants

Inline text buttons in muted/primary/danger with underline motion.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Switch with Ripple Click

Switch with material ripple on click and spring thumb.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Chip Tag Editor

Tag editor adding chips on Enter with duplicate guard and remove X.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Equalizer Bars Loader · Aurora Teal

Five gradient bars pumping like an audio equalizer with staggered scaleY animation. Rendered in the Aurora Teal palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Auto-Advance OTP Input · Aurora Teal

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Aurora Teal palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Ocean Sky

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Ocean Sky palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Floating Orb Empty State · Cyber Lime

A calming zero-state: drifting gradient orb with dashed orbit ring, empty copy and a soft CTA. Rendered in the Cyber Lime palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Conic Ring Loader · Ocean Sky

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Ocean Sky palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Striped Progress Bar · Ocean Sky

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Ocean Sky palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Liquid Glow Range Slider · Sunset Amber

A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Sunset Amber palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Neon Ring Toggle Switches

Springy glowing toggle switches in violet, magenta and cyan — the thumb pops with neon bloom when switched on.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Glow Slide Toggle · Aurora Teal

A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Aurora Teal palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Spring Tooltip Button · Cyber Lime

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Cyber Lime palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Line Sweep Button · Royal Gold

An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Royal Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Typewriter rotating words

Type-delete cycling of gradient words after a fixed lead phrase, with a blinking caret.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Notification Toast Stack

Four-toned toasts (success/info/warn/error) that spring in from the right with progress bars and auto-dismiss.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Draw-on Checkbox · Mono Pearl

A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Mono Pearl palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Bouncing Dots Loader · Candy Pink

Four gradient dots bouncing in a staggered wave — the classic chat-typing energy. Rendered in the Candy Pink palette.

HTMLCSSReactAdvanced

Featured UI Elements⚛ TSX Live preview

Scramble decode text effect

Text resolves from random glyphs into the target word like decryption, with a blinking block cursor; loops and re-runs on click.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Floating Glow Input · Cyber Lime

A text field with a floating label and a gradient focus ring that breathes. Rendered in the Cyber Lime palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Swift Command Palette · Deep Indigo

A ⌘K-style palette: type to filter actions, arrow keys to move, Enter to run — with shortcut hints. Rendered in the Deep Indigo palette.

HTMLCSSJavaScriptAdvanced

Featured UI Elements⚛ TSX Live preview

Flowing gradient border buttons

Animated gradient border that streams around the label; inner chip clears to reveal the full flow on hover.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Conic Ring Loader · Mono Pearl

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Mono Pearl palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Accessible Switch Rows

A vertical set of labelled toggle switches with checked glow and focus rings.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Auto-Advance OTP Input · Candy Pink

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Candy Pink palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Auto-Advance OTP Input · Deep Indigo

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Deep Indigo palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Auto-Advance OTP Input · Royal Gold

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Royal Gold palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Conic Ring Loader · Cyber Lime

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Cyber Lime palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Auto-Advance OTP Input · Crimson Heat

Six-box verification code field: auto-advance, paste-to-fill, shake on wrong code, glow on success. Rendered in the Crimson Heat palette.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Bouncing Dots Loader · Sunset Amber

Four gradient dots bouncing in a staggered wave — the classic chat-typing energy. Rendered in the Sunset Amber palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Bouncing Dots Loader · Mint Breeze

Four gradient dots bouncing in a staggered wave — the classic chat-typing energy. Rendered in the Mint Breeze palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Bouncing Dots Loader · Ultra Violet

Four gradient dots bouncing in a staggered wave — the classic chat-typing energy. Rendered in the Ultra Violet palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Conic Ring Loader · Aurora Teal

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Aurora Teal palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Bouncing Dots Loader · Rose Gold

Four gradient dots bouncing in a staggered wave — the classic chat-typing energy. Rendered in the Rose Gold palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Bouncing Dots Loader · Cyber Lime

Four gradient dots bouncing in a staggered wave — the classic chat-typing energy. Rendered in the Cyber Lime palette.

HTMLCSSReactAdvanced

UI Elements⚛ TSX Live preview

Shimmer Skeleton Cards

Loading placeholder cards with a diagonal light sweep looping across avatar and line blocks.

HTMLCSSReactAdvanced

2.5k19.8k4.8kOpen

UI Elements⚛ TSX Live preview

Neon Glow Toggle Switch

Springy knob that overshoots into a neon violet-fuchsia glow state when checked.

HTMLCSSReactAdvanced

3.9k29.6k6.4kOpen

UI Elements⚛ TSX Live preview

Interactive Star Rating

Five stars with hover preview, spring pop on fill and locked-in labels from Terrible to Legendary.

HTMLCSSJavaScriptAdvanced

4.4k31.8k7.2kOpen

UI Elements⚛ TSX Live preview

Spotlight Border Input

Inputs whose 1.5px border lights up with a radial spotlight that follows the cursor, plus focus fill.

HTMLCSSJavaScriptAdvanced

2.8k21.4k4.3kOpen

UI Elements⚛ TSX Live preview

Material Ripple Button

Click anywhere and a white ripple expands from the exact click point, scaled to overflow the button.

HTMLCSSJavaScriptAdvanced

3.1k25.9k6.1kOpen

Featured UI Elements⚛ TSX Live preview

Hamburger → Close Morph

Three gradient bars that spring into an X with rotation — the classic menu toggle, pure CSS.

HTMLCSSJavaScriptAdvanced

5.2k37.4k8.9kOpen

UI Elements⚛ TSX Live preview

Glow Spring Checkboxes

Checkboxes that pop with an overshoot spring, gradient fill and violet glow; label brightens via :has().

HTMLCSSReactAdvanced

3.5k27.8k5.9kOpen

UI Elements⚛ TSX Live preview

Shine-Sweep Badges

Pill badges in three tints with a diagonal light sweep that crosses on a loop, staggered.

HTMLCSSReactAdvanced

3.3k24.1k5.5kOpen

UI Elements⚛ TSX Live preview

Overlapping Avatar Stack

Gradient initial circles overlapping in a stack that spreads apart on hover and lifts per avatar.

HTMLCSSJavaScriptAdvanced

5k35.2k8.3kOpen

UI Elements⚛ TSX Live preview

Staggered Bounce Dots

Five gradient dots bouncing in a wave with glow at peak, each delayed 150ms.

HTMLCSSReactAdvanced

3k24.1k5.2kOpen

Featured UI Elements⚛ TSX Live preview

Heart Burst Like Button

Toggle like with a springy heart pop and ten particle glyphs flying out in random directions.

HTMLCSSJavaScriptAdvanced

4.9k36.2k8.1kOpen

Featured UI Elements⚛ TSX Live preview

Liquid Morphing Orb Loader

Two gradient blobs morphing through organic border-radius shapes, blended in screen mode with contrast filter.

HTMLCSSReactAdvanced

5.3k41.2k8.9kOpen

UI Elements⚛ TSX Live preview

Glowing Range Slider

A filled-track slider whose violet→fuchsia fill follows the value, with a glowing white thumb.

HTMLCSSJavaScriptAdvanced

4.3k30.9k7.1kOpen

UI Elements⚛ TSX Live preview

Gliding Segmented Control

iOS-style segmented control with a cyan-violet gliding thumb that springs between options.

HTMLCSSJavaScriptAdvanced

3.9k28.6k6.3kOpen

UI Elements⚛ TSX Live preview

Animated Gradient Progress Rings

Three SVG rings that stroke-draw to 82/64/95% with glow and count-up labels.

HTMLCSSJavaScriptAdvanced

3.7k28.5k6.7kOpen

UI Elements⚛ TSX Live preview

Rotating Gradient Border Button

A conic-gradient border that spins around a dark pill button via @property angle animation.

HTMLCSSReactAdvanced

4.1k33.8k7.6kOpen

UI Elements⚛ TSX Live preview

Conic Gradient Ring Spinner

A spinning conic-gradient arc revealed by a radial mask — one element, zero keyframe paths.

HTMLCSSReactAdvanced

6k42.8k9.4kOpen

MotionVault

The treasure vault for animated web design. Full site templates, advanced components, UI micro-elements and animation snippets — each with live preview, source code and an AI prompt. Inspired by Motion Sites, React Bits, Uiverse, Anime.js and Aceternity UI.

2023 items1345k stars1342k copies

Vault sections

Site Templates
Components
UI Elements
Animations

More

Explore everything
Favorites
Submit
Privacy
Roadmap
Blog
Support
Accessibility
Built with Next.js · Tailwind

© 2026 MotionVault — curated for builders who ship.·🎲 Surprise me·v2.0.0

327 React ui elements — live previews + AI prompts · MotionVault