Navegação

Drawer

Painel lateral deslizante via Radix Dialog. Composto por Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle e DrawerDescription. Suporta as laterais right, left, top e bottom.


npx shadcn add @studio/drawer

Baseado em Radix Dialog — acessível por teclado e leitores de tela.

Preview interativo

Demo interativa — abre painel lateral com overlay. Em produção usa Radix Dialog com animação CSS, foco gerenciado e acessibilidade completa.

Props

Prop	Tipo	Default	Descrição
`side`	`'right'\|'left'\|'top'\|'bottom'`	`right`	Lado de onde o painel desliza
`open`	`boolean`	—	Estado aberto (controlado)
`onOpenChange`	`(open: boolean) => void`	—	Callback ao abrir/fechar