Visão geral

O Sheet abre um painel de qualquer borda da tela. Usa Dialog internamente mas com layout lateral.

Direções

Import

import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SheetClose } from "@/components/ui/sheet"

Padrão de implementação

Snippets para uso do Sheet.

Sheet lateral direito

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Editar perfil</Button>
  </SheetTrigger>
  <SheetContent side="right" className="sm:max-w-md">
    <SheetHeader>
      <SheetTitle>Editar perfil</SheetTitle>
      <SheetDescription>Atualize suas informações.</SheetDescription>
    </SheetHeader>
    <div className="px-[30px]">
      {/* formulário */}
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="outline">Cancelar</Button>
      </SheetClose>
      <Button type="submit">Salvar</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter