Sheet

Painel que desliza de uma borda, sobre a tela.

Playground

Lado

Botão de fechar

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>Abrir painel</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Configurações</SheetTitle>
      <SheetDescription>…</SheetDescription>
    </SheetHeader>
    <SheetFooter>
      <SheetClose render={<Button />}>Pronto</SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Quando usar

✓Detalhes de um item mantendo a lista visível
✓Filtros ou configurações extensas
✓Menu de navegação no celular (side left)

Evite quando

Decisão rápida→ Dialog
Painel fixo e redimensionável ao lado do conteúdo→ um painel lateral fixo (ex.: modo side do PromptBar)

Variantes e props

side (SheetContent)padrão: right

rightlefttopbottom

showCloseButtonpadrão:

truefalse

Estados

openclosed

Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).

Acessibilidade

Papel: dialog (aria-modal)
Teclado: Esc fecha; foco preso

SheetTitle obrigatório

Código

Partes: Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose

import

import { Sheet, SheetTrigger, SheetContent, SheetHeader } from "@/components/ui/sheet";

Fonte: src/components/ui/sheet.tsx · Resense (shadcn base-nova, Base UI)

Relacionados: Dialog, Drawer