# control

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

HTMLCSSJavaScriptModerate

Components Live preview

Spring sliding segmented control

iOS-style segmented tabs where the gradient indicator springs between options and resizes itself.

30500Open

HTMLCSSJavaScriptModerate

Components Live preview

Day/night sliding toggle switch

iOS-style switch with a springy knob carrying the icon, track recolors sky-blue by day and deep space at night.

35600Open

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.

73900Open

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.

40700Open

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.

31100Open

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.

25800Open

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.

59600Open

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.

8500Open

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.

79700Open

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.

65000Open

Draw-on Checkbox · Deep Indigo

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

66600Open

Draw-on Checkbox · Aurora Teal

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

22400Open

Draw-on Checkbox · Mono Pearl

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

18900Open

Draw-on Checkbox · Ultra Violet

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

42900Open

Draw-on Checkbox · Cyber Lime

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

75400Open

Draw-on Checkbox · Sunset Amber

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

72100Open

Draw-on Checkbox · Rose Gold

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

66900Open

Draw-on Checkbox · Ocean Sky

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

59300Open

Toggle Switch

Accessible switch with knob travel animation and checked glow.

000Open

Components⚛ TSX Live preview

Segmented Tabs with Badge Counts

Segmented control tabs carrying live counts, animated selection and mobile wrap.

HTMLCSSJavaScriptAdvanced

000Open