Core
Glass Provider
Sets the theme and the accessibility preferences every glass component follows.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-providernpx shadcn@4.14.1 add @glassyui-native/glass-providerPreview
Demos ready. Update 0.
This preview runs the React version. In an app, iOS 26 and later draw the React Native version with the system’s own Liquid Glass. See it on a phone.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-providerWhat this installs4 files
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.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/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.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
First add the @glassyui-native mapping to components.json as shown in the Expo guide. Then add the component and match its packages to your Expo SDK:
npx shadcn@4.14.1 add @glassyui-native/glass-providernpx expo install --fixUsage
import { GlassProvider } from "@/components/glassyui/glass-provider";
export function AppProviders({ children }: { children: React.ReactNode }) {
return <GlassProvider>{children}</GlassProvider>;
}import { GlassButton } from '@/components/glassyui/glass-button';
import { GlassProvider, usePreferences } from '@/components/glassyui/glass-provider';
function ThemeButton() {
const { preferences, setPreferences } = usePreferences();
const next = preferences.theme === 'dark' ? 'light' : 'dark';
return (
<GlassButton onPress={() => setPreferences({ theme: next })}>
{next === 'light' ? 'Use light glass' : 'Use dark glass'}
</GlassButton>
);
}
// Wrap your app once. It follows the device's appearance, Reduce Motion and Reduce
// Transparency settings until you set your own.
export default function ProviderExample() {
return (
<GlassProvider>
<ThemeButton />
</GlassProvider>
);
}
This example also uses Glass Button. Install everything it uses:
npx shadcn@4.14.1 add @glassyui-native/glass-provider @glassyui-native/glass-buttonExamples
<GlassProvider defaultTheme="light">{children}</GlassProvider><GlassProvider>
<LiquidFilters />
{children}
</GlassProvider>API
The React Native version takes the same props under React Native’s names: onPress for onClick and style for className. The Expo guide lists what else differs.
GlassProviderApplies document-level preferences and data attributes. `defaultTheme` ("light" or "dark") is the theme a visitor sees until they choose one, whatever their system prefers; without it the provider follows the system. A choice made with `usePreferences` is saved and always wins.
PreferencesProviderCompatibility alias for GlassProvider.
useOptionalPreferencesReads provider preferences when mounted and otherwise returns the static default preferences.
usePreferencesReads and updates persisted Glassy UI preferences: theme, mode, quality, reduceMotion, reduceTransparency and thickness (0.25 to 2, regular glass is 1). Requires GlassProvider.
LiquidFiltersDefines 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.