Glass Sheet for React

Preview

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 Sheet

pnpm dlx shadcn@4.14.1 add @glassyui/glass-sheet

What this installs11 files, 2 packages

Direct registry declarations

These values belong to @glassyui/glass-sheet itself in registry.json.

Package dependencies

@radix-ui/react-dialog
clsx

Registry dependencies

@glassyui/glass-panel

File targets

components/glassyui/glass-sheet.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

@radix-ui/react-dialog
clsx

Installed files

components/glassyui/glass-sheet.tsx
components/glassyui/glass-panel.tsx
components/glassyui/glass-surface.tsx
components/glassyui/lib/merge-refs.ts
components/glassyui/lib/refraction-map.ts
components/glassyui/lib/use-refraction-filter.tsx
components/glassyui/lib/scene-context.ts
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

import { GlassSheet, GlassSheetContent, GlassSheetDescription, GlassSheetTitle, GlassSheetTrigger } from "@/components/glassyui/glass-sheet";

export function SheetDemo() {
  return (
    <GlassSheet>
      <GlassSheetTrigger>Share</GlassSheetTrigger>
      <GlassSheetContent>
        <GlassSheetTitle>Share photo</GlassSheetTitle>
        <GlassSheetDescription>Send it to a nearby device.</GlassSheetDescription>
      </GlassSheetContent>
    </GlassSheet>
  );
}

Examples

Side sheet

<GlassSheetContent side="right">Inspector</GlassSheetContent>

Opened from a menu

const menuRef = useRef<HTMLButtonElement>(null);

<GlassMenu>
  <GlassMenuTrigger ref={menuRef}>File</GlassMenuTrigger>
  <GlassMenuContent>
    <GlassMenuItem onSelect={() => setOpen(true)}>Share…</GlassMenuItem>
  </GlassMenuContent>
</GlassMenu>
<GlassSheet open={open} onOpenChange={setOpen}>
  <GlassSheetContent
    onCloseAutoFocus={(event) => {
      event.preventDefault();
      menuRef.current?.focus();
    }}
  >
    <GlassSheetTitle>Share photo</GlassSheetTitle>
  </GlassSheetContent>
</GlassSheet>

API

GlassSheet

Radix Dialog root.

GlassSheetTrigger / GlassSheetClose

Radix trigger and close primitives.

GlassSheetContent

Portal, overlay, glass panel, drag handle, and named close button.

side

Edge to slide from: top, right, bottom, or left. Defaults to bottom.

closeLabel

Accessible name of the close button. Defaults to Close sheet.

thickness

How thick the glass is, as a multiple of regular. Defaults to the thickness preference.

GlassSheetTitle / GlassSheetDescription

Radix accessible title and description.

Notes

Gestures

Drag the bottom handle down past a quarter of the sheet, or fling it, to dismiss. Short drags spring back.

Accessibility

Radix traps focus, closes on Escape, and returns focus to the trigger. A sheet opened from a menu has no trigger, so send focus back to the menu button with onCloseAutoFocus. Always render a title.

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.