# Glass

Glass surface for cards and controls: system glass on newer iOS, real refraction on the web and a frosted look elsewhere. Light can gather under your finger, and panes merge on newer iOS and the web.

> Composed · Free · Layout — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add glass
```

## Import

```tsx
import { useGlass, Glass, GlassContainer } from "@/components/ui/glass/glass";
```

## Props

### Glass

| Prop | Type | Notes |
| --- | --- | --- |
| `effect?` | `"clear" | "regular" | "none"` | 'regular' = standard glass blur, 'clear' = more transparent,  'none' = fallback everywhere. |
| `tintColor?` | `ColorValue` | Tint overlaid on the glass (native); also tints the fallback fill. |
| `interactive?` | `boolean` | Press interaction (fluid squish + glow; native on iOS 26+). |
| `bend?` | `number` | Edge refraction strength 0–1 — how far the lens bends the backdrop.  Web only; native glass always refracts per the platform. |
| `frost?` | `number` | Diffusion 0–1 — extra backdrop blur behind the glass. |
| `sheen?` | `number` | Diagonal sheen intensity 0–1. Web only. |
| `dispersion?` | `boolean` | Chromatic fringe at the rim. Web only. |
| `curvature?` | `"dome" | "edge"` | Lens curvature — 'dome' warps the whole surface (lens look),  'edge' concentrates refraction at the rim. Web only. |
| `light?` | `SharedValue<number>` | @deprecated No effect: no light band travels across the pane any more.  Kept so existing call sites compile. |
| `specular?` | `boolean` | The highlight gathers under the finger while it is down (brightens  over timing.instant, follows the touch) and dims on release over  timing.recede. Optional, off by default. Every backend. |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### GlassContainer

| Prop | Type | Notes |
| --- | --- | --- |
| `spacing?` | `number` | How close panes must sit before they merge into one blob — maps to  the native containers' `spacing`. |
| `merged?` | `boolean` | Merge children into a single glass slab on web (default true).  Native unions always merge. |
| `effect?` | `"clear" | "regular"` | Glass effect for the merged web slab. |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

Source: https://lumioui.com/components/glass