Glass Panel

A frosted surface in four shapes, and the aurora ground it sits on. GlassBackdrop washes three colours behind a 12-column bento grid and sets the surface for everything inside; GlassPanel is one glass recipe — blur, hairline border, inset highlight — whose shape encodes hierarchy: a slab for the hero, a tile for content, a disc for a single number, a capsule for chips.

Switch the backdrop to variant="solid" and every panel becomes a plain card with an ordinary shadow — nothing inside them changes. Profile Page, Book Appointment and Booking Card are all built on this pair.

Four shapes

The same recipe with four corner treatments. Radius is the only difference, so it reads as hierarchy.

shape"slab" | "tile" | "disc" | "capsule": on GlassPanel picks the corner treatment — 32px, 24px, a circle, a pill. disc also forces a square aspect so it stays round.
GlassBackdrop: is the ground: three blurred blobs and a grid-cols-1 md:grid-cols-6 lg:grid-cols-12 grid. Span panels with plain Tailwind (lg:col-span-8).

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Glass Panel

npx shadcn@latest add @algorize-ui/glass-panel

components/custom/blocks/GlassPanelBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Glass Panel to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

ui-liquid-glass is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/ui-liquid-glass

Examples

Bento layout

A slab, an interactive tile, three discs and a row of capsules on a custom aurora.

aurora: on GlassBackdrop takes three CSS colours for the blobs the glass blurs — top-left, top-right, bottom. The panels adapt because they are translucent.
interactive: on a GlassPanel adds a pointer cursor and a small lift on hover — for panels that open something.

Solid

The same layout with variant="solid": plain cards with a shadow, no aurora.

Setvariant"solid": on GlassBackdrop and every panel inside reads it through context. A single GlassPanel can override with its own variant.

Liquid glass

The same layout inside a liquid-glass refraction surface with pure white glass elements.

Setvariant"liquid-glass": on GlassBackdrop for realistic fluid refraction with custom background image support and pure white glass panels.

Features

One recipe, four shapes

Blur, hairline border and inset highlight are identical on every panel. Only the radius changes, so shape carries meaning instead of decoration.

Glass or solid, by context

The backdrop sets the surface once and every panel reads it. Flip a whole page from frosted to flat with one prop; override a single panel when needed.

Dark mode built in

The aurora dims and the glass darkens under the dark class; the hairline and highlight keep their contrast on both.

Nothing but Tailwind

No animation library, no portal. Spans, padding and inner layout are ordinary utility classes on the panel.

Props Reference

GlassBackdrop

Prop	Type	Default	Description
`variant`	`"glass" \| "solid" \| "liquid-glass"`	`"glass"`	Frosted panels over an aurora, solid white cards with a shadow on a flat ground, or liquid-glass refraction with fluid background. Read by every `GlassPanel` inside.
`bgImage`	`string`	—	Optional custom background image URL for `liquid-glass` variant.
`wrapperClassName`	`string`	—	Classes for the inner `LiquidGlassWrapper` — controls ratio (defaults to 40% width centered on large screens).
`radius`	`string \| number`	—	Dynamic rounding radius for backdrop and wrapper (e.g. `"1.5rem"`, `"var(--radius-3xl)"`).
`aurora`	`[string, string, string]`	violet, sky, peach	Colours of the three blobs behind the glass. Ignored by `solid`.
`gridClassName`	`string`	—	Classes for the inner grid — row heights (`lg:auto-rows-[13rem]`), gaps, a max width.
`className`	`string`	—	Add `rounded-[36px]` inside a container, `min-h-dvh` when it is the page.

GlassPanel

Prop	Type	Default	Description
`shape`	`"slab" \| "tile" \| "disc" \| "capsule"`	`"tile"`	Corner treatment. `disc` also forces a square aspect.
`variant`	`"glass" \| "solid"`	from `GlassBackdrop`	Override the backdrop's surface for this one panel.
`interactive`	`boolean`	`false`	Pointer cursor and a small lift on hover.
`className`	`string`	—	Column span (`lg:col-span-8`), padding, and layout of the contents.

useSurface

Returns the enclosing backdrop's variant ("glass" by default) so your own components can draw differently on each surface. It installs with the component in glass-panel-context.ts, next to GlassPanelBlock.tsx: import { useSurface } from "@/components/custom/blocks/glass-panel-context";.