Providers

Providers are optional and nestable. A bare Liquidify component uses library defaults; add a provider when a subtree needs an explicit contract.

import {
  Backdrop,
  LiquidTokenProvider,
  Material,
  Theme,
} from "@liquidify/glass"

export function AppEnvironment({ children }: { children: React.ReactNode }) {
  return (
    <Theme type="system">
      <Material default="regular">
        <Backdrop type="low">
          <LiquidTokenProvider tokens={{ "--lq-color-accent": "rebeccapurple" }}>
            {children}
          </LiquidTokenProvider>
        </Backdrop>
      </Material>
    </Theme>
  )
}

Backdrop describes how often ordinary content behind glass changes. It renders no background and takes no image source. Use static for a backdrop that will not change, low for typical application UI, and high around continuously changing content.

The nearest provider wins for its setting. LiquidTokenProvider merges nested token maps, with inner keys overriding matching outer keys. Component-specific props remain authoritative where a component exposes that axis.

@liquidify/react re-exports Theme for the common single-package setup. Import Material, Backdrop, and advanced engine providers from @liquidify/glass.