Capítulo 46 de 108

Sheet

Core Idea

Estende o Dialog para exibir conteúdo que complementa a tela principal, deslizando de uma das bordas (drawer lateral/top/bottom no desktop). Built on Base UI Dialog.

Key Concepts

  • side: prop em SheetContent, valores "top" | "right" | "bottom" | "left"; controla de qual borda o painel desliza.
  • showCloseButton={false}: remove o X, forçando fechar clicando fora (mesmo padrão do Dialog).
  • SheetClose: fecha o sheet; usa render={<Button variant="outline" />} como o Dialog.

Code Examples

const SHEET_SIDES = ["top", "right", "bottom", "left"] as const

<Sheet>
  <SheetTrigger render={<Button variant="outline" className="capitalize" />}>
    {side}
  </SheetTrigger>
  <SheetContent
    side={side}
    className="data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]"
  >
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>...</SheetDescription>
    </SheetHeader>
    <div className="no-scrollbar overflow-y-auto px-4">{/* conteúdo */}</div>
    <SheetFooter>
      <Button type="submit">Save changes</Button>
      <SheetClose render={<Button variant="outline" />}>Cancel</SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>
  • O que demonstra: os 4 lados possíveis via side, com data-[side=bottom]:max-h-[50vh] limitando altura quando o sheet abre de cima/baixo (evita ocupar a tela inteira).

Reference Tables

Composição:

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    └── SheetFooter

Key Takeaways

  1. side="right" é o padrão implícito quando a prop é omitida no exemplo básico.
  2. Para side="top"/"bottom", limitar max-h via data-[side=...] para não cobrir a tela toda.
  3. Em RTL, inverter side manualmente (dir === "rtl" ? "left" : "right") pra manter a semântica de "abre da direção de leitura".
  4. API idêntica ao Dialog (mesmo showCloseButton, mesma base Base UI Dialog) — Sheet é essencialmente Dialog com posicionamento lateral.
  5. Instalação manual requer npm install @base-ui/react.

Connects To

  • Dialog: Sheet reusa a mesma base (Base UI Dialog); a diferença é só o slide de borda via side.
  • Field / FieldGroup / FieldLabel: padrão recomendado para formulários dentro do SheetContent.
AnteriorAlert DialogPróximoDrawer