Visão geral

O Drawer usa vaul para criar painéis com gesto de arrastar no mobile. Pode ser posicionado em qualquer borda.

Demo básica (bottom)

Import

import { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DrawerClose } from "@/components/ui/drawer"

Drawer vs Sheet vs Dialog

Drawer: painel com gesto de arrastar, ideal para mobile (bottom). Sheet: painel lateral sem gesto, mais adequado para desktop. Dialog: modal centralizado para confirmações e formulários.

Padrão de implementação

Snippets para os usos mais comuns do Drawer.

Drawer bottom (padrão mobile)

<Drawer>
  <DrawerTrigger asChild>
    <Button>Abrir</Button>
  </DrawerTrigger>
  <DrawerContent>
    <div className="mx-auto w-full max-w-sm">
      <DrawerHeader>
        <DrawerTitle>Título</DrawerTitle>
        <DrawerDescription>Descrição.</DrawerDescription>
      </DrawerHeader>
      <div className="px-[30px]">
        {/* conteúdo */}
      </div>
      <DrawerFooter>
        <Button>Confirmar</Button>
        <DrawerClose asChild>
          <Button variant="outline">Cancelar</Button>
        </DrawerClose>
      </DrawerFooter>
    </div>
  </DrawerContent>
</Drawer>

Drawer lateral direito

<Drawer direction="right">
  <DrawerTrigger asChild>
    <Button variant="outline">Filtros</Button>
  </DrawerTrigger>
  <DrawerContent className="w-[320px]">
    <DrawerHeader>
      <DrawerTitle>Filtros</DrawerTitle>
    </DrawerHeader>
    <div className="px-[30px]">{/* filtros */}</div>
    <DrawerFooter>
      <Button>Aplicar</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Props e uso

API dos sub-componentes do Drawer.

Props principais

direction

"bottom" | "top" | "left" | "right"

Direção de onde o drawer aparece. Padrão: bottom.

open

boolean

Estado controlado de abertura.

onOpenChange

(open: boolean) => void

Callback ao abrir/fechar.

shouldScaleBackground

boolean

Aplica escala no background ao abrir. Efeito visual do vaul.

Acessibilidade

O Drawer usa role="dialog" e foco preso internamente.

DrawerTitle é obrigatório para nomear o dialog acessível.

No mobile, o gesto de arrastar fecha o drawer. Em desktop, clique fora ou Escape.

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