Custom glass surface

Create a semantic surface with the lower-level glass package.

Use GlassPrimitive when the component catalog does not express the semantic element you need.

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

export function WeatherSummary() {
  return (
    <Material default="frosted">
      <Backdrop type="low">
        <GlassPrimitive as="article" aria-labelledby="weather-title">
          <h2 id="weather-title">Today</h2>
          <p>Clear, 24°C</p>
        </GlassPrimitive>
      </Backdrop>
    </Material>
  )
}

The as element owns semantics; material props own presentation. Add application layout through a class and public token overrides rather than importing internal engine files.