Glass

The material primitive. One element, two pseudo-layers: a refracting backdrop and a specular ring. Everything else in Vitrum is built from it.

Install

$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/glass.json

Render <GlassRoot/> once at the top of <body> to enable refraction. Without it, surfaces render in the frost engine.

Examples

Materials

filmrefracts

panerefracts

slabrefracts

veilfrost only

"use client";

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

export function GlassDemo() {
  return (
    <div className="grid w-full max-w-md grid-cols-2 gap-4">
      {(["film", "pane", "slab", "veil"] as const).map((material) => (
        <Glass
          key={material}
          material={material}
          sheen
          className="flex h-28 flex-col justify-end p-4 shadow-glass-md"
        >
          <span className="text-sm font-medium capitalize">{material}</span>
          <span className="text-xs text-muted-foreground">
            {material === "veil" ? "frost only" : "refracts"}
          </span>
        </Glass>
      ))}
    </div>
  );
}

Tints

Neutral

Accent

Custom

"use client";

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

export function GlassTintDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      <Glass material="pane" tint="neutral" className="rounded-pill px-6 py-3 text-sm">
        Neutral
      </Glass>
      <Glass material="pane" tint="accent" className="rounded-pill px-6 py-3 text-sm">
        Accent
      </Glass>
      <Glass
        material="pane"
        className="rounded-pill px-6 py-3 text-sm [--glass-tint-a:0.4] [--glass-tint-c:var(--success)]"
      >
        Custom
      </Glass>
    </div>
  );
}

API

<Glass />

Prop	Type	Default	Description
material	"film" \| "pane" \| "slab" \| "veil"	"pane"	Optical weight of the surface.
tint	"neutral" \| "accent" \| "none"	"neutral"	Color cast of the material.
refract	GlassFilterId	per material	Pin a specific refraction preset.
sheen	boolean	false	Soft light that follows the pointer.
asChild	boolean	false	Merge the surface onto the child element.