Skip to Content
Get full access

Glow Glass

Frosted glass surface tinted by the surrounding lamp color, with a corner highlight and either a deep floating shadow with light spill or a short contact shadow. Applies to any element, a Card included, and follows a GlowSection's bulb when nested.

pnpm dlx shadcn add @01orbital/glow-glass

The example also uses card and glow-section. Install them too:

pnpm dlx shadcn add @01orbital/card @01orbital/glow-section

Usage

import { GlowGlass } from "@/components/glow/glow-glass"
import { GlowSection } from "@/components/glow/glow-section"
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// Every word on the page. Change copy here, not in the markup.
const COPY = {
  title: "Everything in one calm place",
  body: "Notes, files and conversations sit side by side.",
} as const

// The glass needs the room's light to show; the section is the room. A stock
// Card gives the glass its shape and padding.
export default function GlowGlassDemo() {
  return (
    <GlowSection
      position="top-right"
      className="w-full max-w-md rounded-3xl p-10"
    >
      <GlowGlass render={<Card className="w-full rounded-2xl" />}>
        <CardHeader>
          <CardTitle>{COPY.title}</CardTitle>
          <CardDescription>{COPY.body}</CardDescription>
        </CardHeader>
      </GlowGlass>
    </GlowSection>
  )
}

Examples

New

glow-glass-studio-balance

glow-glass-studio-balance

Studio Balance

Frosted glass card example showing GlowGlass: a floating sea-glass account panel with fine grain over a blue Halcyon wash.

pnpm dlx shadcn add @01orbital/glow-glass-studio-balance

API reference

Frosted glass tinted by the lamp color, with a corner highlight and either a deep floating shadow or a short contact shadow. It goes on the element you already have: render={<Card />} turns a stock Card to glass, and without render it is a plain div. It has no padding or corner radius of its own; the rendered element's shape is the glass's shape.

It reads --glow-key, so inside a GlowSection with a keyColor the glass follows the bulb; without one it uses a pale blue.

Prop

Type

It also accepts the props of the Base UI part it wraps, and the HTML attributes of the element it renders.

Dependencies

npm: @base-ui/react, cn. The CLI installs them for you.

No other registry pieces.

Arc

Backlight Bloom

Concentric Rings

Edge Scrim

Glow Line

Glow Rig