Components
Glass Sheet
A glass drawer that slides in from any edge — blurred scrim, frosted panel, scroll lock, and Escape/scrim dismissal.
Playground
Edit the props live and copy the config.
Side
Tint
0.5
<GlassSheet>
<GlassSheetTrigger>Open sheet</GlassSheetTrigger>
<GlassSheetContent side="right" tint={0.5}>
<GlassSheetTitle>Settings</GlassSheetTitle>
<GlassSheetDescription>Tweak your preferences.</GlassSheetDescription>
</GlassSheetContent>
</GlassSheet>Install
npx shadcn@latest add https://websiteglass.com/r/glass-sheet.jsonUsage
import {
GlassSheet,
GlassSheetTrigger,
GlassSheetContent,
GlassSheetTitle,
GlassSheetDescription,
GlassSheetClose,
} from '@/components/ui/glass-sheet';
<GlassSheet>
<GlassSheetTrigger>Open panel</GlassSheetTrigger>
<GlassSheetContent side="right">
<GlassSheetTitle>Settings</GlassSheetTitle>
<GlassSheetDescription>Slides in from the edge.</GlassSheetDescription>
<GlassSheetClose>Done</GlassSheetClose>
</GlassSheetContent>
</GlassSheet>Props
GlassSheet is controlled via open / onOpenChange (or uncontrolled).
GlassSheetContent takes side ("right" | "left" | "top" | "bottom", default
right) and tint. It portals to document.body, locks body scroll while open,
and closes on scrim click or Escape.