A glass segmented control whose thumb stretches toward the new segment like a drop.
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| options Equal-width segments; icon is a node shown before the label. | (string | { value, label, icon? })[] | — |
| value / onChange Controlled selection (or use defaultValue). Fires on tap and on release after a drag. | string / (value) => void | — |
| defaultValue Initial selection when uncontrolled. | string | first segment |
| size 32 / 40pt tall. | 'sm' | 'md' | 'md' |
| scheme Force light or dark glass and ink, e.g. over a photo. | 'light' | 'dark' | kit theme |
| accent Selection colour: fills the thumb; the label switches to black or white to stay readable. | string | glass ink (black / white) |
| haptics Selection tick on change and while dragging across segments. | boolean | true |
| accessibilityLabel Label for the whole control (tablist; each segment is a tab with selected state). | string | — |
| style Style for the glass track. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Tap a segment, or press the thumb and drag it across. It follows your finger and snaps to the nearest segment on release.
- Motion
- The thumb springs to the new segment, stretching in the direction of travel before it settles. It lifts slightly while you drag it.
- Reduced motion
- The thumb slides over in a short timing with no stretch, and does not lift when dragged.
- Haptics
- A selection tick on change and each time a drag crosses into another segment.
- Screen readers
- The control is a tablist and each segment a tab with its label and selected state.
- Platforms
- Built on Glass: real Liquid Glass on iOS 26, blurred or frosted glass elsewhere.
Source
Did you like the content?

