Sheet

Sheet defines how EnterUI handles a side panel for contextual workflows and settings, including default structure, accessible states, and token-driven styling.

#Default usage

<Sheet>
  <SheetTrigger asChild><Button variant="secondary">Open sheet</Button></SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Workspace settings</SheetTitle>
      <SheetDescription>Update preferences without leaving context.</SheetDescription>
    </SheetHeader>
    <Switch aria-label="Enable sync" defaultChecked />
    <SheetFooter><Button>Save</Button></SheetFooter>
  </SheetContent>
</Sheet>

#Import

import {
  Button,
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  Switch,
} from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

Sheet uses dialog semantics, overlay, portal rendering, focus trapping, and return focus behavior.

#API

• SheetContent supports side="right|left|top|bottom", showOverlay, and className.
• Header, footer, title, and description are layout and labeling primitives.
• Drawer aliases mirror the Sheet API.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.