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", and className. It includes an overlay automatically; there is no showOverlay prop.
• 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.

#Content flow

Sheet content is aligned to the top and grows with its content. Side sheets do not stretch the header, description, and navigation apart to fill the viewport. Long content scrolls within the sheet. Compose spacing with VStack or HStack props; no consumer style overrides are needed.