Explore everything

Interactive Star Rating

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

4.4k31.8k7.2kOpen

Glowing Range Slider

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

4.3k30.9k7.1kOpen

Gliding Segmented Control

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

3.9k28.6k6.3kOpen

Glow Spring Checkboxes

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

HTMLCSSReactAdvanced

3.5k27.8k5.9kOpen

Spotlight Border Input

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

2.8k21.4k4.3kOpen

Neon Ring Toggle Switches

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

23110Open

Spring-Pop Star Rating

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

26310Open

Sliding Pill Segmented Control

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

24110Open

Gradient stepper progress nav

4-step wizard indicator: numbered nodes light up with gradient borders as the fill bar advances.

32810Open

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

Shake error-feedback form

Wrong password triggers a horizontal shake with red ring; correct password shows green success — instant feedback.

29810Open

Floating label inputs

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

34210Open

Selectable pricing radio cards

Plan picker where whole cards are radio targets — checked card gets a gradient border, filled tick and glow.

35610Open

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

Password strength meter

Live strength scoring (length, case, digits, symbols) driving a colored gradient bar with missing-rule hints.

35210Open

Dual-thumb range price slider

Two overlaid range inputs form a min/max selector with a gradient selected band and live mono price labels.

33410Open

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

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

73910Open

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.

40710Open

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.

31110Open

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.

25810Open

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.

59610Open

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.

8510Open

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.

79710Open

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.

65010Open

Draw-on Checkbox · Deep Indigo

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

66610Open

Draw-on Checkbox · Aurora Teal

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

22410Open

Draw-on Checkbox · Mono Pearl

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

18910Open

Draw-on Checkbox · Ultra Violet

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

42910Open

Draw-on Checkbox · Cyber Lime

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

75410Open

Draw-on Checkbox · Sunset Amber

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

72110Open

Draw-on Checkbox · Rose Gold

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

66910Open

Draw-on Checkbox · Ocean Sky

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

59310Open

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.