Glass

A liquid-glass surface that refracts whatever is behind it — an SVG displacement-map backdrop-filter with dispersion, a 3D bevel, and grain.

Glass cardA glass card that refracts the live content behind it — with a faint dispersion, a 3D bevel, and film grain.
Installation
$Terminal
npx shadcn@latest add https://sdk-components.thesqd.com/r/glass.json
Usage
Render `<GlassLens />` over some content — it refracts whatever is painted behind it via an SVG displacement-map `backdrop-filter`. Pure CSS/SVG, no dependencies (Chromium renders the refraction; Safari/Firefox fall back to a blur).
TSImport
import { GlassLens } from "@/components/ui/glass";
TSExample
import { GlassLens } from "@/components/ui/glass";

export function Example() {
  return (
    // Place the lens over some content — it refracts whatever is behind it.
    <div className="relative" style={{ backgroundImage: "url(/photo.webp)" }}>
      <GlassLens width={360} height={220} radius={24} tint="#513DE5">
        <div className="p-6 text-white">Liquid glass</div>
      </GlassLens>
    </div>
  );
}
Composition
Anatomy of the GlassLens component.
GlassLens                        (a rounded surface that refracts what's behind it)
├── width / height={number}     (px — the displacement map is built for this size)
├── radius={number}             (corner radius; use height/2 for a pill)
├── tint={"#hex"}               (optional glass-body color; omit for dark glass)
├── intensity={number}          (overall strength: refraction/blur/dark/grain/bevel; 1 default, 1.5 buttons)
├── contentClassName            (classes for the content layer on the glass)
└── children                    (rendered on top of the glass)

How it works: an SVG `feDisplacementMap` (a per-size displacement PNG) is applied
as the element's `backdrop-filter`, so it bends the live pixels painted behind it
— real refraction with a faint chromatic dispersion, a size-proportional 3D
bevel, and film grain. Chromium renders the refraction; Safari/Firefox fall back
to a plain blur. It only "shows" when there's content behind it to refract.
Card
A glass card over a backdrop — it refracts the live content behind it, with a 3D bevel and film grain.
Glass cardA glass card that refracts the live content behind it — with a faint dispersion, a 3D bevel, and film grain.
Buttons
Tinted pill lenses sized exactly like the standard Button (h-10, rounded-full, text-sm), laid out 2×2 — each refracts the content behind it.
Default
Glass
Coral
Delete
Badges
Tinted glass badges via the `<Glass>` one-liner — each self-sizes to its label (no width to pass) and uses the `button` preset plus a per-badge `tint` for a sculpted, colored mini-lens.
Brand
New
Live
Sale
Pro
Popover
A glass card revealed from a trigger that genuinely refracts the live page behind it. Chromium shows the refraction; Safari falls back to a blur.
Glass popoverA glass card that refracts whatever is behind it — live — via an SVG displacement-map backdrop-filter. (Chromium; falls back to a blur in Safari.)
Tabs
A segmented control whose sliding pill is a full-face `GlassLens` that refracts the active label beneath it. Drag the pill (or any tab) to slide between tabs — it stretches like a liquid droplet in transit and the refraction ramps up with speed.
Radio cards (the one-liner)
A radio-card group where each card is a glass surface from a single `<Glass glass={…}>` prop — no width/height, no map wiring. `Glass` self-measures and lays a refracting lens behind its content, reading the card's border-radius automatically. The selected card overrides the preset with a brand tint on the same flag.
Color picker (the one-liner on a real component)
The `<Glass>` one-liner used two ways on a live `<ColorPicker />`: the settings panel is a `<Glass glass="card">` surface, and the picker's own `glass` prop turns its flower-wheel popover into a lens too. Both self-size and refract the backdrop; the wheel, lightness arc, and hex readout work normally on top.
Brand colorPick the accent used across your squad.
Date picker (the one-liner on a real component)
The `<Glass>` one-liner wrapped around a live `<DatePicker />` — the trigger is stripped transparent (`triggerClassName`) so the lens becomes the field surface and refracts the backdrop. Shown two ways: a natural-language single picker (type “next monday”) and an inline range. The calendar popover opens as a normal surface on top.
Date picker with natural language input
Try “next monday”, “2 fridays from now”, or “last day of next month”.
Booking dates
Inputs & selects (the one-liner on fields)
Drop `<Glass>` around a field and strip its opaque surface (`bg-transparent border-transparent`) — the lens becomes the field background and refracts the page, while the text sits on top. The select is one lens whose visible height animates via an overflow-hidden wrapper: the trigger is the lens's top row (so the value + chevron stay put the whole time) and the options roll up/down below it. Animating height (not transform/opacity) keeps the lens's refraction live, and because the lens never scales or clips its own edges there's no squish or corner artifact.
Full name
Plan
API Reference
Props exposed by the GlassLens component.

GlassLens

PropTypeDefaultDescription
width / heightnumber—Lens size in px. The displacement map is generated for this exact size.
radiusnumber24Corner radius in px. Use `height / 2` for a pill.
tintstring—Hex color for the glass body (mixed over the refraction with a dark wash). Omit for a neutral dark glass.
intensitynumber1Overall glass strength — scales refraction/dispersion, blur, darkness, grain, and the 3D bevel together. The glass buttons run at `1.5`.
contentClassNamestring—Classes for the content layer that sits on the glass.
classNamestring—Classes for the lens wrapper.