Explore everything

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

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

Focus-glow email capture input

Input that ignites with a fuchsia ring, top light spill and tinted background on focus, plus a gradient CTA.

31210Open

Floating label inputs

Labels rise, shrink and turn cyan when the field focuses or has content — classic material-style form polish.

34210Open

Add/remove tag chips input

Tag field: chips pop in with a spring, ✕ removes with a scale-out; type and Enter to add new slug-style tags.

32410Open

Star rating input with hover preview

Five stars light up on hover with spring scale on the previewed one; clicking locks the rating and label.

36510Open

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.

58410Open

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.

52110Open

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.

9610Open

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.

49410Open

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.

41810Open

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.

55810Open

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.

61010Open

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.

27810Open

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.

79210Open

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.

71610Open

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.

35210Open

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.

47610Open

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.

66810Open

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.

82810Open

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.

80510Open

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.

61910Open

Featured UI Elements 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.

48910Open

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.

45010Open

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.

78110Open

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.

74110Open

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.

40910Open

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.

39310Open

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.

53910Open

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.

20710Open

Inline Form Validation · Rose Gold

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Rose Gold palette.

26310Open

Inline Form Validation · Ocean Sky

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Ocean Sky palette.

71110Open

Inline Form Validation · Mint Breeze

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Mint Breeze palette.

74310Open

Inline Form Validation · Candy Pink

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Candy Pink palette.

80910Open

Inline Form Validation · Royal Gold

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Royal Gold palette.

47710Open

Inline Form Validation · Crimson Heat

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Crimson Heat palette.

66510Open

Inline Form Validation · Deep Indigo

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Deep Indigo palette.

67210Open

Inline Form Validation · Aurora Teal

Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Aurora Teal palette.

23010Open

Form with Floating Labels

Input group with floating labels, validation states and focus ring.

Floating Input

Input with floating label that lifts and shrinks on focus.

Search Input Icon

Search field with leading icon and clear button on input.

UI Elements⚛ TSX Live preview

Star Rating Input

Interactive star rating with hover preview and filled state.

HTMLCSSJavaScriptAdvanced

Range Slider

Custom range slider with filled track and draggable thumb.

Input Group Button

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

Tag Input Field

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

Floating-Label Input Pair

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

000Open

Gradient Range Slider

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

000Open

Star Rating with Half Stars

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