Sheet

01Preview

Change the controls, then open the sheet. Press Escape, select the overlay, use a button or swipe the handle to close it.

import {
  Button, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger,
} from '@nuton/ui'

<Sheet>
  <SheetTrigger asChild><Button appearance="stroke">Course outline</Button></SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Biology 101</SheetTitle>
      <SheetDescription>8 lessons · 3 completed</SheetDescription>
    </SheetHeader>
    <SheetBody>
      <ol>{lessons.map((l) => <li key={l}>{l}</li>)}</ol>
    </SheetBody>
    <SheetFooter>
      <SheetClose asChild><Button appearance="stroke">Close</Button></SheetClose>
      <SheetClose asChild><Button onClick={resume}>Resume lesson</Button></SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

02Installation

pnpm add @nuton/ui @nuton/tokens @remixicon/react

npm install @nuton/ui @nuton/tokens @remixicon/react

yarn add @nuton/ui @nuton/tokens @remixicon/react

import '@nuton/tokens/tokens.css'
import '@nuton/ui/styles.css'

03Usage

import { Button, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@nuton/ui'

<Sheet>
  <SheetTrigger asChild><Button appearance="stroke">Filters</Button></SheetTrigger>
  <SheetContent side="right" size="sm" aria-describedby={undefined}>
    <SheetHeader><SheetTitle>Filter lessons</SheetTitle></SheetHeader>
    <SheetBody>…</SheetBody>
  </SheetContent>
</Sheet>

• Use a side sheet for supporting tasks people do next to the page: filters, an outline, details of an item.
• Use a bottom sheet on phones for things that would be a side panel on wider screens, such as the AI Tutor.
• Bottom sheets have a drag handle: swipe down to close, or press it. Side sheets can add one with handle. Keep the close button too; the gesture is never the only way out.
• Every sheet needs a SheetTitle. Add a SheetDescription, or pass aria-describedby={undefined}.
• For a short decision, use a Modal. For a small preview next to a word, use a Popover.

04Variants and sizes

Three sides and three sizes. Right and left follow the reading direction.

Sides

<SheetContent side="left">…</SheetContent>
<SheetContent side="right">…</SheetContent>
<SheetContent side="bottom">…</SheetContent>

Drag handle and snap points

<SheetContent side="bottom">…</SheetContent>                 {/* handle on by default */}
<SheetContent side="bottom" snapPoints={[0.5, 1]}>…</SheetContent>
<SheetContent side="right" handle>…</SheetContent>

Sizes and measurements

05States and interactions

State tokens

Set on .nu-sheet: --nu-sheet-width, --nu-sheet-bottom-width, --nu-sheet-bottom-max, --nu-sheet-gap, --nu-sheet-close-size, --nu-sheet-pad-inline, --nu-sheet-bar-pad, --nu-sheet-radius, --nu-sheet-handle-length, --nu-sheet-handle-thickness, --nu-sheet-handle-inset, --nu-sheet-handle-zone, --nu-sheet-handle-hit-long, --nu-sheet-handle-hit-short and --nu-sheet-handle-color. The component sets --nu-sheet-offset and --nu-sheet-snap while dragging.

06Composition examples

AI Tutor on phones

<Sheet>
  <SheetTrigger asChild><Button leadingIcon={<RiSparklingLine />}>Ask AI Tutor</Button></SheetTrigger>
  <SheetContent side="bottom" size="lg" snapPoints={[0.5, 1]}>
    <SheetHeader>
      <SheetTitle>AI Tutor</SheetTitle>
      <SheetDescription>Photosynthesis basics</SheetDescription>
    </SheetHeader>
    <SheetBody>{/* conversation */}</SheetBody>
    <SheetFooter>
      <form onSubmit={send}>
        <Field label="Message"><Input value={draft} onChange={…} /></Field>
        <Button type="submit">Send</Button>
      </form>
    </SheetFooter>
  </SheetContent>
</Sheet>

On phones the AI Tutor opens at half height with the lesson visible above. Drag the handle up (or press it) for the full conversation; swipe down to close. The message field never starts a drag.

Filters

<SheetContent side="right" size="sm">
  <SheetHeader>
    <SheetTitle>Filter lessons</SheetTitle>
    <SheetDescription>Show only the lessons you need.</SheetDescription>
  </SheetHeader>
  <SheetBody>
    <Checkbox label="Unfinished" … />
  </SheetBody>
  <SheetFooter>
    <Button appearance="stroke" onClick={clear}>Clear</Button>
    <SheetClose asChild><Button onClick={apply}>Show lessons</Button></SheetClose>
  </SheetFooter>
</SheetContent>

Course outline

<SheetContent side="left" size="sm" aria-describedby={undefined}>
  <SheetHeader><SheetTitle>Biology 101</SheetTitle></SheetHeader>
  <SheetBody>
    <nav aria-label="Lessons"><ol>{/* LinkButtons, aria-current on the current lesson */}</ol></nav>
  </SheetBody>
</SheetContent>

07API reference

SheetContent props

Sheet takes open, defaultOpen and onOpenChange. SheetHeader, SheetBody and SheetFooter are divs; SheetTitle renders an h2 and SheetDescription a paragraph. SheetTrigger and SheetClose take asChild.

Accessibility

You must: give every sheet a title, and keep a visible way to close it when showClose is off.

08Guidelines and related components

Do and don't

Related components

• ModalA centred dialog for focused tasks and confirmations.
• PopoverA small panel next to its trigger.
• ButtonTriggers and footer actions.