Noir Aurora Segmented Control
Radios as equal segments in a quiet well, with a lit thumb that springs to the checked one in CSS only (works without JavaScript, up to 8 segments).
Segmented Control
Radios as equal segments on a paper-2 well, with a card-white, ink-outlined thumb that slides to the checked one in CSS only (works without JavaScript, up to 8 segments).
Live, interactive React component · light themeResponsive
About the Neo-Brutal Segmented Control
Radios as equal segments on a paper-2 well, with a card-white, ink-outlined thumb that slides to the checked one in CSS only (works without JavaScript, up to 8 segments). For views and periods, not for navigation. (Pricing's billing switch is the ink-thumb version.)
It is part of Neo-Brutal. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
Soft Bento Segmented Control
Radios as equal segments on a pressed pill track, with a white clay thumb that slides to the checked one and squashes as it lands, in CSS only (works without JavaScript, up to 8 segments).
Swiss Tech Mono Segmented Control
Radios as equal segments with a thumb that slides to the checked one in CSS only (works without JavaScript, up to 8 segments).