Skip to content
nexubDesign System
v2.4.0

Components · Overlays

Sheet

StableSince v0.0.1

Alias for Drawer — slide-in sheet panel.

import { Sheet } from '@nexub/react';

Examples

Default

Props

Props
PropTypeDefaultDescription
Sheet.Rootcompound—Root provider that manages open/close state. Exported from Drawer.
Sheet.Triggercompound—Element that opens the sheet.
Sheet.Portalcompound—Portals the overlay and content into the document body.
Sheet.Overlaycompound—Dimmed backdrop rendered behind the sheet.
Sheet.Contentcompound—The sheet panel. Accepts a side prop.
scrollLock'style' | 'class'—On Sheet.Root. How page scroll is locked while open. class adds a class from @nexub/themes/base instead of injecting a <style> tag, so it works under a strict CSP (style-src 'self'). Default style.
side'left' | 'right' | 'top' | 'bottom'—Edge of the screen from which the sheet slides in.
Sheet.Headercompound—Header section of the sheet panel.
Sheet.Footercompound—Footer section of the sheet panel.
Sheet.Titlecompound—Accessible title for the sheet.
Sheet.Descriptioncompound—Supporting description text for the sheet.
Sheet.Closecompound—Element that closes the sheet.