# Glassy UI

> Glassy UI components for React, installed with the shadcn CLI as source you own. 38 components. https://glassyui.com

## Set up

Use React 19+ and Tailwind CSS 4+. Initialise shadcn once if the app has no `components.json`:

```bash
npx shadcn@4.14.1 init
```

Install directly from a complete item URL, with no registry mapping:

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-button.json
```

Component pages offer npm, pnpm, modern Yarn and bun commands, plus Manual installation with every required file. Existing namespace commands remain available by optionally merging this mapping into `components.json`:

```json
{
  "registries": {
    "@glassyui": "https://glassyui.com/r/{name}.json"
  }
}
```

Set `data-lg-theme` on the app root: "light" for a light app, "dark" for a dark app. Keep it in sync with your app theme. The provider is optional; match its `defaultTheme` to the app’s initial theme.

```tsx
<html lang="en" data-lg-theme="light">
  <body>{children}</body>
</html>
```

## Expo

React Native versions of 29 items install into Expo apps with the same names and React Native props. Shared controls support Expo SDK 55+; Picker, Swipe Row and Card Stack require SDK 57. `shadcn init` does not set up Expo apps. Keep an existing `components.json`, or add this one at the app root; keep `cssVariables` enabled:

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": { "config": "", "css": "", "baseColor": "neutral", "cssVariables": true },
  "aliases": { "components": "@/components", "utils": "@/lib/utils" }
}
```

Match the `@/` alias in `tsconfig.json`. Keep an existing mapping or merge this one for components at the app root; use `./src/*` when they live in `src`:

```json
{
  "compilerOptions": {
    "paths": { "@/*": ["./*"] }
  }
}
```

Add complete items without a registry mapping and match their packages to the SDK:

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-button.json && npx expo install --fix
```

Manual installation uses `npx expo install` for the listed packages and copies every file from the item's payload. Rebuild a development build after adding native packages. Existing namespace commands can optionally use this mapping:

```json
{
  "registries": {
    "@glassyui-native": "https://glassyui.com/r/native/{name}.json"
  }
}
```

Items: glass-provider, glass-surface, glass-button, glass-panel, glass-input, glass-textarea, glass-checkbox, glass-radio-group, glass-switch, glass-slider, glass-segmented-control, glass-tabs, glass-badge, glass-progress, glass-spinner, glass-skeleton, glass-alert, glass-avatar, glass-accordion, glass-dock, glass-dialog, glass-sheet, glass-toast, glass-menu, glass-select, glass-popover, glass-picker, glass-swipe-row, glass-card-stack. Guide: https://glassyui.com/guides/expo

## shadcn theme

Already using stock shadcn/ui components? One command gives them the Glassy UI look. It writes CSS only, tinted from your own palette, and changes no component file:

```bash
pnpm dlx shadcn@4.14.1 add https://glassyui.com/r/glassy-theme.json
```

To turn them into Glassy UI's own components instead, with Glassy UI's look and sizes and, on buttons, cards, alerts, tabs and floats, a lens measured for each element, install the drop-in set for the app's style over its own files (`glassy-ui-new-york` for Radix, `glassy-ui-base-nova` for Base UI). Imports stay the same; commit first, because `--overwrite` replaces those files:

```bash
pnpm dlx shadcn@4.14.1 add https://glassyui.com/r/glassy-ui-new-york.json --overwrite
```

Guide: https://glassyui.com/guides/shadcn-theme

## Glass Provider

Sets the theme and accessibility preferences that every Glassy UI component follows.

Page: https://glassyui.com/components/glass-provider

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-provider.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-provider.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

### Usage

```tsx
import { GlassProvider } from "@/components/glassyui/glass-provider";

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <GlassProvider>{children}</GlassProvider>;
}
```

#### Choose the default theme

```tsx
<GlassProvider defaultTheme="light">{children}</GlassProvider>
```

#### Legacy SVG filters

```tsx
<GlassProvider>
  <LiquidFilters />
  {children}
</GlassProvider>
```

### API reference

#### `GlassProvider`

Holds the preferences and writes them to data-lg-* attributes on the html element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` (required) | `ReactNode` | — | The app, or the part of it that uses glass components. |
| `defaultTheme` | `'light' \| 'dark'` | system setting | Theme a visitor sees until they choose one; without it the provider follows prefers-color-scheme. A saved choice always wins. |

#### `usePreferences`

Hook that returns { preferences, setPreferences }. Throws outside GlassProvider.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `preferences.theme` | `'light' \| 'dark'` | defaultTheme, else system | Active colour theme. |
| `preferences.mode` | `'clear' \| 'tinted'` | 'clear' | Glass appearance mode. |
| `preferences.quality` | `'low' \| 'medium' \| 'high'` | detected | Rendering quality: low with reduced transparency or 4 GB of device memory or less, medium on touch or with reduced motion, otherwise high. |
| `preferences.reduceMotion` | `boolean` | prefers-reduced-motion | Stops glass motion. |
| `preferences.reduceTransparency` | `boolean` | prefers-reduced-transparency | Makes glass opaque and turns off the lens and refraction. |
| `preferences.thickness` | `number` | 1 | Glass thickness as a multiple of regular; applied between 0.25 and 2. |
| `setPreferences` | `(prefs: Partial<GlassyUiPreferences>) => void` | — | Merges and applies the given preferences, and saves them to localStorage under glassy-ui-preferences. |

#### `useOptionalPreferences`

Same shape as usePreferences, but safe outside GlassProvider: it then returns the defaults, follows the system reduced-transparency setting, and setPreferences does nothing.

#### `PreferencesProvider`

Alias of GlassProvider, kept for compatibility.

Also accepts GlassProvider props.

#### `LiquidFilters`

Hidden SVG filter definitions (#lg-liquid-refraction and others) for your own CSS. No Glassy UI component needs it. Import it from liquid-filters.

Types: `GlassyUiPreferences`, `GlassyUiTheme`, `GlassyUiMode`, `GlassyUiQuality`

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-provider.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-provider.json. Install its listed packages with npx expo install, then rebuild your development build.

This usage also uses Glass Button. Install the complete example:

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-provider.json https://glassyui.com/r/native/glass-button.json && npx expo install --fix
```

```tsx
import { GlassButton } from '@/components/glassyui/glass-button';
import { GlassProvider, usePreferences } from '@/components/glassyui/glass-provider';

function ThemeButton() {
  const { preferences, setPreferences } = usePreferences();
  const next = preferences.theme === 'dark' ? 'light' : 'dark';

  return (
    <GlassButton onPress={() => setPreferences({ theme: next })}>
      {next === 'light' ? 'Use light glass' : 'Use dark glass'}
    </GlassButton>
  );
}

// Wrap your app once. It follows the device's appearance, Reduce Motion and Reduce
// Transparency settings until you set your own.
export default function ProviderExample() {
  return (
    <GlassProvider>
      <ThemeButton />
    </GlassProvider>
  );
}
```

## Glass Surface

The glass material as a plain div, for building your own glass components.

Page: https://glassyui.com/components/glass-surface

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-surface.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-surface.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassSurface } from "@/components/glassyui/glass-surface";

export function SurfaceDemo() {
  return (
    <GlassSurface
      preset="prominent"
      refraction="soft"
      refractionBackground={<div className="absolute inset-0 bg-[linear-gradient(135deg,#f5f5f7_58%,#ff754c_63%,#f04a28_70%,#e5e5e7_75%)]" />}
      refractionBackgroundSpace="viewport"
      className="p-6"
    >
      Refractive surface
    </GlassSurface>
  );
}
```

#### Glass over a fixed wallpaper

```tsx
<div className="fixed inset-0 -z-10 bg-[url(/wallpaper.jpg)] bg-cover" />
<GlassSurface
  preset="showcase"
  refraction="strong"
  refractionBackground={<div className="absolute inset-0 bg-[url(/wallpaper.jpg)] bg-cover" />}
  refractionBackgroundSpace="viewport"
  className="p-10"
>
  Bends light
</GlassSurface>
```

#### Static surface

```tsx
<GlassSurface interactive={false} preset="subtle">
  Static glass
</GlassSurface>
```

### API reference

#### `GlassSurface`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `preset` | `'subtle' \| 'standard' \| 'prominent' \| 'control' \| 'showcase'` | 'standard' | Material strength. control and showcase also turn the lens on by default. |
| `lens` | `boolean` | true for control and showcase | Chromium-only rim lens that bends and splits the page behind it. Off with reduced transparency, while generated refraction runs, or above 720,000 px² of area. |
| `thickness` | `number` | thickness preference | Glass thickness as a multiple of regular (1); thicker glass widens the rim and bends further. |
| `refraction` | `'none' \| 'soft' \| 'strong'` | 'strong' for showcase, else 'none' | Generated refraction of refractionBackground. Needs refractionBackground and is off under reduced motion or reduced transparency. |
| `refractionBackground` | `ReactNode` | — | Decorative layer bent inside the surface; not for interactive or semantic content. Needs a uniform border radius. |
| `refractionBackgroundSpace` | `'local' \| 'viewport'` | 'local' | Aligns refractionBackground to the surface or to the viewport; use viewport for a fixed wallpaper. |
| `refractionDisplacement` | `number` | 72 soft, 112 strong | Bend strength of generated refraction. |
| `interactive` | `boolean` | false | Brightens the surface slightly on hover. |

Also accepts HTML div attributes.

Types: `GlassSurfaceProps`, `SurfacePreset`, `SurfaceRefraction`, `RefractionBackgroundSpace`

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-surface.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-surface.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { Image } from 'react-native';
import { GlassBackdrop } from '@/components/glassyui/glass-backdrop';
import { GlassSurface } from '@/components/glassyui/glass-surface';
const wallpaper = require('@/assets/wallpaper.jpg');

// Android blurs only what sits in a GlassBackdrop; iOS and the web blur whatever is behind.
export default function SurfaceExample() {
  return (
    <GlassBackdrop
      backdrop={<Image alt="" source={wallpaper} style={{ height: '100%', width: '100%' }} />}
      style={{ alignItems: 'center', height: 220, justifyContent: 'center' }}
    >
      <GlassSurface preset="prominent" style={{ borderRadius: 24, padding: 24 }}>
        Glass over a wallpaper
      </GlassSurface>
    </GlassBackdrop>
  );
}
```

## Glass Panel

A glass container in a panel, card or pill shape.

Page: https://glassyui.com/components/glass-panel

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-panel.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-panel.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-panel.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassPanel } from "@/components/glassyui/glass-panel";

export function PanelDemo() {
  return (
    <GlassPanel variant="card" elevation="raised">
      Panel content
    </GlassPanel>
  );
}
```

#### Pill panel

```tsx
<GlassPanel variant="pill" preset="control">
  Syncing
</GlassPanel>
```

### API reference

#### `GlassPanel`

A GlassSurface with shape, spacing and elevation.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'panel' \| 'card' \| 'pill'` | 'panel' | Shape and spacing. |
| `elevation` | `'base' \| 'raised'` | 'base' | Shadow and border level. |
| `preset` | `'subtle' \| 'standard' \| 'prominent' \| 'control' \| 'showcase'` | 'control' for pill, else 'standard' | Material strength, as on GlassSurface. |
| `lens` | `boolean` | true for control and showcase | Chromium-only rim lens, as on GlassSurface; pills get it by default. |
| `thickness` | `number` | thickness preference | Glass thickness as a multiple of regular (1). |
| `refraction` | `'none' \| 'soft' \| 'strong'` | 'strong' for showcase, else 'none' | Generated refraction; needs refractionBackground. |
| `refractionBackground` | `ReactNode` | — | Decorative layer bent inside the panel. |
| `refractionBackgroundSpace` | `'local' \| 'viewport'` | 'local' | Aligns refractionBackground to the panel or to the viewport. |
| `refractionDisplacement` | `number` | 72 soft, 112 strong | Bend strength of generated refraction. |
| `interactive` | `boolean` | false | Brightens the panel slightly on hover. |

Also accepts HTML div attributes.

Types: `GlassPanelProps`

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-panel.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-panel.json. Install its listed packages with npx expo install, then rebuild your development build.

This usage also uses Glass Provider. Install the complete example:

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-panel.json https://glassyui.com/r/native/glass-provider.json && npx expo install --fix
```

```tsx
import { Text } from 'react-native';
import { GlassPanel } from '@/components/glassyui/glass-panel';
import { useGlassTheme } from '@/components/glassyui/glass-provider';

export default function PanelExample() {
  const { colors } = useGlassTheme();

  return (
    <GlassPanel variant="card" style={{ gap: 4 }}>
      <Text style={{ color: colors.foreground, fontSize: 17, fontWeight: '600' }}>Morning run</Text>
      <Text style={{ color: colors.mutedForeground }}>5.2 km in 28 minutes</Text>
    </GlassPanel>
  );
}
```

## Glass Avatar

A round photo that falls back to initials, with a presence dot and stacked groups.

Page: https://glassyui.com/components/glass-avatar

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-avatar.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-avatar.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-avatar.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-avatar clsx
```

### Usage

```tsx
import { GlassAvatar } from "@/components/glassyui/glass-avatar";

export function PersonDemo() {
  return <GlassAvatar name="Ada Lovelace" src="/ada.jpg" status="online" />;
}
```

#### A stacked group

```tsx
<GlassAvatarGroup max={4} aria-label="Team">
  {people.map((person) => (
    <GlassAvatar key={person} name={person} />
  ))}
</GlassAvatarGroup>
```

### API reference

#### `GlassAvatar`

A span with role img, named by alt or name plus its status; the photo uses Radix Avatar inside it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | — | The person's name; supplies the initials and a stable initials colour. |
| `src` | `string` | — | Image URL; the initials show until it loads, or if it fails. |
| `alt` | `string` | name | Accessible name of the avatar. |
| `fallback` | `ReactNode` | initials of name | Replaces the initials. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | 'md' | Diameter; ignored inside a GlassAvatarGroup, which sizes its avatars. |
| `status` | `'online' \| 'away' \| 'busy' \| 'offline'` | — | A presence dot on the corner, also added to the accessible name. |

Also accepts HTML span attributes, except children.

#### `GlassAvatarGroup`

A div with role group that overlaps its avatars.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | GlassAvatar elements, placed directly inside the group. |
| `max` | `number` | — | Shows this many avatars, then a +N avatar for the rest. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | 'md' | Sizes every avatar in the group, overriding each avatar's own size. |

Also accepts HTML div attributes.

Types: `GlassAvatarProps`, `GlassAvatarSize`, `GlassAvatarStatus`, `GlassAvatarGroupProps`

Accessibility: Name each GlassAvatarGroup with aria-label; the avatar announces its name and status.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-avatar.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-avatar.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { View } from 'react-native';
import { GlassAvatar, GlassAvatarGroup } from '@/components/glassyui/glass-avatar';

const TEAM = ['Ada Lovelace', 'Grace Hopper', 'Alan Turing', 'Katherine Johnson'];

export default function AvatarExample() {
  return (
    <View style={{ alignItems: 'center', flexDirection: 'row', gap: 16 }}>
      {/* Pass src or source for a photo; the initials show until it loads. */}
      <GlassAvatar name="Morgan Lee" size="lg" status="online" />
      <GlassAvatarGroup accessibilityLabel="Team" max={3}>
        {TEAM.map((name) => (
          <GlassAvatar key={name} name={name} />
        ))}
      </GlassAvatarGroup>
    </View>
  );
}
```

## Glass Kbd

A keycap for showing keyboard shortcuts in menus, hints and docs.

Page: https://glassyui.com/components/glass-kbd

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-kbd.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-kbd.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-kbd.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassKbd, GlassKbdGroup } from "@/components/glassyui/glass-kbd";

export function SearchHint() {
  return (
    <GlassKbdGroup>
      <GlassKbd>⌘</GlassKbd>
      <GlassKbd>K</GlassKbd>
    </GlassKbdGroup>
  );
}
```

#### A single key

```tsx
<GlassKbd>esc</GlassKbd>
```

### API reference

#### `GlassKbd`

A kbd element for one key or symbol, with no client JavaScript.

Also accepts HTML element attributes.

#### `GlassKbdGroup`

A span that sets a shortcut's keys side by side.

Also accepts HTML span attributes.

## Glass Scroll Area

A scroll container with a thin glass scrollbar that shows on hover and while scrolling.

Page: https://glassyui.com/components/glass-scroll-area

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-scroll-area.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-scroll-area.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-scroll-area.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-scroll-area clsx
```

### Usage

```tsx
import { GlassScrollArea } from "@/components/glassyui/glass-scroll-area";

export function ReleaseNotes({ notes }: { notes: string[] }) {
  return (
    <GlassScrollArea
      className="h-64"
      viewportProps={{ "aria-label": "Release notes", role: "region", tabIndex: 0 }}
    >
      <ul className="space-y-3 p-4">
        {notes.map((note) => (
          <li key={note}>{note}</li>
        ))}
      </ul>
    </GlassScrollArea>
  );
}
```

#### Grow to a maximum height

```tsx
<GlassScrollArea className="max-h-80">{children}</GlassScrollArea>
```

#### Scroll sideways

```tsx
<GlassScrollArea scrollbars="horizontal">
  <div className="flex w-max gap-3">{cards}</div>
</GlassScrollArea>
```

#### Show the scrollbar whenever the content overflows

```tsx
<GlassScrollArea type="auto" className="h-64">{children}</GlassScrollArea>
```

### API reference

#### `GlassScrollArea`

A div whose viewport scrolls natively, with glass scrollbars in place of the system's.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `scrollbars` | `'vertical' \| 'horizontal' \| 'both'` | 'vertical' | Which scrollbars to draw. |
| `type` | `'hover' \| 'scroll' \| 'auto' \| 'always'` | 'hover' | When a scrollbar shows: on hover and while scrolling, only while scrolling, whenever the content overflows, or always. |
| `scrollHideDelay` | `number` | 600 | Milliseconds a scrollbar stays after the pointer leaves or scrolling stops. |
| `viewportProps` | `ScrollAreaViewportProps` | — | Props for the element that scrolls, such as a ref, role or aria-label. |

Also accepts HTML div attributes.

Types: `GlassScrollAreaProps`

Accessibility: When the content holds no links or controls, pass tabIndex={0}, role="region" and an aria-label in viewportProps so keyboard users can scroll it.

## Glass Button

A glass button with four variants, three sizes and an asChild mode for links.

Page: https://glassyui.com/components/glass-button

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-button.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-button.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-button.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-slot clsx
```

### Usage

```tsx
import { GlassButton } from "@/components/glassyui/glass-button";

export function ButtonDemo() {
  return <GlassButton>Save changes</GlassButton>;
}
```

#### Variants

```tsx
<div className="flex gap-3">
  <GlassButton variant="prominent">Prominent</GlassButton>
  <GlassButton variant="primary">Primary</GlassButton>
  <GlassButton variant="soft">Soft</GlassButton>
  <GlassButton variant="ghost">Ghost</GlassButton>
</div>
```

#### As a link

```tsx
<GlassButton asChild variant="prominent">
  <a href="/pricing">See pricing</a>
</GlassButton>
```

### API reference

#### `GlassButton`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'primary' \| 'prominent' \| 'soft' \| 'ghost'` | 'primary' | Visual style. prominent is blue glass for the main action; ghost has no glass. |
| `size` | `'sm' \| 'md' \| 'lg'` | 'md' | Control size. |
| `asChild` | `boolean` | false | Renders the single child, such as a link, with the button's material. disabled has no effect then. |
| `type` | `'button' \| 'submit' \| 'reset'` | 'button' | Native button type. Set 'submit' to submit a form. |
| `preset` | `'control' \| 'showcase'` | 'control' | Material preset; showcase allows a stronger backdrop blur. |
| `lens` | `boolean` | true except ghost | Chromium-only rim lens that bends the page behind it. Off while disabled or with reduced transparency. |

Also accepts HTML button attributes.

Types: `ButtonProps`, `ButtonVariant`, `ButtonSize`

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-button.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-button.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { useState } from 'react';
import { View } from 'react-native';
import { GlassButton } from '@/components/glassyui/glass-button';

export default function ButtonExample() {
  const [saved, setSaved] = useState(false);

  return (
    <View style={{ flexDirection: 'row', gap: 12 }}>
      <GlassButton variant="prominent" onPress={() => setSaved(true)}>
        {saved ? 'Saved' : 'Save'}
      </GlassButton>
      <GlassButton disabled={!saved} onPress={() => setSaved(false)}>
        Undo
      </GlassButton>
    </View>
  );
}
```

## Glass Input

A recessed glass text field with an optional label and hint.

Page: https://glassyui.com/components/glass-input

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-input.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-input.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-input.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassInput } from "@/components/glassyui/glass-input";

export function InputDemo() {
  return <GlassInput label="Project" placeholder="Glassy UI" hint="Visible over glass." />;
}
```

#### Email input

```tsx
<GlassInput
  type="email"
  label="Email"
  placeholder="alex@example.com"
  hint="Used for registry updates."
/>
```

### API reference

#### `GlassInput`

An input in a wrapper with its label and hint. className and ref go to the input.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Visible label above the field, linked with htmlFor. |
| `hint` | `string` | — | Helper text below the field, linked with aria-describedby. |
| `type` | `string` | 'text' | Native input type. |

Also accepts HTML input attributes.

Types: `GlassInputProps`

Accessibility: Without a label, name the field with aria-label.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-input.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-input.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { useState } from 'react';
import { GlassInput } from '@/components/glassyui/glass-input';

export default function InputExample() {
  const [email, setEmail] = useState('');

  return (
    <GlassInput
      autoCapitalize="none"
      hint="We only use it to reply."
      keyboardType="email-address"
      label="Email"
      onChangeText={setEmail}
      placeholder="you@example.com"
      value={email}
    />
  );
}
```

## Glass Checkbox

A glass checkbox with an optional label, description and indeterminate state.

Page: https://glassyui.com/components/glass-checkbox

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-checkbox.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-checkbox.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-checkbox.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-checkbox clsx
```

### Usage

```tsx
import { GlassCheckbox } from "@/components/glassyui/glass-checkbox";

export function CheckboxDemo() {
  return <GlassCheckbox defaultChecked label="Email me updates" description="One a month, at most." />;
}
```

#### A parent of several choices

```tsx
<GlassCheckbox
  checked={all ? true : none ? false : "indeterminate"}
  label="All channels"
  onCheckedChange={(checked) => setChannels(checked === true ? CHANNELS : [])}
/>
```

#### Without a visible label

```tsx
<GlassCheckbox aria-label="Select row" size="sm" />
```

### API reference

#### `GlassCheckbox`

With a label, className goes to the wrapper; without one, to the box.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `checked / defaultChecked` | `boolean \| 'indeterminate'` | — | Checked state; 'indeterminate' shows a dash for a parent of several choices. |
| `onCheckedChange` | `(checked: boolean \| 'indeterminate') => void` | — | Called when the user toggles the box. |
| `label` | `ReactNode` | — | Text beside the box; clicking it toggles the box. |
| `description` | `ReactNode` | — | Muted line under the label, linked with aria-describedby. Shown only with a label. |
| `size` | `'sm' \| 'md'` | 'md' | Box size: 16px or 20px. |

Also accepts Radix Checkbox.Root props, except children.

Types: `GlassCheckboxProps`, `GlassCheckboxSize`

Accessibility: Without a label, name the box with aria-label.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-checkbox.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-checkbox.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { useState } from 'react';
import { GlassCheckbox } from '@/components/glassyui/glass-checkbox';

export default function CheckboxExample() {
  const [weekly, setWeekly] = useState(true);

  return (
    <GlassCheckbox
      checked={weekly}
      description="One email every Monday."
      label="Weekly summary"
      onCheckedChange={setWeekly}
    />
  );
}
```

## Glass Radio Group

A group of glass radio buttons where exactly one option is chosen.

Page: https://glassyui.com/components/glass-radio-group

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-radio-group.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-radio-group.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-radio-group.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-radio-group clsx
```

### Usage

```tsx
import { GlassRadioGroup, GlassRadioGroupItem } from "@/components/glassyui/glass-radio-group";

export function PlanDemo() {
  return (
    <GlassRadioGroup aria-label="Plan" defaultValue="pro">
      <GlassRadioGroupItem value="starter" label="Starter" />
      <GlassRadioGroupItem value="pro" label="Pro" description="For teams shipping weekly." />
    </GlassRadioGroup>
  );
}
```

#### Controlled

```tsx
<GlassRadioGroup aria-label="Plan" value={plan} onValueChange={setPlan}>
  {PLANS.map((item) => (
    <GlassRadioGroupItem key={item.value} value={item.value} label={item.label} />
  ))}
</GlassRadioGroup>
```

### API reference

#### `GlassRadioGroup`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / defaultValue` | `string` | — | The chosen option's value. |
| `onValueChange` | `(value: string) => void` | — | Called when the user chooses an option. |

Also accepts Radix RadioGroup.Root props.

#### `GlassRadioGroupItem`

One option. With a label, className goes to the wrapper; without one, to the button.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `string` | — | The value this option sets. |
| `label` | `ReactNode` | — | Text beside the button; clicking it chooses the option. |
| `description` | `ReactNode` | — | Muted line under the label, linked with aria-describedby. Shown only with a label. |

Also accepts Radix RadioGroup.Item props, except children.

Types: `GlassRadioGroupProps`, `GlassRadioGroupItemProps`

Accessibility: Name the group with aria-label or aria-labelledby, and name any item without a label with aria-label.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-radio-group.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-radio-group.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { useState } from 'react';
import { GlassRadioGroup, GlassRadioGroupItem } from '@/components/glassyui/glass-radio-group';

export default function RadioGroupExample() {
  const [delivery, setDelivery] = useState('standard');

  return (
    <GlassRadioGroup accessibilityLabel="Delivery" onValueChange={setDelivery} value={delivery}>
      <GlassRadioGroupItem description="Three to five days." label="Standard" value="standard" />
      <GlassRadioGroupItem description="Next working day." label="Express" value="express" />
    </GlassRadioGroup>
  );
}
```

## Glass Textarea

A recessed glass text area that can grow with its text.

Page: https://glassyui.com/components/glass-textarea

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-textarea.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-textarea.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-textarea.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassTextarea } from "@/components/glassyui/glass-textarea";

export function MessageDemo() {
  return <GlassTextarea autoResize label="Message" hint="Grows as you type." placeholder="Say hello…" />;
}
```

#### Limit the growth

```tsx
<GlassTextarea autoResize maxRows={5} label="Notes" />
```

#### Fixed height with a resize handle

```tsx
<GlassTextarea rows={6} label="Bio" />
```

### API reference

#### `GlassTextarea`

A textarea in a wrapper with its label and hint. className and ref go to the textarea.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Visible label above the field, linked with htmlFor. |
| `hint` | `string` | — | Helper text below the field, linked with aria-describedby. |
| `rows` | `number` | 3 | Starting height in rows. Without autoResize the field has a vertical resize handle. |
| `autoResize` | `boolean` | false | Grows with its text, refitting when the width changes, then scrolls past maxRows. |
| `maxRows` | `number` | 8 | The most rows an auto-resizing field grows to. |

Also accepts HTML textarea attributes.

Types: `GlassTextareaProps`

Accessibility: Without a label, name the field with aria-label.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-textarea.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-textarea.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { useState } from 'react';
import { GlassTextarea } from '@/components/glassyui/glass-textarea';

export default function TextareaExample() {
  const [notes, setNotes] = useState('');

  return (
    <GlassTextarea
      label="Notes"
      maxRows={6}
      onChangeText={setNotes}
      placeholder="Add a note"
      value={notes}
    />
  );
}
```

## Glass Select

A select field whose options open on a raised glass panel.

Page: https://glassyui.com/components/glass-select

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-select.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-select.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-select.tsx`
- `components/glassyui/glass-panel.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-select clsx
```

### Usage

```tsx
import {
  GlassSelect,
  GlassSelectContent,
  GlassSelectItem,
  GlassSelectTrigger,
  GlassSelectValue,
} from "@/components/glassyui/glass-select";

export function FrameworkDemo() {
  return (
    <GlassSelect>
      <GlassSelectTrigger aria-label="Framework">
        <GlassSelectValue placeholder="Choose a framework" />
      </GlassSelectTrigger>
      <GlassSelectContent>
        <GlassSelectItem value="next">Next.js</GlassSelectItem>
        <GlassSelectItem value="remix">Remix</GlassSelectItem>
      </GlassSelectContent>
    </GlassSelect>
  );
}
```

#### Groups and separators

```tsx
<GlassSelectContent>
  <GlassSelectGroup>
    <GlassSelectLabel>React</GlassSelectLabel>
    <GlassSelectItem value="next">Next.js</GlassSelectItem>
  </GlassSelectGroup>
  <GlassSelectSeparator />
  <GlassSelectGroup>
    <GlassSelectLabel>Other</GlassSelectLabel>
    <GlassSelectItem value="astro">Astro</GlassSelectItem>
  </GlassSelectGroup>
</GlassSelectContent>
```

### API reference

#### `GlassSelect`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / defaultValue` | `string` | — | Controlled or uncontrolled selected value. |
| `onValueChange` | `(value: string) => void` | — | Called with the value of the chosen item. |
| `open / onOpenChange` | `boolean / (open: boolean) => void` | — | Controls whether the list is open. |
| `name` | `string` | — | Submits the value with a native form, and a form reset restores the initial value. |
| `disabled` | `boolean` | false | Stops the select from opening. |

Also accepts Radix Select.Root props.

#### `GlassSelectTrigger`

The closed field, with a chevron.

Also accepts Radix Select.Trigger props.

#### `GlassSelectValue`

Shows the chosen item's text inside the trigger.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `ReactNode` | — | Shown while no value is chosen. |

Also accepts Radix Select.Value props.

#### `GlassSelectContent`

The open list on a glass panel, at least as wide as the trigger.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `position` | `'popper' \| 'item-aligned'` | 'popper' | popper places the list below the trigger; item-aligned lays it over the trigger at the chosen item. |
| `sideOffset` | `number` | 8 | Gap between the trigger and the list, in pixels. |
| `className` | `string` | — | Applies to the glass panel. |

Also accepts Radix Select.Content props.

#### `GlassSelectItem`

One option, with a check mark when chosen.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `string` | — | The option's value. Cannot be an empty string; an empty value shows the placeholder. |
| `disabled` | `boolean` | false | Makes the option unselectable. |

Also accepts Radix Select.Item props.

#### `GlassSelectGroup / GlassSelectLabel / GlassSelectSeparator`

Group options under a heading and divide groups with a line.

Also accepts Radix Select.Group, Select.Label and Select.Separator props.

Types: `GlassSelectTriggerProps`, `GlassSelectContentProps`, `GlassSelectItemProps`

Accessibility: Name the trigger with aria-label or a label element; it shows only the chosen value.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-select.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-select.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { useState } from 'react';
import {
  GlassSelect,
  GlassSelectContent,
  GlassSelectItem,
  GlassSelectTrigger,
  GlassSelectValue,
} from '@/components/glassyui/glass-select';

export default function SelectExample() {
  const [city, setCity] = useState('');

  return (
    <GlassSelect onValueChange={setCity} value={city}>
      <GlassSelectTrigger accessibilityLabel="City">
        <GlassSelectValue placeholder="Choose a city" />
      </GlassSelectTrigger>
      <GlassSelectContent>
        <GlassSelectItem value="lisbon">Lisbon</GlassSelectItem>
        <GlassSelectItem value="oslo">Oslo</GlassSelectItem>
        <GlassSelectItem value="tokyo">Tokyo</GlassSelectItem>
      </GlassSelectContent>
    </GlassSelect>
  );
}
```

## Glass Switch

A glass on/off switch in two sizes.

Page: https://glassyui.com/components/glass-switch

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-switch.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-switch.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-switch.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/liquid-motion.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-switch clsx
```

### Usage

```tsx
import { GlassSwitch } from "@/components/glassyui/glass-switch";

export function SwitchDemo() {
  return <GlassSwitch aria-label="Notifications" defaultChecked />;
}
```

#### With a visible label

```tsx
<label className="flex items-center justify-between gap-4 select-none">
  Autosave
  <GlassSwitch />
</label>
```

#### Small

```tsx
<GlassSwitch aria-label="Mute" size="sm" />
```

### API reference

#### `GlassSwitch`

A button with role switch and a glass knob.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `'sm' \| 'md'` | 'md' | Track size. |
| `checked / defaultChecked` | `boolean` | false | Controlled or uncontrolled on state. |
| `onCheckedChange` | `(checked: boolean) => void` | — | Called with the next checked value. |
| `disabled` | `boolean` | false | Stops the switch from toggling. |
| `name / value` | `string` | — / 'on' | Submits the switch with a native form when checked. |

Also accepts Radix Switch.Root props.

Types: `GlassSwitchProps`

Accessibility: Name the switch with aria-label or wrap it in a visible label element.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-switch.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-switch.json. Install its listed packages with npx expo install, then rebuild your development build.

This usage also uses Glass Provider. Install the complete example:

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-switch.json https://glassyui.com/r/native/glass-provider.json && npx expo install --fix
```

```tsx
import { useState } from 'react';
import { Text, View } from 'react-native';
import { useGlassTheme } from '@/components/glassyui/glass-provider';
import { GlassSwitch } from '@/components/glassyui/glass-switch';

export default function SwitchExample() {
  const { colors } = useGlassTheme();
  const [notifications, setNotifications] = useState(true);

  return (
    <View style={{ alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between' }}>
      <Text style={{ color: colors.foreground, fontSize: 16 }}>Notifications</Text>
      <GlassSwitch
        accessibilityLabel="Notifications"
        checked={notifications}
        onCheckedChange={setNotifications}
      />
    </View>
  );
}
```

## Glass Slider

A glass slider for one value or a range, with one named thumb per value.

Page: https://glassyui.com/components/glass-slider

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-slider.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-slider.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-slider.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/liquid-motion.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-slider clsx
```

### Usage

```tsx
import { GlassSlider } from "@/components/glassyui/glass-slider";

export function SliderDemo() {
  return <GlassSlider aria-label="Volume" defaultValue={[60]} max={100} step={1} />;
}
```

#### Range

```tsx
<GlassSlider
  aria-label="Price"
  defaultValue={[20, 80]}
  thumbLabels={["Minimum price", "Maximum price"]}
/>
```

### API reference

#### `GlassSlider`

Renders the track, the filled range and one thumb per value.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / defaultValue` | `number[]` | [min] | Controlled or uncontrolled values; the array length sets the number of thumbs. |
| `onValueChange` | `(value: number[]) => void` | — | Called on every change while dragging or stepping. |
| `onValueCommit` | `(value: number[]) => void` | — | Called when a drag ends or a key changes the value. |
| `min / max / step` | `number` | 0 / 100 / 1 | Range and increment of the values. |
| `aria-label` | `string` | — | Moved to the thumbs: a single thumb takes it as is; range thumbs get it with ', minimum', ', maximum' or ', 2 of 3' added. |
| `thumbLabels` | `string[]` | — | Names each thumb in value order, replacing the names built from aria-label. |

Also accepts Radix Slider.Root props.

Types: `GlassSliderProps`

Accessibility: Each thumb is its own slider; name range sliders with aria-label or thumbLabels, because aria-labelledby is copied to every thumb and gives them all the same name.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-slider.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-slider.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { useState } from 'react';
import { GlassSlider } from '@/components/glassyui/glass-slider';

export default function SliderExample() {
  const [price, setPrice] = useState([20, 80]);

  return <GlassSlider accessibilityLabel="Price" onValueChange={setPrice} step={5} value={price} />;
}
```

## Glass Segmented Control

A single-choice glass control for two to six options, with a draggable selection.

Page: https://glassyui.com/components/glass-segmented-control

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-segmented-control.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-segmented-control.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-segmented-control.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/liquid-motion.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`
- `components/glassyui/glass-panel.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-radio-group clsx
```

### Usage

```tsx
import { GlassSegmentedControl, GlassSegmentedControlItem } from "@/components/glassyui/glass-segmented-control";

export function SegmentedDemo() {
  return (
    <GlassSegmentedControl aria-label="View" defaultValue="week">
      <GlassSegmentedControlItem value="day">Day</GlassSegmentedControlItem>
      <GlassSegmentedControlItem value="week">Week</GlassSegmentedControlItem>
      <GlassSegmentedControlItem value="month">Month</GlassSegmentedControlItem>
    </GlassSegmentedControl>
  );
}
```

#### Controlled

```tsx
const [view, setView] = useState("list");

<GlassSegmentedControl aria-label="Layout" value={view} onValueChange={setView}>
  <GlassSegmentedControlItem value="list">List</GlassSegmentedControlItem>
  <GlassSegmentedControlItem value="grid">Grid</GlassSegmentedControlItem>
</GlassSegmentedControl>
```

### API reference

#### `GlassSegmentedControl`

A Radix RadioGroup root rendered as a glass pill.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / defaultValue` | `string` | — | The selected option, controlled or uncontrolled. |
| `onValueChange` | `(value: string) => void` | — | Called with the value of the newly selected option. |
| `children` | `ReactNode` | — | Two to six GlassSegmentedControlItem elements placed directly inside the control, which CSS counts to place the selection before scripts run. |

Also accepts Radix RadioGroup.Root props.

#### `GlassSegmentedControlItem`

One option; options share the width equally.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `string` | — | The value this option selects. |

Also accepts Radix RadioGroup.Item props.

Types: `GlassSegmentedControlProps`

Accessibility: Name the group with aria-label or aria-labelledby; arrow keys move the selection, as in any radio group.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-segmented-control.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-segmented-control.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { useState } from 'react';
import {
  GlassSegmentedControl,
  GlassSegmentedControlItem,
} from '@/components/glassyui/glass-segmented-control';

export default function SegmentedControlExample() {
  const [period, setPeriod] = useState('week');

  return (
    <GlassSegmentedControl accessibilityLabel="Period" onValueChange={setPeriod} value={period}>
      <GlassSegmentedControlItem value="day">Day</GlassSegmentedControlItem>
      <GlassSegmentedControlItem value="week">Week</GlassSegmentedControlItem>
      <GlassSegmentedControlItem value="month">Month</GlassSegmentedControlItem>
    </GlassSegmentedControl>
  );
}
```

## Glass Dialog

A modal glass dialog with an overlay, a focus trap and a close button.

Page: https://glassyui.com/components/glass-dialog

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-dialog.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-dialog.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-dialog.tsx`
- `components/glassyui/glass-panel.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-dialog clsx
```

### Usage

```tsx
import { GlassDialog, GlassDialogContent, GlassDialogTitle, GlassDialogTrigger } from "@/components/glassyui/glass-dialog";

export function DialogDemo() {
  return (
    <GlassDialog>
      <GlassDialogTrigger>Open</GlassDialogTrigger>
      <GlassDialogContent>
        <GlassDialogTitle>Glass dialog</GlassDialogTitle>
      </GlassDialogContent>
    </GlassDialog>
  );
}
```

#### Modal content

```tsx
<GlassDialogContent>Modal content</GlassDialogContent>
```

### API reference

#### `GlassDialog`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open / defaultOpen` | `boolean` | false | Controlled or uncontrolled open state. |
| `onOpenChange` | `(open: boolean) => void` | — | Called when the dialog opens or closes. |
| `modal` | `boolean` | true | Traps focus and makes the page behind inert. |

Also accepts Radix Dialog.Root props.

#### `GlassDialogTrigger`

Opens the dialog.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | false | Renders your own element, such as a GlassButton, as the trigger. |

Also accepts Radix Dialog.Trigger props.

#### `GlassDialogContent`

Renders the portal, overlay, glass panel and a close button in the corner.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `closeLabel` | `string` | 'Close dialog' | Accessible name of the built-in close button. |
| `thickness` | `number` | thickness preference | Glass thickness as a multiple of regular (1); thicker glass bends the backdrop further at the rim. |
| `className` | `string` | — | Applies to the glass panel. |

Also accepts Radix Dialog.Content props.

#### `GlassDialogTitle`

The dialog's heading and accessible name.

Also accepts Radix Dialog.Title props.

#### `GlassDialogDescription`

Supporting text, linked to the dialog with aria-describedby.

Also accepts Radix Dialog.Description props.

#### `GlassDialogPortal / GlassDialogOverlay`

The portal and the dimmed overlay. GlassDialogContent already renders both; use them only to build your own content.

Also accepts Radix Dialog.Portal and Dialog.Overlay props.

Types: `GlassDialogContentProps`

Accessibility: Put a GlassDialogTitle in every dialog; the dialog takes its accessible name from it.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-dialog.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-dialog.json. Install its listed packages with npx expo install, then rebuild your development build.

This usage also uses Glass Button. Install the complete example:

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-dialog.json https://glassyui.com/r/native/glass-button.json && npx expo install --fix
```

```tsx
import { View } from 'react-native';
import { GlassButton } from '@/components/glassyui/glass-button';
import {
  GlassDialog,
  GlassDialogClose,
  GlassDialogContent,
  GlassDialogDescription,
  GlassDialogTitle,
  GlassDialogTrigger,
} from '@/components/glassyui/glass-dialog';

export default function DialogExample() {
  return (
    <GlassDialog>
      <GlassDialogTrigger>
        <GlassButton>Delete draft</GlassButton>
      </GlassDialogTrigger>
      <GlassDialogContent>
        <GlassDialogTitle>Delete this draft?</GlassDialogTitle>
        <GlassDialogDescription>It will be removed from all your devices.</GlassDialogDescription>
        <View style={{ flexDirection: 'row', gap: 12, marginTop: 16 }}>
          <GlassDialogClose>
            <GlassButton>Cancel</GlassButton>
          </GlassDialogClose>
          <GlassDialogClose>
            <GlassButton variant="prominent">Delete</GlassButton>
          </GlassDialogClose>
        </View>
      </GlassDialogContent>
    </GlassDialog>
  );
}
```

## Glass Popover

A glass popover anchored to the control that opens it.

Page: https://glassyui.com/components/glass-popover

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-popover.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-popover.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-popover.tsx`
- `components/glassyui/glass-panel.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-popover clsx
```

### Usage

```tsx
import { GlassPopover, GlassPopoverContent, GlassPopoverTrigger } from "@/components/glassyui/glass-popover";

export function PopoverDemo() {
  return (
    <GlassPopover>
      <GlassPopoverTrigger>Open</GlassPopoverTrigger>
      <GlassPopoverContent>Glass popover</GlassPopoverContent>
    </GlassPopover>
  );
}
```

#### Side offset

```tsx
<GlassPopoverContent sideOffset={16}>Content</GlassPopoverContent>
```

### API reference

#### `GlassPopover`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open / defaultOpen` | `boolean` | false | Controlled or uncontrolled open state. |
| `onOpenChange` | `(open: boolean) => void` | — | Called when the popover opens or closes. |

Also accepts Radix Popover.Root props.

#### `GlassPopoverTrigger`

Toggles the popover.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | false | Renders your own element, such as a GlassButton, as the trigger. |

Also accepts Radix Popover.Trigger props.

#### `GlassPopoverAnchor`

Positions the popover against an element other than the trigger.

Also accepts Radix Popover.Anchor props.

#### `GlassPopoverContent`

The floating glass panel, rendered in a portal.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `sideOffset` | `number` | 12 | Gap between the trigger and the panel, in pixels. |
| `side / align` | `'top' \| 'right' \| 'bottom' \| 'left' / 'start' \| 'center' \| 'end'` | 'bottom' / 'center' | Preferred placement; it flips to stay on screen. |
| `thickness` | `number` | thickness preference | Glass thickness as a multiple of regular (1); thicker glass bends the backdrop further at the rim. |
| `className` | `string` | — | Applies to the glass panel. |

Also accepts Radix Popover.Content props.

Types: `GlassPopoverContentProps`

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-popover.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-popover.json. Install its listed packages with npx expo install, then rebuild your development build.

This usage also uses Glass Button. Install the complete example:

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-popover.json https://glassyui.com/r/native/glass-button.json && npx expo install --fix
```

```tsx
import { GlassButton } from '@/components/glassyui/glass-button';
import {
  GlassPopover,
  GlassPopoverContent,
  GlassPopoverTrigger,
} from '@/components/glassyui/glass-popover';

export default function PopoverExample() {
  return (
    <GlassPopover>
      <GlassPopoverTrigger>
        <GlassButton>Delivery</GlassButton>
      </GlassPopoverTrigger>
      <GlassPopoverContent>Arrives Thursday between 9:00 and 12:00.</GlassPopoverContent>
    </GlassPopover>
  );
}
```

## Glass Sheet

A modal glass panel that slides in from a screen edge; bottom sheets drag down to close.

Page: https://glassyui.com/components/glass-sheet

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-sheet.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-sheet.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-sheet.tsx`
- `components/glassyui/glass-panel.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-dialog clsx
```

### Usage

```tsx
import { GlassSheet, GlassSheetContent, GlassSheetDescription, GlassSheetTitle, GlassSheetTrigger } from "@/components/glassyui/glass-sheet";

export function SheetDemo() {
  return (
    <GlassSheet>
      <GlassSheetTrigger>Share</GlassSheetTrigger>
      <GlassSheetContent>
        <GlassSheetTitle>Share photo</GlassSheetTitle>
        <GlassSheetDescription>Send it to a nearby device.</GlassSheetDescription>
      </GlassSheetContent>
    </GlassSheet>
  );
}
```

#### Side sheet

```tsx
<GlassSheetContent side="right">Inspector</GlassSheetContent>
```

#### Opened from a menu

```tsx
const menuRef = useRef<HTMLButtonElement>(null);

<GlassMenu>
  <GlassMenuTrigger ref={menuRef}>File</GlassMenuTrigger>
  <GlassMenuContent>
    <GlassMenuItem onSelect={() => setOpen(true)}>Share…</GlassMenuItem>
  </GlassMenuContent>
</GlassMenu>
<GlassSheet open={open} onOpenChange={setOpen}>
  <GlassSheetContent
    onCloseAutoFocus={(event) => {
      event.preventDefault();
      menuRef.current?.focus();
    }}
  >
    <GlassSheetTitle>Share photo</GlassSheetTitle>
  </GlassSheetContent>
</GlassSheet>
```

### API reference

#### `GlassSheet`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open / defaultOpen` | `boolean` | — | Controlled or initial open state. |
| `onOpenChange` | `(open: boolean) => void` | — | Called when the sheet opens or closes. |

Also accepts Radix Dialog.Root props.

#### `GlassSheetTrigger`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | false | Uses your own element, such as a GlassButton, as the trigger. |

Also accepts Radix Dialog.Trigger props.

#### `GlassSheetContent`

Portal, overlay, glass panel and a close button in the top corner.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | 'bottom' | Edge the sheet slides in from. Only bottom sheets get a drag handle that dismisses them. |
| `closeLabel` | `string` | 'Close sheet' | Accessible name of the close button. |
| `thickness` | `number` | thickness preference | Glass thickness as a multiple of regular. |
| `onCloseAutoFocus` | `(event: Event) => void` | — | Radix focus hook; use it to send focus back when the sheet has no trigger. |

Also accepts Radix Dialog.Content props.

#### `GlassSheetTitle`

Also accepts Radix Dialog.Title props.

#### `GlassSheetDescription`

Also accepts Radix Dialog.Description props.

#### `GlassSheetClose`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | false | Uses your own element as an extra close control. |

Also accepts Radix Dialog.Close props.

Types: `GlassSheetContentProps`, `GlassSheetSide`

Accessibility: Render a GlassSheetTitle in every sheet, and when a sheet opens from a menu item rather than a trigger, return focus to the menu button in onCloseAutoFocus.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-sheet.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-sheet.json. Install its listed packages with npx expo install, then rebuild your development build.

This usage also uses Glass Button. Install the complete example:

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-sheet.json https://glassyui.com/r/native/glass-button.json && npx expo install --fix
```

```tsx
import { View } from 'react-native';
import { GlassButton } from '@/components/glassyui/glass-button';
import {
  GlassSheet,
  GlassSheetClose,
  GlassSheetContent,
  GlassSheetDescription,
  GlassSheetTitle,
  GlassSheetTrigger,
} from '@/components/glassyui/glass-sheet';

// Bottom sheets drag down to close. Pass side="top", "left" or "right" for the other edges.
export default function SheetExample() {
  return (
    <GlassSheet>
      <GlassSheetTrigger>
        <GlassButton>Share</GlassButton>
      </GlassSheetTrigger>
      <GlassSheetContent>
        <GlassSheetTitle>Share photo</GlassSheetTitle>
        <GlassSheetDescription>Send it to a nearby device.</GlassSheetDescription>
        <View style={{ flexDirection: 'row', gap: 12, marginTop: 16 }}>
          <GlassSheetClose>
            <GlassButton>Copy link</GlassButton>
          </GlassSheetClose>
          <GlassSheetClose>
            <GlassButton variant="prominent">Send</GlassButton>
          </GlassSheetClose>
        </View>
      </GlassSheetContent>
    </GlassSheet>
  );
}
```

## Glass Menu

A glass dropdown menu with shortcuts, checkbox and radio items, and submenus.

Page: https://glassyui.com/components/glass-menu

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-menu.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-menu.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-menu.tsx`
- `components/glassyui/glass-panel.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-dropdown-menu clsx
```

### Usage

```tsx
import { GlassMenu, GlassMenuContent, GlassMenuItem, GlassMenuShortcut, GlassMenuTrigger } from "@/components/glassyui/glass-menu";

export function MenuDemo() {
  return (
    <GlassMenu>
      <GlassMenuTrigger>Edit</GlassMenuTrigger>
      <GlassMenuContent>
        <GlassMenuItem>
          Undo <GlassMenuShortcut>⌘Z</GlassMenuShortcut>
        </GlassMenuItem>
        <GlassMenuItem tone="destructive">Delete</GlassMenuItem>
      </GlassMenuContent>
    </GlassMenu>
  );
}
```

#### Options and submenus

```tsx
<GlassMenuContent>
  <GlassMenuLabel>View</GlassMenuLabel>
  <GlassMenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
    Show grid
  </GlassMenuCheckboxItem>
  <GlassMenuSeparator />
  <GlassMenuSub>
    <GlassMenuSubTrigger>Sort by</GlassMenuSubTrigger>
    <GlassMenuSubContent>
      <GlassMenuRadioGroup value={sort} onValueChange={setSort}>
        <GlassMenuRadioItem value="name">Name</GlassMenuRadioItem>
        <GlassMenuRadioItem value="date">Date</GlassMenuRadioItem>
      </GlassMenuRadioGroup>
    </GlassMenuSubContent>
  </GlassMenuSub>
</GlassMenuContent>
```

### API reference

#### `GlassMenu`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `modal` | `boolean` | false | Locks page scroll and hides the page from assistive technology while open. Off by default, so the page keeps its scroll. |
| `open / defaultOpen` | `boolean` | — | Controlled or initial open state. |
| `onOpenChange` | `(open: boolean) => void` | — | Called when the menu opens or closes. |

Also accepts Radix DropdownMenu.Root props.

#### `GlassMenuTrigger`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | false | Uses your own element, such as a GlassButton, as the trigger. |

Also accepts Radix DropdownMenu.Trigger props.

#### `GlassMenuContent`

The glass panel, rendered in a portal.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `sideOffset` | `number` | 8 | Gap in pixels between the trigger and the menu. |
| `thickness` | `number` | thickness preference | Glass thickness as a multiple of regular. |

Also accepts Radix DropdownMenu.Content props.

#### `GlassMenuItem`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `'default' \| 'destructive'` | 'default' | destructive colours the item for actions such as Delete. |
| `inset` | `boolean` | false | Indents the label to line up with checkbox and radio items. |
| `onSelect` | `(event: Event) => void` | — | Called when the item is chosen by click or keyboard. |

Also accepts Radix DropdownMenu.Item props.

#### `GlassMenuCheckboxItem`

An item with a check mark.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `checked` | `boolean \| 'indeterminate'` | — | Whether the check shows. |
| `onCheckedChange` | `(checked: boolean) => void` | — | Called when the item is toggled. |

Also accepts Radix DropdownMenu.CheckboxItem props.

#### `GlassMenuRadioGroup`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / onValueChange` | `string / (value: string) => void` | — | The selected item's value, and the handler that changes it. |

Also accepts Radix DropdownMenu.RadioGroup props.

#### `GlassMenuRadioItem`

An item with a dot when selected.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `string` | — | The value this item selects in its GlassMenuRadioGroup. |

Also accepts Radix DropdownMenu.RadioItem props.

#### `GlassMenuGroup`

Also accepts Radix DropdownMenu.Group props.

#### `GlassMenuLabel / GlassMenuSeparator`

A section label and a hairline divider.

Also accepts Radix DropdownMenu.Label / Separator props.

#### `GlassMenuShortcut`

A keyboard shortcut hint pushed to the end of an item.

Also accepts HTML span attributes.

#### `GlassMenuSub`

Also accepts Radix DropdownMenu.Sub props.

#### `GlassMenuSubTrigger`

The item that opens a submenu, with a chevron.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `inset` | `boolean` | false | Indents the label to line up with checkbox and radio items. |

Also accepts Radix DropdownMenu.SubTrigger props.

#### `GlassMenuSubContent`

The submenu's glass panel, rendered in a portal.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `sideOffset` | `number` | 6 | Gap in pixels between the submenu and its trigger. |
| `alignOffset` | `number` | -6 | Shifts the submenu along its trigger so the first item lines up. |

Also accepts Radix DropdownMenu.SubContent props.

Types: `GlassMenuContentProps`, `GlassMenuItemProps`

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-menu.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-menu.json. Install its listed packages with npx expo install, then rebuild your development build.

This usage also uses Glass Button. Install the complete example:

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-menu.json https://glassyui.com/r/native/glass-button.json && npx expo install --fix
```

```tsx
import { useState } from 'react';
import { GlassButton } from '@/components/glassyui/glass-button';
import {
  GlassMenu,
  GlassMenuCheckboxItem,
  GlassMenuContent,
  GlassMenuItem,
  GlassMenuSeparator,
  GlassMenuTrigger,
} from '@/components/glassyui/glass-menu';

export default function MenuExample() {
  const [pinned, setPinned] = useState(false);

  return (
    <GlassMenu>
      <GlassMenuTrigger>
        <GlassButton>Options</GlassButton>
      </GlassMenuTrigger>
      <GlassMenuContent>
        <GlassMenuItem onSelect={() => setPinned(false)}>Duplicate</GlassMenuItem>
        <GlassMenuCheckboxItem checked={pinned} onCheckedChange={setPinned}>
          Pin to top
        </GlassMenuCheckboxItem>
        <GlassMenuSeparator />
        <GlassMenuItem tone="destructive">Delete</GlassMenuItem>
      </GlassMenuContent>
    </GlassMenu>
  );
}
```

## Glass Command

A searchable command list that filters as you type, alone or in a dialog.

Page: https://glassyui.com/components/glass-command

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-command.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-command.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-command.tsx`
- `components/glassyui/glass-panel.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-dialog clsx cmdk
```

### Usage

```tsx
import {
  GlassCommand,
  GlassCommandDialog,
  GlassCommandEmpty,
  GlassCommandGroup,
  GlassCommandInput,
  GlassCommandItem,
  GlassCommandList,
} from "@/components/glassyui/glass-command";

export function Launcher({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
  return (
    <GlassCommandDialog open={open} onOpenChange={onOpenChange}>
      <GlassCommand label="Commands">
        <GlassCommandInput placeholder="Type a command or search…" />
        <GlassCommandList>
          <GlassCommandEmpty>No results found.</GlassCommandEmpty>
          <GlassCommandGroup heading="Suggestions">
            <GlassCommandItem onSelect={() => onOpenChange(false)}>New file</GlassCommandItem>
          </GlassCommandGroup>
        </GlassCommandList>
      </GlassCommand>
    </GlassCommandDialog>
  );
}
```

#### Open with ⌘K

```tsx
useEffect(() => {
  const onKeyDown = (event: KeyboardEvent) => {
    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
      event.preventDefault();
      setOpen((current) => !current);
    }
  };

  document.addEventListener("keydown", onKeyDown);

  return () => document.removeEventListener("keydown", onKeyDown);
}, []);
```

#### Shortcuts and keywords

```tsx
<GlassCommandItem keywords={["dark", "light"]} onSelect={toggleTheme}>
  Switch theme
  <GlassCommandShortcut>
    <GlassKbdGroup><GlassKbd>⌘</GlassKbd><GlassKbd>T</GlassKbd></GlassKbdGroup>
  </GlassCommandShortcut>
</GlassCommandItem>
```

### API reference

#### `GlassCommand`

The searchable list, with no glass of its own. Place it in GlassCommandDialog, a GlassPanel or a GlassPopover.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Accessible name of the list. Not shown. |
| `value / onValueChange` | `string / (value: string) => void` | — | The highlighted item's value, and the handler that changes it. |
| `shouldFilter` | `boolean` | true | Set to false to filter the items yourself. |
| `filter` | `(value: string, search: string, keywords?: string[]) => number` | cmdk's fuzzy score | Scores each item from 0 (hidden) to 1 (best match). |
| `loop` | `boolean` | false | Wraps the arrow keys from the last item to the first. |

Also accepts cmdk Command props.

#### `GlassCommandDialog`

A glass dialog near the top of the page that holds a GlassCommand.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open / onOpenChange` | `boolean / (open: boolean) => void` | — | Controlled open state and its handler. |
| `title` | `string` | 'Command menu' | Accessible name of the dialog. Not shown. |
| `className` | `string` | — | Classes for the glass panel. |

Also accepts Radix Dialog.Root props.

#### `GlassCommandInput`

The search field, with a magnifier icon.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / onValueChange` | `string / (search: string) => void` | — | Controlled search text and its handler. |

Also accepts cmdk Command.Input props.

#### `GlassCommandList`

The scrolling results. Its height follows the results, up to 22rem or 60% of the viewport.

Also accepts cmdk Command.List props.

#### `GlassCommandEmpty`

Shown only when the search matches nothing.

Also accepts cmdk Command.Empty props.

#### `GlassCommandGroup`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `ReactNode` | — | The group's heading. Without one, pass a unique value. |

Also accepts cmdk Command.Group props.

#### `GlassCommandItem`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onSelect` | `(value: string) => void` | — | Runs on Enter or click. |
| `value` | `string` | the item's text | Unique value used for search and selection. Pass one if the text changes. |
| `keywords` | `string[]` | — | Extra words the search matches. |
| `disabled` | `boolean` | false | Skips the item in navigation and selection. |

Also accepts cmdk Command.Item props.

#### `GlassCommandSeparator`

A decorative divider between groups, hidden from assistive technology.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `alwaysRender` | `boolean` | false | Keeps the divider while a search is typed; by default it hides. |

Also accepts HTML div attributes.

#### `GlassCommandShortcut`

A shortcut hint pushed to the end of an item. Put GlassKbd keys inside.

Also accepts HTML span attributes.

Types: `GlassCommandDialogProps`, `GlassCommandSeparatorProps`

Accessibility: GlassCommandDialog returns focus to the element that had it when the dialog opened.

## Glass Header

A floating glass header with a brand, navigation links, actions and a compact menu.

Page: https://glassyui.com/components/glass-header

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-header.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-header.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-header.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/liquid-motion.ts`
- `components/glassyui/styles/header.css`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassHeader } from "@/components/glassyui/glass-header";
import { GlassButton } from "@/components/glassyui/glass-button";

export function Header() {
  return (
    <GlassHeader
      brand={<a href="/">Acme</a>}
      actions={
        <GlassButton asChild size="sm" variant="prominent">
          <a href="/start">Get started</a>
        </GlassButton>
      }
    >
      <a href="/features">Features</a>
      <a href="/pricing">Pricing</a>
      <a href="/docs">Docs</a>
    </GlassHeader>
  );
}
```

#### Inside a layout

```tsx
<GlassHeader brand={<a href="/">Acme</a>} position="static">
  <a href="/features">Features</a>
  <a href="/pricing" aria-current="page">Pricing</a>
</GlassHeader>
```

### API reference

#### `GlassHeader`

A header element with a nav for its links.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` (required) | `ReactNode` | — | Logo or wordmark, usually linked to the home page. |
| `children` | `ReactNode` | — | Navigation links. They render twice, in the inline nav and in the Menu used below 780px of header width, so avoid ids inside them. |
| `actions` | `ReactNode` | — | Buttons or links at the end, shown at every width. |
| `position` | `'fixed' \| 'static'` | 'fixed' | fixed floats 14px from the top (8px on narrow screens) and needs about 84px of room above your content; static stays in the layout. |
| `condenseOnScroll` | `boolean` | false | Starts as a full-width bar without glass and condenses into the capsule after 8px of scroll. Fixed headers only. |
| `navigationLabel` | `string` | 'Primary' | Accessible name for both navs. |

Also accepts HTML header attributes.

Types: `GlassHeaderProps`

Accessibility: Give each header a unique navigationLabel when a page has more than one.

## Glass Tabs

Tabs on a glass pill, with one indicator that moves to the selected tab.

Page: https://glassyui.com/components/glass-tabs

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-tabs.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-tabs.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-tabs.tsx`
- `components/glassyui/lib/liquid-motion.ts`
- `components/glassyui/glass-panel.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-tabs clsx
```

### Usage

```tsx
import { GlassTabs, GlassTabsContent, GlassTabsList, GlassTabsTrigger } from "@/components/glassyui/glass-tabs";

export function TabsDemo() {
  return (
    <GlassTabs defaultValue="preview">
      <GlassTabsList>
        <GlassTabsTrigger value="preview">Preview</GlassTabsTrigger>
        <GlassTabsTrigger value="code">Code</GlassTabsTrigger>
      </GlassTabsList>
      <GlassTabsContent value="preview">Glass preview</GlassTabsContent>
      <GlassTabsContent value="code">Copy-ready code</GlassTabsContent>
    </GlassTabs>
  );
}
```

#### Default tab

```tsx
<GlassTabs defaultValue="preview">...</GlassTabs>
```

### API reference

#### `GlassTabs`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / defaultValue` | `string` | — | Controlled or uncontrolled selected tab, matching a trigger's value. |
| `onValueChange` | `(value: string) => void` | — | Called with the newly selected tab's value. |
| `orientation` | `'horizontal' \| 'vertical'` | 'horizontal' | Sets which arrow keys move between triggers. |

Also accepts Radix Tabs.Root props.

#### `GlassTabsList`

The glass pill that holds the triggers and the moving indicator.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | — | Applies to the glass pill. |

Also accepts Radix Tabs.List props.

#### `GlassTabsTrigger`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `string` | — | Ties the trigger to the GlassTabsContent with the same value. |

Also accepts Radix Tabs.Trigger props.

#### `GlassTabsContent`

The tab's panel, on a glass card.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `string` | — | Shown when the trigger with the same value is selected. |
| `className` | `string` | — | Applies to the glass card. |

Also accepts Radix Tabs.Content props.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-tabs.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-tabs.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import {
  GlassTabs,
  GlassTabsContent,
  GlassTabsList,
  GlassTabsTrigger,
} from '@/components/glassyui/glass-tabs';

export default function TabsExample() {
  return (
    <GlassTabs defaultValue="overview">
      <GlassTabsList>
        <GlassTabsTrigger value="overview">Overview</GlassTabsTrigger>
        <GlassTabsTrigger value="activity">Activity</GlassTabsTrigger>
      </GlassTabsList>
      <GlassTabsContent value="overview">Three projects, all up to date.</GlassTabsContent>
      <GlassTabsContent value="activity">No activity this week.</GlassTabsContent>
    </GlassTabs>
  );
}
```

## Glass Accordion

Collapsible glass sections that open one at a time or several at once.

Page: https://glassyui.com/components/glass-accordion

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-accordion.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-accordion.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-accordion.tsx`
- `components/glassyui/glass-panel.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-accordion clsx
```

### Usage

```tsx
import { GlassAccordion, GlassAccordionContent, GlassAccordionItem, GlassAccordionTrigger } from "@/components/glassyui/glass-accordion";

export function AccordionDemo() {
  return (
    <GlassAccordion type="single" collapsible>
      <GlassAccordionItem value="item-1">
        <GlassAccordionTrigger>Can I customize it?</GlassAccordionTrigger>
        <GlassAccordionContent>Yes. It is source-copy code.</GlassAccordionContent>
      </GlassAccordionItem>
    </GlassAccordion>
  );
}
```

#### Single item

```tsx
<GlassAccordion type="single" collapsible>...</GlassAccordion>
```

### API reference

#### `GlassAccordion`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` (required) | `'single' \| 'multiple'` | — | Whether one item or several can be open at once. |
| `value / defaultValue` | `string (single) \| string[] (multiple)` | — | Controlled or uncontrolled open item or items. |
| `onValueChange` | `(value: string) => void \| (value: string[]) => void` | — | Called with the open item or items. |
| `collapsible` | `boolean` | false | With type single, lets the open item close again. |

Also accepts Radix Accordion.Root props.

#### `GlassAccordionItem`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `string` | — | Identifies the item in value and defaultValue. |

Also accepts Radix Accordion.Item props.

#### `GlassAccordionTrigger`

A glass button with a chevron, wrapped in an h3.

Also accepts Radix Accordion.Trigger props.

#### `GlassAccordionContent`

The item's panel on a glass card.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | — | Applies to the glass card. |

Also accepts Radix Accordion.Content props.

Accessibility: Each trigger sits inside an h3 that you cannot change, so place the accordion where an h3 fits the page outline.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-accordion.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-accordion.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import {
  GlassAccordion,
  GlassAccordionContent,
  GlassAccordionItem,
  GlassAccordionTrigger,
} from '@/components/glassyui/glass-accordion';

export default function AccordionExample() {
  return (
    <GlassAccordion collapsible defaultValue="returns">
      <GlassAccordionItem value="returns">
        <GlassAccordionTrigger>Can I return an order?</GlassAccordionTrigger>
        <GlassAccordionContent>Yes, within 30 days of delivery.</GlassAccordionContent>
      </GlassAccordionItem>
      <GlassAccordionItem value="shipping">
        <GlassAccordionTrigger>How long does shipping take?</GlassAccordionTrigger>
        <GlassAccordionContent>Three to five working days.</GlassAccordionContent>
      </GlassAccordionItem>
    </GlassAccordion>
  );
}
```

## Glass Dock

A row of app icons on a glass shelf, with labels on hover and focus.

Page: https://glassyui.com/components/glass-dock

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-dock.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-dock.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-dock.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-slot clsx
```

#### Render the copied example

```tsx
import { DockExample } from "./dock-example";

export default function Page() {
  return <DockExample />;
}
```

### API reference

#### `GlassDock`

The row; a glass shelf is drawn behind its items.

Also accepts HTML div attributes.

#### `GlassDockItem`

An icon button with a hover label and a running dot.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` (required) | `string` | — | Accessible name and the label shown above the icon on hover or keyboard focus. |
| `children` | `ReactNode` | — | The icon; it fills the item unless you size it. |
| `active` | `boolean` | false | Shows the running dot under the icon. |
| `asChild` | `boolean` | false | Renders the single child, such as a link, as the item. |
| `type` | `'button' \| 'submit' \| 'reset'` | 'button' | Native button type; not set when asChild is true. |

Also accepts HTML button attributes.

#### `GlassDockSeparator`

A vertical separator between groups of items.

Also accepts HTML div attributes.

Types: `GlassDockProps`, `GlassDockItemProps`

Accessibility: GlassDock adds no landmark or name, so wrap it in a nav or give it aria-label when it is navigation.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-dock.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-dock.json. Install its listed packages with npx expo install, then rebuild your development build.

This usage also uses Glass Provider. Install the complete example:

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-dock.json https://glassyui.com/r/native/glass-provider.json && npx expo install --fix
```

```tsx
import Ionicons from '@expo/vector-icons/Ionicons';
import { useState } from 'react';
import { GlassDock, GlassDockItem } from '@/components/glassyui/glass-dock';
import { useGlassTheme } from '@/components/glassyui/glass-provider';

const TABS = [
  { icon: 'home', label: 'Home' },
  { icon: 'calendar', label: 'Plans' },
  { icon: 'chatbubble', label: 'Messages' },
  { icon: 'person', label: 'Profile' },
] as const;

export default function DockExample() {
  const { colors } = useGlassTheme();
  const [tab, setTab] = useState<string>('Home');

  return (
    <GlassDock style={{ alignSelf: 'center' }}>
      {TABS.map(({ icon, label }) => (
        <GlassDockItem
          active={tab === label}
          key={label}
          label={label}
          onPress={() => setTab(label)}
        >
          <Ionicons color={colors.foreground} name={icon} size={24} />
        </GlassDockItem>
      ))}
    </GlassDock>
  );
}
```

## Glass Breadcrumb

A breadcrumb trail to the current page, with an ellipsis for folded steps.

Page: https://glassyui.com/components/glass-breadcrumb

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-breadcrumb.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-breadcrumb.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-breadcrumb.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-slot clsx
```

### Usage

```tsx
import {
  GlassBreadcrumb,
  GlassBreadcrumbItem,
  GlassBreadcrumbLink,
  GlassBreadcrumbPage,
} from "@/components/glassyui/glass-breadcrumb";

export function Trail() {
  return (
    <GlassBreadcrumb>
      <GlassBreadcrumbItem>
        <GlassBreadcrumbLink href="/">Home</GlassBreadcrumbLink>
      </GlassBreadcrumbItem>
      <GlassBreadcrumbItem>
        <GlassBreadcrumbPage>Components</GlassBreadcrumbPage>
      </GlassBreadcrumbItem>
    </GlassBreadcrumb>
  );
}
```

#### With a router link

```tsx
<GlassBreadcrumbLink asChild>
  <Link href="/docs">Docs</Link>
</GlassBreadcrumbLink>
```

#### Fold steps into a menu

```tsx
<GlassBreadcrumbItem>
  <GlassMenu>
    <GlassMenuTrigger asChild>
      <GlassBreadcrumbEllipsis />
    </GlassMenuTrigger>
    <GlassMenuContent align="start">
      <GlassMenuItem>Docs</GlassMenuItem>
    </GlassMenuContent>
  </GlassMenu>
</GlassBreadcrumbItem>
```

### API reference

#### `GlassBreadcrumb`

A nav landmark labelled Breadcrumb around an ordered list. Works in Server Components.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-label` | `string` | 'Breadcrumb' | Accessible name of the landmark. |

Also accepts HTML nav attributes.

#### `GlassBreadcrumbItem`

One step. It draws a chevron after itself, except on the last step.

Also accepts HTML li attributes.

#### `GlassBreadcrumbLink`

A link step.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | false | Renders your own link, such as a router's, with the link styles. |

Also accepts HTML anchor attributes.

#### `GlassBreadcrumbPage`

The current page, as text with aria-current="page".

Also accepts HTML span attributes.

#### `GlassBreadcrumbEllipsis`

A button that stands in for folded steps, so it can trigger a GlassMenu of them.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-label` | `string` | 'Show hidden pages' | Accessible name of the button. |

Also accepts HTML button attributes.

Types: `GlassBreadcrumbLinkProps`

## Glass Pagination

Numbered page buttons with previous and next, folding long runs into an ellipsis.

Page: https://glassyui.com/components/glass-pagination

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-pagination.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-pagination.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-pagination.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassPagination } from "@/components/glassyui/glass-pagination";

export function Pages() {
  const [page, setPage] = useState(1);

  return <GlassPagination page={page} pageCount={12} onPageChange={setPage} />;
}
```

#### Show more neighbours

```tsx
<GlassPagination page={page} pageCount={40} siblingCount={2} onPageChange={setPage} />
```

### API reference

#### `GlassPagination`

A nav landmark labelled Pagination, with a button for each shown page.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `page` (required) | `number` | — | The current page, counting from 1. Values outside 1 to pageCount are clamped. |
| `pageCount` (required) | `number` | — | How many pages there are. |
| `onPageChange` (required) | `(page: number) => void` | — | Called with the page to show. Store it and pass it back as page. |
| `siblingCount` | `number` | 1 | Pages shown on each side of the current page. |
| `boundaryCount` | `number` | 1 | Pages always shown at each end. |
| `previousLabel` | `string` | 'Previous page' | Accessible name of the previous button. |
| `nextLabel` | `string` | 'Next page' | Accessible name of the next button. |

Also accepts HTML nav attributes (except onChange).

Types: `GlassPaginationProps`

Accessibility: Page buttons are named Page N and the current one has aria-current="page".

## Glass Tooltip

A small glass label that appears on hover and keyboard focus.

Requires a GlassTooltipProvider around every GlassTooltip.

Page: https://glassyui.com/components/glass-tooltip

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-tooltip.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-tooltip.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-tooltip.tsx`
- `components/glassyui/glass-panel.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-tooltip clsx
```

### Usage

```tsx
import { GlassTooltip, GlassTooltipContent, GlassTooltipProvider, GlassTooltipTrigger } from "@/components/glassyui/glass-tooltip";

export function TooltipDemo() {
  return (
    <GlassTooltipProvider>
      <GlassTooltip>
        <GlassTooltipTrigger>Hover</GlassTooltipTrigger>
        <GlassTooltipContent>Tooltip content</GlassTooltipContent>
      </GlassTooltip>
    </GlassTooltipProvider>
  );
}
```

#### Short hint

```tsx
<GlassTooltipContent>Copied</GlassTooltipContent>
```

### API reference

#### `GlassTooltipProvider`

Shares open delays between tooltips. Wrap your app or a section in one.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `delayDuration` | `number` | 700 | Milliseconds of hover before a tooltip opens. |

Also accepts Radix Tooltip.Provider props.

#### `GlassTooltip`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open / defaultOpen` | `boolean` | false | Controlled or uncontrolled open state. |
| `onOpenChange` | `(open: boolean) => void` | — | Called when the tooltip opens or closes. |

Also accepts Radix Tooltip.Root props.

#### `GlassTooltipTrigger`

The element the tooltip describes.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | false | Renders your own focusable element as the trigger. |

Also accepts Radix Tooltip.Trigger props.

#### `GlassTooltipContent`

The glass label, rendered in a portal.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `sideOffset` | `number` | 6 | Gap between the trigger and the label, in pixels. |
| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | 'top' | Preferred side; it flips to stay on screen. |
| `className` | `string` | — | Applies to the glass panel. |

Also accepts Radix Tooltip.Content props.

## Glass Toast

A glass notification for brief updates that screen readers announce.

Requires a GlassToastProvider around your toasts and one GlassToastViewport.

Page: https://glassyui.com/components/glass-toast

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-toast.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-toast.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-toast.tsx`
- `components/glassyui/glass-panel.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install @radix-ui/react-toast clsx
```

### Usage

```tsx
import { GlassToast, GlassToastDescription, GlassToastProvider, GlassToastTitle, GlassToastViewport } from "@/components/glassyui/glass-toast";

export function ToastDemo() {
  return (
    <GlassToastProvider>
      <GlassToast open>
        <GlassToastTitle>Saved</GlassToastTitle>
        <GlassToastDescription>Your changes are stored.</GlassToastDescription>
      </GlassToast>
      <GlassToastViewport />
    </GlassToastProvider>
  );
}
```

#### A dismiss button

```tsx
<GlassToast>
  <GlassToastTitle>Saved</GlassToastTitle>
  <GlassToastDescription>Your changes are stored.</GlassToastDescription>
  <GlassToastClose />
</GlassToast>
```

#### An action

```tsx
<GlassToast>
  <GlassToastTitle>Message deleted</GlassToastTitle>
  <GlassToastAction altText="Undo the delete" onClick={undo}>
    Undo
  </GlassToastAction>
</GlassToast>
```

### API reference

#### `GlassToastProvider`

Holds the toasts and their shared settings. Wrap your toasts and the viewport in it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `duration` | `number` | 5000 | Milliseconds before a toast closes on its own. |
| `swipeDirection` | `'right' \| 'left' \| 'up' \| 'down'` | 'right' | The way a swipe dismisses a toast; toasts also slide in from and out to this side. |
| `label` | `string` | 'Notification' | Prefix screen readers announce before each toast. |

Also accepts Radix Toast.Provider props.

#### `GlassToast`

One toast on a glass card.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open / defaultOpen` | `boolean` | true | Controlled or uncontrolled open state; an uncontrolled toast shows when it mounts. |
| `onOpenChange` | `(open: boolean) => void` | — | Called when the toast opens, times out or is dismissed. |
| `duration` | `number` | provider duration | Overrides the provider's duration for this toast. |
| `className` | `string` | — | Applies to the outer list item, not the glass card inside it. |

Also accepts Radix Toast.Root props.

#### `GlassToastTitle / GlassToastDescription`

The heading and the message text.

Also accepts Radix Toast.Title and Toast.Description props.

#### `GlassToastAction`

A pill button under the message, such as Undo.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `altText` (required) | `string` | — | Tells screen reader users how to do the action without the button. |

Also accepts Radix Toast.Action props.

#### `GlassToastClose`

A round dismiss button that draws its own ×.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-label` | `string` | 'Dismiss' | The button's name. The default applies only without children; with children, their text names it. |
| `children` | `ReactNode` | × icon | Replaces the × icon. |

Also accepts Radix Toast.Close props.

#### `GlassToastViewport`

The fixed list at the top right where toasts appear, portalled to document.body after hydration.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `hotkey` | `string[]` | ['F8'] | Keys that move focus to the viewport. |

Also accepts Radix Toast.Viewport props.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-toast.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-toast.json. Install its listed packages with npx expo install, then rebuild your development build.

This usage also uses Glass Button. Install the complete example:

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-toast.json https://glassyui.com/r/native/glass-button.json && npx expo install --fix
```

```tsx
import { useState } from 'react';
import { GlassButton } from '@/components/glassyui/glass-button';
import {
  GlassToast,
  GlassToastAction,
  GlassToastDescription,
  GlassToastProvider,
  GlassToastTitle,
  GlassToastViewport,
} from '@/components/glassyui/glass-toast';

// Mount the provider and the viewport once, near the root of your app; toasts declared
// anywhere under the provider appear in the viewport.
export default function ToastExample() {
  const [open, setOpen] = useState(false);

  return (
    <GlassToastProvider>
      <GlassButton onPress={() => setOpen(true)}>Archive</GlassButton>
      <GlassToast onOpenChange={setOpen} open={open}>
        <GlassToastTitle>Message archived</GlassToastTitle>
        <GlassToastDescription>You can find it in Archive.</GlassToastDescription>
        <GlassToastAction altText="Restore the message" onPress={() => setOpen(false)}>
          Undo
        </GlassToastAction>
      </GlassToast>
      <GlassToastViewport />
    </GlassToastProvider>
  );
}
```

## Glass Badge

A small tinted glass label for status, counts and categories.

Page: https://glassyui.com/components/glass-badge

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-badge.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-badge.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-badge.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassBadge } from "@/components/glassyui/glass-badge";

export function BadgeDemo() {
  return <GlassBadge tone="green" dot>Live</GlassBadge>;
}
```

#### Tones

```tsx
<GlassBadge>Draft</GlassBadge>
<GlassBadge tone="blue">New</GlassBadge>
<GlassBadge tone="orange">Beta</GlassBadge>
<GlassBadge tone="red">3 failed</GlassBadge>
<GlassBadge tone="blue">Pro</GlassBadge>
```

### API reference

#### `GlassBadge`

A span with no client JavaScript, so it works in Server Components.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `'neutral' \| 'blue' \| 'green' \| 'orange' \| 'red' \| 'purple'` | 'neutral' | Tint and text colour. |
| `dot` | `boolean` | false | Adds a leading dot in the tone colour. |

Also accepts HTML span attributes.

Types: `GlassBadgeProps`, `GlassBadgeTone`

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-badge.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-badge.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { View } from 'react-native';
import { GlassBadge } from '@/components/glassyui/glass-badge';

export default function BadgeExample() {
  return (
    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
      <GlassBadge dot tone="green">
        Online
      </GlassBadge>
      <GlassBadge tone="blue">New</GlassBadge>
      <GlassBadge tone="red">3 unread</GlassBadge>
    </View>
  );
}
```

## Glass Progress

A glass progress bar for known values, with a sweeping state for unknown lengths.

Page: https://glassyui.com/components/glass-progress

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-progress.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-progress.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-progress.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassProgress } from "@/components/glassyui/glass-progress";

export function UploadDemo() {
  return <GlassProgress label="Uploading" showValue value={62} />;
}
```

#### Unknown length

```tsx
<GlassProgress aria-label="Working" value={null} />
```

#### Sizes

```tsx
<GlassProgress size="sm" value={30} aria-label="Small" />
<GlassProgress size="lg" value={70} aria-label="Large" />
```

### API reference

#### `GlassProgress`

A progressbar track with an optional label row above it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number \| null` | — | Progress toward max, clamped to 0–max; omit it or pass null when the length is unknown. |
| `max` | `number` | 100 | The value that means complete. |
| `label` | `ReactNode` | — | Text above the bar that also names it. |
| `showValue` | `boolean` | false | Shows the rounded percentage beside the label while the value is known. |
| `size` | `'sm' \| 'md' \| 'lg'` | 'md' | Track height: 0.25rem, 0.5rem or 0.75rem. |
| `aria-label / aria-labelledby` | `string` | — | Names the bar when there is no visible label; applied to the progressbar track, not the outer div. |

Also accepts HTML div attributes, except children.

Types: `GlassProgressProps`, `GlassProgressSize`

Accessibility: Give the bar a label, aria-label or aria-labelledby; an unknown length leaves out aria-valuenow.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-progress.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-progress.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { View } from 'react-native';
import { GlassProgress } from '@/components/glassyui/glass-progress';

export default function ProgressExample() {
  return (
    <View style={{ gap: 16 }}>
      <GlassProgress label="Uploading" showValue value={35} />
      {/* Without a value, the fill sweeps until the length is known. */}
      <GlassProgress accessibilityLabel="Syncing" value={null} />
    </View>
  );
}
```

## Glass Spinner

A small spinning ring that tells screen readers something is loading.

Page: https://glassyui.com/components/glass-spinner

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-spinner.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-spinner.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-spinner.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassSpinner } from "@/components/glassyui/glass-spinner";

export function SavingDemo() {
  return <GlassSpinner label="Saving" />;
}
```

#### Inside a button

```tsx
<GlassButton disabled>
  <GlassSpinner size="sm" label="Saving" />
  Saving…
</GlassButton>
```

### API reference

#### `GlassSpinner`

A span with role status; the ring is drawn in the theme's foreground colour, so set color to change it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | 'Loading' | Visually hidden text that screen readers announce. |
| `size` | `'sm' \| 'md' \| 'lg'` | 'md' | Diameter: 1rem, 1.5rem or 2.25rem. |
| `role` | `string` | 'status' | Live-region role; override it when the spinner sits inside another live region. |

Also accepts HTML span attributes, except children.

Types: `GlassSpinnerProps`, `GlassSpinnerSize`

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-spinner.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-spinner.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { GlassSpinner } from '@/components/glassyui/glass-spinner';

export default function SpinnerExample() {
  return <GlassSpinner label="Loading messages" size="lg" />;
}
```

## Glass Skeleton

A glass placeholder block, circle or set of text lines shown while content loads.

Page: https://glassyui.com/components/glass-skeleton

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-skeleton.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-skeleton.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-skeleton.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassSkeleton } from "@/components/glassyui/glass-skeleton";

export function LoadingProfile() {
  return (
    <div aria-busy="true">
      <GlassSkeleton variant="circle" />
      <GlassSkeleton variant="text" lines={2} />
    </div>
  );
}
```

#### Size a block with CSS

```tsx
<GlassSkeleton style={{ height: 120, borderRadius: 20 }} />
```

### API reference

#### `GlassSkeleton`

A div hidden from assistive technology with aria-hidden.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'block' \| 'circle' \| 'text'` | 'block' | block is sized with CSS, circle is a 2.5rem circle you can resize with width, and text is a stack of lines. |
| `lines` | `number` | 3 | Line count for the text variant, at least 1; the last of several lines is shorter. |

Also accepts HTML div attributes, except children.

Types: `GlassSkeletonProps`, `GlassSkeletonVariant`

Accessibility: Skeletons are aria-hidden, so set aria-busy on the region that is loading.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-skeleton.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-skeleton.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { View } from 'react-native';
import { GlassSkeleton } from '@/components/glassyui/glass-skeleton';

export default function SkeletonExample() {
  return (
    <View style={{ flexDirection: 'row', gap: 12 }}>
      <GlassSkeleton variant="circle" />
      <View style={{ flex: 1, gap: 8 }}>
        <GlassSkeleton style={{ height: 16, width: '60%' }} />
        <GlassSkeleton lines={2} variant="text" />
      </View>
    </View>
  );
}
```

## Glass Alert

A tinted glass message with four tones, an icon and an optional dismiss button.

Page: https://glassyui.com/components/glass-alert

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-alert.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-alert.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-alert.tsx`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassAlert } from "@/components/glassyui/glass-alert";

export function TrialAlert() {
  return <GlassAlert title="Heads up">Your trial ends in three days.</GlassAlert>;
}
```

#### Tones

```tsx
<GlassAlert tone="success" title="Saved">Every change is in.</GlassAlert>
<GlassAlert tone="warning" title="Almost full">92% of your storage is used.</GlassAlert>
<GlassAlert tone="danger" title="Payment failed">Update your card.</GlassAlert>
```

#### Dismissible

```tsx
<GlassAlert title="New version" onDismiss={() => setShown(false)}>
  Reload to get it.
</GlassAlert>
```

### API reference

#### `GlassAlert`

className, ref and other props reach the inner alert. Space stacked dismissible alerts with margin, not a parent gap, so the space folds away with them.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `'info' \| 'success' \| 'warning' \| 'danger'` | 'info' | Colour, icon and announcement role. |
| `title` | `ReactNode` | — | A bold line above the message. |
| `icon` | `ReactNode \| false` | tone icon | Replaces the tone's decorative icon; false shows none. |
| `onDismiss` | `() => void` | — | Shows a close button and runs after the alert folds away; remove the alert here and give each alert a stable key. |
| `dismissLabel` | `string` | 'Dismiss' | Accessible name of the close button. |
| `role` | `string` | 'alert' for warning and danger, else 'status' | Overrides the announcement role. |

Also accepts HTML div attributes, with title replaced.

Types: `GlassAlertProps`, `GlassAlertTone`

Accessibility: warning and danger use role alert and interrupt screen readers, while info and success use role status; pass role to change that.

### React Native

For Expo SDK 55 or later. Set up components.json as described in https://glassyui.com/guides/expo.

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/native/glass-alert.json && npx expo install --fix
```

Manual source: https://glassyui.com/r/native/glass-alert.json. Install its listed packages with npx expo install, then rebuild your development build.

```tsx
import { useState } from 'react';
import { GlassAlert } from '@/components/glassyui/glass-alert';

export default function AlertExample() {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <GlassAlert onDismiss={() => setVisible(false)} title="Payment failed" tone="danger">
      Update your card to keep your plan.
    </GlassAlert>
  );
}
```

## Glass Lens

A draggable magnifier with a glass rim that bends the content beneath it.

Page: https://glassyui.com/components/glass-lens

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-lens.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-lens.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-lens.tsx`
- `components/glassyui/glass-surface.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/refraction-map.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/use-refraction-filter.tsx`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

#### Render the copied example

```tsx
import { LensExample } from "./lens-example";

export default function Page() {
  return <LensExample />;
}
```

### API reference

#### `GlassLens`

A stage that renders its children with a draggable lens over them.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` (required) | `ReactNode` | — | Content to magnify. It renders twice, so give it its own background and avoid ids. |
| `size` | `number` | 160 | Lens diameter in pixels. |
| `zoom` | `number` | 1.6 | Magnification inside the lens. |
| `defaultPosition` | `{ x: number; y: number }` | { x: 0.5, y: 0.5 } | Starting centre as fractions of the stage's width and height. |
| `label` | `string` | 'Magnifier' | Accessible name of the lens. |

Also accepts HTML div attributes.

Types: `GlassLensProps`

Accessibility: The lens is focusable: arrow keys move it 10px, or 50px with Shift.

## Glass Scene

A WebGL2 canvas that refracts a backdrop image through the glass components inside it.

Requires WebGL2 and a backdrop image from your origin or served with CORS. Without either, every piece keeps its CSS glass.

Page: https://glassyui.com/components/glass-scene

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-scene.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-scene.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-scene.tsx`
- `components/glassyui/lib/merge-refs.ts`
- `components/glassyui/lib/scene-context.ts`
- `components/glassyui/lib/scene-renderer.ts`
- `components/glassyui/lib/slab-optics.ts`
- `components/glassyui/lib/liquid-motion.ts`
- `components/glassyui/glass-provider.tsx`
- `components/glassyui/liquid-filters.tsx`
- `components/glassyui/lib/preferences.ts`
- `components/glassyui/styles/liquid.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

#### Render the copied example

```tsx
import { SceneExample } from "./scene-example";

export default function Page() {
  return <SceneExample />;
}
```

### API reference

#### `GlassScene`

Paints the backdrop and the glass inside it on one canvas. GlassSurface, GlassPanel, GlassButton (except ghost) and GlassDrop join it; portalled overlays and glass nested in other glass keep their CSS glass.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `backdrop` | `string` | — | The image the glass refracts: a URL, or a CSS url() or var() value. Without it, or --lg-scene-backdrop in CSS, the scene keeps its CSS glass. |
| `backdropSpace` | `'local' \| 'viewport'` | 'local' | local covers the scene with the backdrop; viewport pins it to the viewport, like background-attachment: fixed. |
| `flow` | `boolean` | false | Lets GlassDrops ripple like liquid. Held still under reduced motion and low quality. |
| `optics.ior` | `number` | 1.5 | Refractive index. Higher values bend the backdrop more. |
| `optics.thickness` | `number` | 40 × thickness preference | Slab height in CSS pixels. Thicker glass bends further. |
| `optics.bevel` | `number` | 28 × (0.6 + 0.4 × thickness preference) | Width of the curved rim in CSS pixels. |
| `optics.dispersion` | `number` | 0.15 × thickness preference | How far the rim splits light into colour. 0 turns it off. |
| `optics.frost` | `number` | 1 | Multiplier on every piece's frost. |
| `optics.merge` | `number` | 12 | Distance in CSS pixels within which neighbouring pieces melt together. |
| `optics.specular` | `number` | 1 | Strength of reflections and highlights. |

Also accepts HTML div attributes.

#### `GlassDrop`

A plain piece of glass for a scene. Size, round and place it with CSS.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `merge` | `number` | the scene's optics.merge | This drop's merge distance in CSS pixels. |

Also accepts HTML div attributes.

Types: `GlassSceneProps`, `GlassSceneOptics`, `GlassDropProps`

Accessibility: Scene glass keeps text in its --lg-scene-ink colour at 4.5:1 contrast over any backdrop; set --lg-scene-ink to transparent on custom glass that carries no text.

## Glass Logo Reveal

A logo sting: a capsule of thick glass carries your mark and name into view, then lands on the real lockup.

Requires WebGL2 and a mark from your origin or served with CORS. Without WebGL2 the finished lockup shows at once.

Page: https://glassyui.com/components/glass-logo-reveal

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-logo-reveal.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-logo-reveal.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-logo-reveal.tsx`
- `components/glassyui/lib/logo-reveal-renderer.ts`
- `components/glassyui/styles/logo-reveal.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassLogoReveal } from "@/components/glassyui/glass-logo-reveal";

export function Intro() {
  return (
    <GlassLogoReveal
      className="w-full max-w-3xl rounded-3xl"
      markSrc="/logo.svg"
      name="Acme"
    />
  );
}
```

#### Play it again

```tsx
const [run, setRun] = useState(0);

return (
  <>
    <GlassLogoReveal key={run} markSrc="/logo.svg" name="Acme" />
    <button type="button" onClick={() => setRun(run + 1)}>
      Replay
    </button>
  </>
);
```

#### Scrub it with a slider

```tsx
const [moment, setMoment] = useState<number>();

return (
  <>
    <GlassLogoReveal markSrc="/logo.svg" name="Acme" progress={moment} />
    <input
      aria-label="Moment"
      max={100}
      min={0}
      type="range"
      onChange={(event) => setMoment(Number(event.target.value) / 100)}
    />
  </>
);
```

#### Open a splash screen

```tsx
const [splash, setSplash] = useState(true);

return splash ? (
  <GlassLogoReveal
    className="fixed inset-0 aspect-auto"
    markSrc="/logo.svg"
    name="Acme"
    play="mount"
    onComplete={() => setTimeout(() => setSplash(false), 600)}
  />
) : (
  <App />
);
```

#### Set the stage and the type

```tsx
<GlassLogoReveal
  className="aspect-[3/1] bg-black font-semibold text-white"
  markSrc="/logo-white.svg"
  name="Acme"
/>
```

### API reference

#### `GlassLogoReveal`

A figure with role img: the stage, drawn on a canvas, and the lockup it lands on. Its background is the stage and its colour the name; size the lockup with font-size.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `markSrc` (required) | `string` | — | The mark, from your origin or served with CORS. An SVG stays sharp under the glass. |
| `name` (required) | `string` | — | The name set beside the mark, in the figure's font and colour. Also its accessible name. |
| `play` | `'visible' \| 'mount'` | 'visible' | Plays once: when half the figure is on screen, or as soon as it mounts. |
| `progress` | `number` | — | Holds one moment, from 0 (the empty stage) to 1 (the lockup), instead of playing. Clearing it plays on from there. |
| `duration` | `number` | 2600 | Milliseconds from the empty stage to the lockup. |
| `onComplete` | `() => void` | — | Called once the lockup has landed, or at once under reduced motion. |

Also accepts HTML figure attributes (no children).

Types: `GlassLogoRevealProps`, `GlassLogoRevealPlay`

Accessibility: The figure is named by name; pass aria-label for a fuller name. Reduced motion and reduced transparency show the lockup at once.

## Glass Laptop

A CSS 3D laptop mockup whose screen shows your screenshot or React content.

Page: https://glassyui.com/components/glass-laptop

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-laptop.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-laptop.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-laptop.tsx`
- `components/glassyui/styles/laptop.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassLaptop } from "@/components/glassyui/glass-laptop";

export function Showcase() {
  return (
    <GlassLaptop
      aria-label="The app on a laptop"
      className="w-full max-w-5xl"
    >
      <img alt="" className="size-full object-cover" src="/app.png" />
    </GlassLaptop>
  );
}
```

#### Open the lid when the page loads

```tsx
const [open, setOpen] = useState(false);

useEffect(() => {
  const frame = requestAnimationFrame(() => setOpen(true));

  return () => cancelAnimationFrame(frame);
}, []);

return (
  <GlassLaptop open={open} finish="silver">
    <YourScreen />
  </GlassLaptop>
);
```

### API reference

#### `GlassLaptop`

A figure that draws the laptop. Its children fill the screen.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Screen content, laid out at resolution CSS pixels wide and scaled to fit. It mounts only while the lid is open and still. |
| `open` | `boolean` | true | Whether the lid is up. Changing it opens or closes the lid. |
| `finish` | `'black' \| 'silver'` | 'black' | Case colour. |
| `resolution` | `number` | 1728 | Width in CSS pixels the content is laid out at before it is scaled to the screen. |
| `glare` | `boolean` | true | A faint reflection across the screen. Turn it off for flat screenshots. |

Also accepts HTML figure attributes.

Types: `GlassLaptopProps`, `GlassLaptopFinish`

Accessibility: Give the figure an aria-label that says what the screen shows, and mark display-only screen content inert.

## Glass Phone Duo

A WebGL2 folding phone mockup with your screenshots on both displays.

Requires WebGL2 and screenshots from your origin or served with CORS.

Page: https://glassyui.com/components/glass-phone-duo

### Install

```bash
npx shadcn@4.14.1 add https://glassyui.com/r/glass-phone-duo.json
```

For a React 19+ app with Tailwind CSS 4 and a shadcn components.json. The complete item URL needs no registry mapping. The component page also offers pnpm, modern Yarn and bun commands.

#### Manual installation

Copy the complete files from https://glassyui.com/r/glass-phone-duo.json. Keep the lib and styles directories. If @/ points at src, use src/components/glassyui. Installed modules import their stylesheets; no separate stylesheet import is needed.

- `components/glassyui/glass-phone-duo.tsx`
- `components/glassyui/lib/phone-duo-renderer.ts`
- `components/glassyui/styles/phone-duo.css`

Set data-lg-theme="light" on a light app’s root, or data-lg-theme="dark" on a dark app’s root. Keep it in sync with the app theme. When using GlassProvider, match defaultTheme to the app’s initial theme.

```bash
npm install clsx
```

### Usage

```tsx
import { GlassPhoneDuo } from "@/components/glassyui/glass-phone-duo";

export function Showcase() {
  return (
    <GlassPhoneDuo
      className="w-full max-w-2xl"
      screenSrc="/app-landscape.png"
      screenAlt="The app on the unfolded display"
      coverSrc="/app-portrait.png"
      coverAlt="The app on the cover display"
    />
  );
}
```

#### Open and close

```tsx
const [open, setOpen] = useState(true);

return (
  <>
    <GlassPhoneDuo
      open={open}
      finish="star-white"
      screenSrc="/app-landscape.png"
      coverSrc="/app-portrait.png"
    />
    <button type="button" onClick={() => setOpen(!open)}>
      {open ? 'Close phone' : 'Open phone'}
    </button>
  </>
);
```

#### Pose the hinge

```tsx
<GlassPhoneDuo
  angle={120}
  view="back"
  finish="night-sky"
  screenSrc="/app-landscape.png"
  coverSrc="/app-portrait.png"
/>
```

#### Stand poses

```tsx
<GlassPhoneDuo
  pose="laptop"
  angle={90}
  finish="star-white"
  screenSrc="/app-landscape.png"
  coverSrc="/app-portrait.png"
/>

<GlassPhoneDuo
  pose="tent"
  angle={60}
  screenSrc="/app-landscape.png"
  coverSrc="/app-portrait.png"
/>
```

### API reference

#### `GlassPhoneDuo`

A figure with role img that draws the phone on a canvas.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `screenSrc` (required) | `string` | — | Landscape screenshot for the inner display, at a 2670:1878 ratio. Same origin or served with CORS. |
| `coverSrc` (required) | `string` | — | Portrait screenshot for the outer display, at a 1398:2034 ratio. Same origin or served with CORS. |
| `screenAlt` | `string` | 'App on the unfolded phone display' | Accessible label while the front of the open phone shows. |
| `coverAlt` | `string` | 'App on the outer phone display' | Accessible label while the closed phone shows, or the back of the open phone. |
| `open` | `boolean` | true | Opens or closes the hinge. Ignored when angle is set. |
| `angle` | `number` | — | Hinge angle from 0 (closed) to 180 (flat), clamped. Overrides open; while it is set, view and pose changes apply at once. |
| `finish` | `'night-sky' \| 'star-white'` | 'night-sky' | Frame colour. |
| `view` | `'front' \| 'back'` | 'front' | Which side faces you. back shows the rear cameras. |
| `pose` | `'upright' \| 'book' \| 'tent' \| 'laptop' \| 'side'` | 'upright' | Device orientation; angle still sets the hinge. tent and laptop show screenSrc on the outer display and coverSrc across the inner one. |
| `glare` | `boolean` | true | A faint reflection across the displays. |

Also accepts HTML figure attributes (no children).

Types: `GlassPhoneDuoProps`, `GlassPhoneDuoFinish`, `GlassPhoneDuoPose`