Photonix UI - React Components, Templates & Figma Design System

Sheet

A container that slides in from the screen edge while preserving context on the underlying page.

Usage

import { Sheet } from '@photonix/ultimate';

<Sheet open={open} onClose={() => setOpen(false)}>
  <Content />
</Sheet>

Prop	Type	Default	Description
header	`React.ReactNode`	`-`	Header content - typically an AppBar component
children	`React.ReactNode`	`-`	Main scrollable content area
footer	`React.ReactNode`	`-`	Footer content - typically a Toolbar component
open	`boolean`	`true`	Whether the sheet is open/visible
onClose	`(() => void)`	`-`	Callback when sheet should close (e.g., clicking overlay)
maxWidth	`"auto" \| "full" \| "mobile" \| "tablet" \| "desktop"`	`'auto'`	Maximum width of the sheet - 'auto': Responsive based on viewport (default) - 'mobile': 360px - 'tablet': 600px - 'desktop': 900px - 'full': 100%
height	`"auto" \| "full" \| "fixed"`	`'auto'`	Height behavior - 'auto': Content determines height (default) - 'full': Full viewport height - 'fixed': Fixed height (use with style.height)
showGrabber	`boolean`	`false`	Show grabber bar at top (for mobile bottom sheets)
showCloseButton	`boolean`	`false`	Show a floating close button in the sheet corner.
closeButtonVariant	`"on-surface" \| "spotlight"`	`'on-surface'`	Floating close button surface treatment. - 'on-surface': neutral on-surface background - 'spotlight': primary surface background for image/spotlight sheets
closeButtonAriaLabel	`string`	`'Close'`	Accessible label for the floating close button.
footerElevationVariant	`"none" \| "shadow" \| "gradient"`	`'shadow'`
noPadding	`boolean`	`false`	Disable default horizontal padding
initialFocusRef	`React.RefObject<HTMLElement \| null>`	`-`	Element to focus when the sheet opens

Use a grabber and auto height when the sheet behaves like a mobile action surface.

Mobile Bottom Sheet

<Sheet open={open} onClose={() => setOpen(false)} showGrabber height="auto">
  <Content />
</Sheet>

Use full width and full height for immersive editing or multi-step flows.

Full Screen

<Sheet open={open} onClose={() => setOpen(false)} height="full" maxWidth="full">
  <Content />
</Sheet>