Sheet
A side panel that slides in from any edge of the screen. Built on the Radix UI Dialog primitive with focus trapping, overlay dismissal, and smooth slide animations.
Pro features
What the Pro version adds to this component.
Four Slide Directions
A single side prop switches the panel between top, right, bottom, and left placements with matching slide animations
Polished Motion
Backdrop blur, fade, and directional slide transitions with tuned enter and exit durations out of the box
Accessible Dialog Semantics
Built on Radix UI Dialog: focus trapping, Escape dismissal, aria wiring, and focus restoration are handled for you
Composable Sections
Header, footer, title, and description building blocks keep complex panel layouts consistent across your app
Installation
Install via CLI
npx @moontra/moonui-cli add sheetUsage
Examples
Side Variants
Use the side prop on SheetContent to slide the panel in from the top, right, bottom, or left edge. The default side is right.
Controlled Sheet
Manage the open state yourself with the open and onOpenChange props to open or close the sheet programmatically.
Mobile Navigation Drawer
A common pattern: a left-side sheet as a mobile navigation menu. Each item is wrapped in SheetClose so the panel closes after navigation.