@liquidify/glass

Providers, primitives, and hooks for Liquidify's CSS and SVG glass engine.

Experimental: this lower-level engine API may change before a stable release.

Install it directly when building custom surfaces or using engine providers outside @liquidify/react:

pnpm add @liquidify/glass

When the React aggregate stylesheet is not present, import the engine CSS:

import "@liquidify/glass/glass.css"

Main public surfaces

Theme, Material, and Backdrop provide scoped defaults.
IncreaseContrast and LiquidTokenProvider scope accessibility color selection and public token overrides.
GlassPrimitive renders a polymorphic glass element.
useGlass returns class, data attributes, and style props for a custom surface.
Public material, performance, shape, lens, and controller types support advanced integration.

import { GlassPrimitive, Material, Theme } from "@liquidify/glass"
import "@liquidify/glass/glass.css"

export function CustomPanel({ children }: { children: React.ReactNode }) {
  return (
    <Theme type="system">
      <Material default="frosted">
        <GlassPrimitive as="section" aria-label="Account summary">
          {children}
        </GlassPrimitive>
      </Material>
    </Theme>
  )
}

GlassPrimitive defaults to a div; its as prop refines native props and ref types. Providers are optional—the zero-configuration path mounts the shared filter host on the client—but an explicit Material provider gives an application a clear engine boundary.

The additional material-tokens.css export contains generated material variables for advanced CSS assembly. Prefer glass.css unless you are deliberately composing the engine yourself.