# Glass — Theme for React

> A self-contained glassmorphism theme preset — a frosted, translucent panel with a white top-edge highlight, soft inner glow, and 1px light border floating over a soft, vibrant blurred gradient ground that shows through, with nested glass chips for layered depth. A keyboard-operable radiogroup of mood chips re-tints the ground and accents live (Aqua / Violet / Peach) while the frost stays; reduced motion pins the drifting orbs to a calm static frosted frame.

- Page: https://crucibleui.com/components/themes/glass
- Category: [themes](https://crucibleui.com/components/themes)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/glass
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/glass`.

## Props (`GlassProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant?` | `string` | — | Controlled active preset id (matches a preset's `id`). |
| `defaultVariant?` | `string` | `"aqua" (first preset)` | Initial preset id when uncontrolled. |
| `onVariantChange?` | `(id: string) => void` | — | Fires with the next preset id whenever the switcher changes. |
| `presets?` | `GlassPreset[]` | `the three built-in moods` | Override the built-in preset set (chips + palettes). |
| `colors?` | `Partial<GlassPalette>` | — | Token overrides merged over the active preset — makes any palette reachable. |
| `speed?` | `number` | `1` | Orb-drift speed multiplier. |
| `intensity?` | `number` | `1` | Frost blur + glow strength multiplier. |
| `paused?` | `boolean` | `false` | Freeze the ground at a static frosted frame. |
| `tagline?` | `string` | `"OVERVIEW"` | Small mono label above the heading. |
| `heading?` | `string` | `"Clearlight"` | Display heading. |
| `description?` | `string` | `"Frosted panels over soft light. Pick a mood."` | Body line under the heading. |
| `statValue?` | `string` | `"98"` | Stat figure. |
| `statLabel?` | `string` | `"CLARITY"` | Stat unit / label. |
| `progress?` | `number` | `0.72` | Progress fraction, 0–1, shown in the depth meter. |
| `tag?` | `string` | `"LAYER 3"` | Small pill tag. |
| `primaryLabel?` | `string` | `"Continue"` | Filled button label. |
| `secondaryLabel?` | `string` | `"Dismiss"` | Ghost button label. |
| `label?` | `string` | `"Glassmorphism theme preset"` | Accessible label for the panel region. |
| `switcherLabel?` | `string` | `"Theme mood"` | Accessible label for the switcher group. |

Also accepts: `Omit<React.ComponentPropsWithoutRef<"section">, "onChange">`.

## Usage example

```tsx
"use client";

import * as React from "react";

import { Glass } from "@/components/crucible/glass";

export default function GlassDemo() {
  const [variant, setVariant] = React.useState("aqua");

  return (
    <div className="relative isolate flex h-full min-h-[360px] w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950 p-6">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(120,180,255,0.06),transparent_70%)]"
      />
      <div className="relative z-10 flex flex-col items-center gap-5">
        <Glass variant={variant} onVariantChange={setVariant} />
        <p className="text-center text-sm text-neutral-500">
          Switch the look — click a chip, or focus it and use the arrow keys.
        </p>
      </div>
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.