Glass Surface for React

Preview

Demos ready. Update 0.

Installation

For React 19+ apps with Tailwind CSS 4.

npmpnpmyarnbun

$ npx shadcn@4.14.1 add @glassyui/glass-surface

Adds 10 files to components/glassyui and installs clsx.

Usage

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>
  );
}

React Native usage

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.

Glass over a fixed wallpaper

<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>

Static surface

<GlassSurface interactive={false} preset="subtle">
  Static glass
</GlassSurface>

API reference

`GlassSurface`

Prop	Type	Default	Description
`preset`	`'subtle' \| 'standard' \| 'prominent' \| 'control' \| 'showcase'`	`'standard'`	Material strength. control and showcase also turn the lens on by default.
`lens`	`boolean`	true for control and showcase	Chromium-only rim lens that bends and splits the page behind it. Off with reduced transparency, while generated refraction runs, or above 720,000 px² of area.
`thickness`	`number`	thickness preference	Glass thickness as a multiple of regular (1); thicker glass widens the rim and bends further.
`refraction`	`'none' \| 'soft' \| 'strong'`	'strong' for showcase, else 'none'	Generated refraction of refractionBackground. Needs refractionBackground and is off under reduced motion or reduced transparency.
`refractionBackground`	`ReactNode`	None	Decorative layer bent inside the surface; not for interactive or semantic content. Needs a uniform border radius.
`refractionBackgroundSpace`	`'local' \| 'viewport'`	`'local'`	Aligns refractionBackground to the surface or to the viewport; use viewport for a fixed wallpaper.
`refractionDisplacement`	`number`	72 soft, 112 strong	Bend strength of generated refraction.
`interactive`	`boolean`	`false`	Brightens the surface slightly on hover.

Also accepts HTML div attributes.

Types: GlassSurfacePropsSurfacePresetSurfaceRefractionRefractionBackgroundSpace