A Liquid Glass surface: native on iOS 26, emulated with blur and a rim elsewhere.
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 |
|---|---|---|
| variant Frosted, or more see-through for media behind. | 'regular' | 'clear' | 'regular' |
| tint Colour washed into the glass, e.g. your accent for a selected state. | string | — |
| interactive iOS 26: the glass shimmers and bounces under touch. | boolean | false |
| radius Corner radius, or 'full' for pills and circles. | number | 'full' | kit lg radius |
| intensity Blur strength 1–100 where blur is emulated. | number | 60 |
| edge / shadow Specular rim + hairline edge, and the soft drop shadow (emulated glass). | boolean | true / true |
| scheme Force light or dark glass, e.g. over a photo. | 'light' | 'dark' | kit theme |
| GlassGroup Shapes inside melt together on iOS 26 when closer than spacing. | { spacing } | 12 |
| GlassProvider / GlassBackdrop / GlassIsolate Android real blur: put the content behind the glass in GlassBackdrop, glass UI as its siblings. GlassIsolate opts a subtree (e.g. a Modal) out. | wrappers | — |
| liquidGlass / useGlassInk() Whether native Liquid Glass is on; text colours that read on glass. | boolean / hook | — |
| style Size, padding and layout. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- With interactive, iOS 26 glass shimmers and bounces under the finger. Elsewhere the prop is ignored.
- Platforms
- iOS 26 renders real Liquid Glass that GlassGroup can merge; older iOS uses a system material blur. Android blurs inside GlassProvider + GlassBackdrop and falls back to a frosted fill.
- Web
- Blurs what is behind it with a CSS backdrop blur. Wherever glass is emulated it adds a specular rim, a hairline edge and a soft shadow.
Source
Did you like the content?