Glassy UI
Browse docsPanel

Surfaces

Glass Panel

Composed surface for cards, panels, pills, popovers, and elevated app chrome.

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 Panel

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

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.tsx
  • 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 { GlassPanel } from "@/components/glassyui/glass-panel";

export function PanelDemo() {
  return (
    <GlassPanel variant="card" elevation="raised">
      Panel content
    </GlassPanel>
  );
}

Examples

Pill panel

<GlassPanel variant="pill" preset="control">
  Syncing
</GlassPanel>

API

GlassPanel

Forward-ref composed surface rendered as a div.

GlassPanelProps

Native div props plus panel composition options.

variant

Shape and spacing: panel, card, or pill.

elevation

Shadow and border level: base or raised.

preset

Material preset forwarded to GlassSurface.

interactive

Enables local pointer lighting when interaction preferences allow it.

refraction

Material refraction level forwarded to GlassSurface.

refractionBackground

Decorative supplied background forwarded to GlassSurface.

refractionDisplacement

Optional displacement override 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.