Glassy UI
Browse docsSurface

Surfaces

Glass Surface

Low-level refractive surface primitive for custom glass components.

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 Surface

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

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.tsx
  • components/glassyui/lib/merge-refs.ts
  • components/glassyui/lib/use-local-light.ts
  • components/glassyui/lib/refraction-map.ts
  • components/glassyui/lib/use-refraction-filter.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-surface.tsx
  • components/glassyui/lib/merge-refs.ts
  • components/glassyui/lib/use-local-light.ts
  • components/glassyui/lib/refraction-map.ts
  • components/glassyui/lib/use-refraction-filter.tsx
  • components/glassyui/glass-provider.tsx
  • components/glassyui/liquid-filters.tsx
  • components/glassyui/lib/preferences.ts
  • components/glassyui/styles/liquid.css

Usage

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,#22d3ee,#a78bfa,#34d399)]" />}
      className="p-6"
    >
      Refractive surface
    </GlassSurface>
  );
}

Examples

Static surface

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

API

GlassSurface

Forward-ref surface component rendered as a div.

GlassSurfaceProps

Native div props plus Glassy UI material and refraction options.

SurfacePreset

Exported material preset type.

SurfaceRefraction

Exported none, soft, or strong refraction type.

preset

Material strength: subtle, standard, prominent, control, or showcase.

refraction

Material level: none, soft, or strong. Generated refraction requires refractionBackground.

refractionBackground

Decorative visual layer bent inside the surface; do not pass semantic or interactive content.

refractionDisplacement

Optional bounded displacement override for supplied-background refraction.

interactive

Enables local pointer lighting when interaction preferences allow it.

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.