# Glass Cluster

Group of glass buttons whose segments melt into one shape on newer iOS and the web. The selected segment lights up from its top edge while the previous one fades.

> Composed · Pro · Signature — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/glass-cluster
```

## Import

```tsx
import { GlassCluster } from "@/components/ui/glass-cluster/glass-cluster";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `GlassClusterItem[]` | — |
| `value?` | `number` | Selected index — uncontrolled when omitted. Pass -1 for none. |
| `defaultValue?` | `number` | — |
| `onChange?` | `(index: number) => void` | — |
| `spacing?` | `number` | Merge distance between chambers — passes to GlassContainer spacing. |
| `switchOn?` | `boolean` | Chambers start dim and switch on left to right, 40ms apart, on mount.  Pair with a `key` to rebuild the set in place. Default false. |
| `className?` | `string` | — |

## Icons rendered

- `play` — /icons.html?i=play
- `pause` — /icons.html?i=pause

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