# focus

Components Live preview

Focus-glow email capture input

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

31200Open

Featured Components Live preview

Depth-focus bento row

Hovering the row brings one panel forward (flex grow, color, label) while siblings recede and desaturate.

36600Open

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.

58400Open

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.

52100Open

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.

9600Open

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.

49400Open

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.

41800Open

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.

55800Open

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.

61000Open

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.

27800Open

UI Elements⚛ TSX Live preview

Floating-Label Input Pair

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

HTMLCSSJavaScriptAdvanced

000Open