Glass Pane

The primitive every component is made of. Put anything on a pane of glass.

Now boarding

Gate 21 · Flight LU 108 to Lisbon

Installation#

GlassPane comes with every component, as part of the glass engine. To install it on its own:

npx shadcn@latest add @liquikit/glass

Usage#

import { GlassPane } from "@/components/liquikit/glass"

<GlassPane radius={28}>
  <div className="p-5">Now boarding</div>
</GlassPane>

The pane sizes itself to its content and redraws its lens when that size changes.

Examples#

Variants and tint#

regular glass is frosted with a tinted body, for text that must stay readable. clear glass has almost no body, so the refraction shows most. tint and tintOpacity colour the body.

Regular

Clear

Tinted

Glass bends the page only while you use it, and rests as frosted glass with baked light. Set refraction="always" to keep a pane bending, such as a single card over a photo. Keep it to a few pieces: each one carries a filter while it is on screen.

<GlassPane radius={28} refraction="always">
  <div className="p-5">Now boarding</div>
</GlassPane>

Glass Scope#

The glass bends a copy of the background rather than the page itself. Wrap the area in a GlassScope, pass the background as backdrop, and put the content inside as children.

import { GlassScope } from "@/components/liquikit/glass"

<GlassScope
  backdrop={<img src="/photo.jpg" alt="" className="size-full object-cover" />}
  className="p-8"
>
  <GlassPane radius={28}>
    <div className="p-5">Now boarding</div>
  </GlassPane>
</GlassScope>

API Reference#

GlassPane

Prop	Type	Default
`radius`	`number \| "capsule"` Corner radius in pixels, or `capsule` for fully round ends.	"capsule"
`variant`	`"regular" \| "clear"` `regular` is frosted with a tinted body. `clear` is nearly transparent, so the refraction shows most.	"regular"
`tint`	`string` Colour of the body. Defaults to white in light and a dark grey in dark.	—
`tintOpacity`	`number` Opacity of the body, from 0 to 1. Overrides the variant.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"
`press`	`MotionValue<number>` A motion value from 0 to 1. At 1 the pane swells and brightens, as if pressed.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	0.6
`frost`	`MotionValue<number>` A motion value from 0 to 1 that fades the frost and the body, leaving clear glass.	—
`shape`	`GlassPaneShape` Motion values for the lens's centre, size and radius, when it should move inside the pane.	—
`reach`	`GlassPaneReach` Extra room around the pane the lens may grow into, per side.	—
`children`	`ReactNode` The content.	—

GlassScope

Prop	Type	Default
`backdrop`	`ReactNode` The background of this area, drawn behind the content. Glass in the scope bends a copy of it.	—
`children`	`ReactNode` The content.	—

GlassThemeProvider

Prop	Type	Default
`theme*`	`"light" \| "dark"` The theme for every glass component inside it.	—
`children`	`ReactNode` The content.	—

Theming How it works