Surfaces
Glass Surface
The glass material on its own: frost, rim light and refraction for your own components.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-surfacenpx shadcn@4.14.1 add @glassyui-native/glass-surfacePreview
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-surfaceWhat this installs9 files, 1 package
Direct registry declarations
These values belong to @glassyui/glass-surface itself in registry.json.
Package dependencies
clsx
Registry dependencies
@glassyui/glass-provider
File targets
components/glassyui/glass-surface.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/refraction-map.tscomponents/glassyui/lib/use-refraction-filter.tsxcomponents/glassyui/lib/scene-context.ts
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-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-surfacenpx expo install --fixUsage
import { GlassSurface } from "@/components/glassyui/glass-surface";
export function SurfaceDemo() {
return (
<GlassSurface
preset="prominent"
refraction="soft"
refractionBackground={<div className="absolute inset-0 bg-[linear-gradient(135deg,#f5f5f7_58%,#ff754c_63%,#f04a28_70%,#e5e5e7_75%)]" />}
refractionBackgroundSpace="viewport"
className="p-6"
>
Refractive surface
</GlassSurface>
);
}import { Image } from 'react-native';
import { GlassBackdrop } from '@/components/glassyui/glass-backdrop';
import { GlassSurface } from '@/components/glassyui/glass-surface';
const wallpaper = require('@/assets/wallpaper.jpg');
// Android blurs only what sits in a GlassBackdrop; iOS and the web blur whatever is behind.
export default function SurfaceExample() {
return (
<GlassBackdrop
backdrop={<Image alt="" source={wallpaper} style={{ height: '100%', width: '100%' }} />}
style={{ alignItems: 'center', height: 220, justifyContent: 'center' }}
>
<GlassSurface preset="prominent" style={{ borderRadius: 24, padding: 24 }}>
Glass over a wallpaper
</GlassSurface>
</GlassBackdrop>
);
}
Examples
Bends light.Scroll to watch.
The wallpaper holds still, and the pane bends a copy of it that stays lined up as the page scrolls.
<div className="fixed inset-0 -z-10 bg-[url(/wallpaper.jpg)] bg-cover" />
<GlassSurface
preset="showcase"
refraction="strong"
refractionBackground={<div className="absolute inset-0 bg-[url(/wallpaper.jpg)] bg-cover" />}
refractionBackgroundSpace="viewport"
className="p-10"
>
Bends light
</GlassSurface><GlassSurface interactive={false} preset="subtle">
Static glass
</GlassSurface>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.
GlassSurfaceForward-ref surface component rendered as a div.
GlassSurfacePropsNative div props plus Glassy UI material and refraction options.
SurfacePresetExported material preset type.
SurfaceRefractionExported none, soft, or strong refraction type.
presetMaterial strength: subtle, standard, prominent, control, or showcase.
lensChromium lens: the rim is a slab of glass that bends and splits the page behind it. On by default for the control and showcase presets, and for dialogs, popovers, sheets and menus.
thicknessGlass thickness as a multiple of regular (1). Thicker glass widens the rim, bends the backdrop further and splits more colour. Defaults to the thickness preference. Works with a supplied backdrop in every browser, or with the Chromium lens over live content.
refractionMaterial level: none, soft, or strong. Generated refraction requires refractionBackground.
refractionBackgroundDecorative visual layer bent inside the surface; do not pass semantic or interactive content.
refractionBackgroundSpaceCoordinate space for the supplied layer: local (default) or viewport. Viewport keeps the scene fixed while the surface scrolls.
refractionDisplacementBend strength for supplied-background refraction, 72 for soft and 112 for strong by default. The rim bend is capped so it never mirrors the scene.
interactiveBrightens the surface a touch on hover. Defaults to false.
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.