Surfaces
Glass Panel
Glass cards, panels and pills for anything that floats above your content.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-panelnpx shadcn@4.14.1 add @glassyui-native/glass-panelPreview
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-panelWhat this installs10 files, 1 package
Direct registry declarations
These values belong to @glassyui/glass-panel itself in registry.json.
Package dependencies
clsx
Registry dependencies
@glassyui/glass-surface
File targets
components/glassyui/glass-panel.tsx
Complete installed closure
This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.
Package dependencies
clsx
Installed files
components/glassyui/glass-panel.tsxcomponents/glassyui/glass-surface.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/refraction-map.tscomponents/glassyui/lib/use-refraction-filter.tsxcomponents/glassyui/lib/scene-context.tscomponents/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-panelnpx expo install --fixUsage
import { GlassPanel } from "@/components/glassyui/glass-panel";
export function PanelDemo() {
return (
<GlassPanel variant="card" elevation="raised">
Panel content
</GlassPanel>
);
}import { Text } from 'react-native';
import { GlassPanel } from '@/components/glassyui/glass-panel';
import { useGlassTheme } from '@/components/glassyui/glass-provider';
export default function PanelExample() {
const { colors } = useGlassTheme();
return (
<GlassPanel variant="card" style={{ gap: 4 }}>
<Text style={{ color: colors.foreground, fontSize: 17, fontWeight: '600' }}>Morning run</Text>
<Text style={{ color: colors.mutedForeground }}>5.2 km in 28 minutes</Text>
</GlassPanel>
);
}
This example also uses Glass Provider. Install everything it uses:
npx shadcn@4.14.1 add @glassyui-native/glass-panel @glassyui-native/glass-providerExamples
<GlassPanel variant="pill" preset="control">
Syncing
</GlassPanel>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.
GlassPanelForward-ref composed surface rendered as a div.
GlassPanelPropsNative div props plus panel composition options.
variantShape and spacing: panel, card, or pill.
elevationShadow and border level: base or raised.
presetMaterial preset forwarded to GlassSurface.
lensChromium lens forwarded to GlassSurface.
thicknessGlass thickness forwarded to GlassSurface.
interactiveBrightens the panel a touch on hover. Defaults to false.
refractionMaterial refraction level forwarded to GlassSurface.
refractionBackgroundDecorative supplied background forwarded to GlassSurface.
refractionBackgroundSpaceLocal or viewport scene alignment forwarded to GlassSurface.
refractionDisplacementBend strength forwarded to GlassSurface.
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.