Sheet

<Sheet><Sheet.Trigger render={<Button>Open details</Button>} /><Sheet.Content>  <Sheet.Header>    <Sheet.Title>acme-api</Sheet.Title>    <Sheet.Description>Deployed 4 minutes ago from main@8f21c3d.</Sheet.Description>  </Sheet.Header>  <Sheet.Body>    <Stat label="Requests" value="142,318" delta={12.4} />  </Sheet.Body>  <Sheet.Footer>    <Sheet.Close render={<Button variant="ghost">Close</Button>} />    <Button variant="primary">Redeploy</Button>  </Sheet.Footer></Sheet.Content></Sheet>

A Sheet is a Dialog with a different geometry, and it exists as its own component for one reason: the edge it comes from decides the size axis, the animation and the border, and none of that is a sensible prop on a centred dialog.

Reach for it when the content is a side quest to the page — a detail pane, a filter panel, a record's full record — rather than a task that has to end before the page continues.

Usage

import { Button, Sheet } from "@heyo-sh/heyo-ui";<Sheet>  <Sheet.Trigger render={<Button>Details</Button>} />  <Sheet.Content side="right">…</Sheet.Content></Sheet>;

Sides

right is the default, and it is right almost always: it is where a detail pane lives, and it leaves the navigation on the left untouched. left is for navigation itself, bottom for something that belongs to the bottom of the viewport.

<Sheet><Sheet.Trigger render={<Button>Right</Button>} /><Sheet.Content side="right">…</Sheet.Content></Sheet><Sheet><Sheet.Trigger render={<Button>Left</Button>} /><Sheet.Content side="left">…</Sheet.Content></Sheet><Sheet><Sheet.Trigger render={<Button>Bottom</Button>} /><Sheet.Content side="bottom">…</Sheet.Content></Sheet>

Sizes

sm, base, lg and xl set the width for a left or right sheet and the height for a top or bottom one — the axis follows the edge, which is exactly why this is a separate component.

Dismissing

Like Dialog, a sheet is dismissible by default. dismissible={false} is for the rare panel that must be answered; for a side quest it is almost always wrong, since the whole point is that the page is still there behind it.

Properties

Sheet

Sheet.Content

The parts