DocsDocsSDKs

Sheet

React SDK guidance for Sheet.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use Sheet when the page needs a panel that slides in from an edge without fully replacing the current view. It is the natural choice for cart drawers, mobile navigation menus, filter sidebars, and settings panels where visitors should still feel connected to the page behind the overlay.

If the content needs to fully interrupt the flow (confirmation, edit form, critical decision), use Dialog instead. Sheet is for persistent, browsable side-content.

Slot strategy

Sheet builds on the Dialog primitive with a side-aware layout:

  • Sheet is the root. It manages open/close state and accepts open and onOpenChange for controlled usage.
  • SheetTrigger is the element that opens the panel. Use asChild to render your own button.
  • SheetContent is the sliding panel. It wraps itself with a portal and overlay automatically. The side prop controls which edge it slides from: right (default), left, top, or bottom.
  • SheetHeader sits at the top with a bottom border and holds the title and description.
  • SheetFooter sticks to the bottom using mt-auto, which makes it stay anchored regardless of body content length.
  • SheetTitle renders the heading and includes an optional close button (controlled by showClose, defaults to true).
  • SheetDescription provides supporting context below the title.
  • SheetClose is available for additional close affordances inside the body.

Side and width

Left and right sheets default to w-3/4 on mobile and sm:max-w-sm on larger screens. Override the width with a className on SheetContent when the panel needs more room, like a filter sidebar at w-[400px].

Behavior and theming guidance

The panel slides in with a directional animation that matches the side prop. Opening uses a slower 500ms ease-in-out, and closing uses a faster 300ms transition, which makes the dismiss feel snappier than the reveal.

The overlay dims the background the same way Dialog does. Clicking the overlay or pressing Escape closes the sheet.

For cart drawers and similar persistent panels, use controlled state with open and onOpenChange so you can update the sheet content in response to cart mutations and close it programmatically after checkout navigation.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/ui-resolver.
  • Playground route: /sandbox?component=Sheet.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

Sheet

# Sheet > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/ui-resolver`. - Live playground: [/components/base-ui/sheet](https://sdk.enad.io/components/base-ui/sheet). ## When to use it Use `Sheet` when the page needs a panel that slides in from an edge without fully replacing the current view. It is the natural choice for cart drawers, mobile navigation menus, filter sidebars, and settings panels where visitors should still feel connected to the page behind the overlay. If the content needs to fully interrupt the flow (confirmation, edit form, critical decision), use `Dialog` instead. Sheet is for persistent, browsable side-content. ## Slot strategy Sheet builds on the Dialog primitive with a side-aware layout: - `Sheet` is the root. It manages open/close state and accepts `open` and `onOpenChange` for controlled usage. - `SheetTrigger` is the element that opens the panel. Use `asChild` to render your own button. - `SheetContent` is the sliding panel. It wraps itself with a portal and overlay automatically. The `side` prop controls which edge it slides from: `right` (default), `left`, `top`, or `bottom`. - `SheetHeader` sits at the top with a bottom border and holds the title and description. - `SheetFooter` sticks to the bottom using `mt-auto`, which makes it stay anchored regardless of body content length. - `SheetTitle` renders the heading and includes an optional close button (controlled by `showClose`, defaults to `true`). - `SheetDescription` provides supporting context below the title. - `SheetClose` is available for additional close affordances inside the body. > **Side and width** > > Left and right sheets default to `w-3/4` on mobile and `sm:max-w-sm` on larger screens. Override > the width with a `className` on `SheetContent` when the panel needs more room, like a filter > sidebar at `w-[400px]`. ## Behavior and theming guidance The panel slides in with a directional animation that matches the `side` prop. Opening uses a slower 500ms ease-in-out, and closing uses a faster 300ms transition, which makes the dismiss feel snappier than the reveal. The overlay dims the background the same way Dialog does. Clicking the overlay or pressing Escape closes the sheet. For cart drawers and similar persistent panels, use controlled state with `open` and `onOpenChange` so you can update the sheet content in response to cart mutations and close it programmatically after checkout navigation. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/ui-resolver`. - Playground route: /sandbox?component=Sheet. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes