Menu

Component · controls

Liquid glass tabs

Switch between views or modes.

Segmented date-range and appearance controls with inset selected pills over a procedural backdrop.

Copy the prompt

Free

The rules, the spec, the glass code for Web and the checks, in one text.

Works in any AI that can write code.

Or connect your AI once
Material
track: regular glass capsule · indicator: raised lens pill (or tint)
Profile
bevel
Bezel (px)
14–16 (track)
Displacement (px)
0.4 × bezel (6)
Blur (px)
1–2

Geometry. track 32–36 tall capsule, inset 3; indicator radius = track radius − 3

Rules2
  • The indicator is the travelling lens; the track stays calm.
  • Keep labels flat above both.
Anatomy3
  • track
  • sliding indicator
  • flat labels
States3
  • rest
  • moving: indicator slides with a spring and stretches (morph) toward the target
  • selected label weight 600

Questions

What material is a liquid glass tabs?

Track: regular glass capsule · indicator: raised lens pill (or tint) material with a bevel edge profile, in the controls layer. Switch between views or modes.

How big is a liquid glass tabs?

Track 32–36 tall capsule, inset 3; indicator radius = track radius − 3.

What bezel, displacement and blur does it use?

Bezel 14–16 (track); displacement 0.4 × bezel (6); blur 1–2 (px).

Which states does a liquid glass tabs need?

Rest; moving: indicator slides with a spring and stretches (morph) toward the target; selected label weight 600.