Glass Provider | Glassy UI

Preview

Release demos ready. Update 0.

Installation

First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:

Install Glass Provider

pnpm dlx [email protected] add @glassyui/glass-provider

Direct registry declarations

These values belong to @glassyui/glass-provider itself in registry.json.

Package dependencies

None declared.

Registry dependencies

None declared.

File targets

components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Complete installed closure

This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.

Package dependencies

None declared.

Installed files

components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

import { GlassProvider } from "@/components/glassyui/glass-provider";

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <GlassProvider>{children}</GlassProvider>;
}

Examples

Legacy SVG filters

<GlassProvider>
  <LiquidFilters />
  {children}
</GlassProvider>

API

GlassProvider

Applies document-level preferences and data attributes.

PreferencesProvider

Compatibility alias for GlassProvider.

useOptionalPreferences

Reads provider preferences when mounted and otherwise returns the static default preferences.

usePreferences

Reads and updates persisted Glassy UI preferences; requires GlassProvider.

LiquidFilters

Defines legacy shared SVG filters for CSS paths that still reference them.

Notes

Accessibility

Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.

Performance

Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.