Overlays

Sheet

A panel that slides in from an edge: details, filters, a form next to the page.

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from "@flinbu/seed";

Right and bottom

import { Button, Field, Input, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@flinbu/seed";

<div className="flex gap-xs">
  <Sheet>
    <SheetTrigger asChild><Button variant="secondary">Token details</Button></SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>bg-accent-solid</SheetTitle>
        <SheetDescription>The primary action and controls that are on.</SheetDescription>
      </SheetHeader>
      <Field label="Light"><Input defaultValue="#2563EB" /></Field>
      <Field label="Dark"><Input defaultValue="#2563EB" /></Field>
      <SheetFooter>
        <SheetClose asChild><Button variant="tertiary">Cancel</Button></SheetClose>
        <Button>Save changes</Button>
      </SheetFooter>
    </SheetContent>
  </Sheet>
  <Sheet>
    <SheetTrigger asChild><Button variant="secondary">From the bottom</Button></SheetTrigger>
    <SheetContent side="bottom">
      <SheetHeader><SheetTitle>Share v2.4</SheetTitle><SheetDescription>Anyone with the link can view it.</SheetDescription></SheetHeader>
    </SheetContent>
  </Sheet>
</div>

Use it for

Editing one item without leaving the list.

Use something else for

A short decision: use Dialog.

Props

Prop	Type	Default	Description
`SheetContent: side`	`'right''left''bottom'`	`'right'`	The edge it slides from. Side sheets are up to 448px wide.
`SheetContent: hideClose`	`boolean`	–	Hides the close button.
`SheetContent: closeLabel`	`string`	`'Close'`	Accessible name of the close button.

Accessibility

Built on Radix Dialog: focus is trapped, Escape closes, focus returns to the trigger.
SheetTitle names it.