Carregando…

Drawer

Overlays

Slide-in panel from any edge with header, footer, 4 sizes and overlay dismiss.

Instalação via CLI

$ npx kikitocn add drawer

Interno:

@/lib/utils

Exemplo de uso

DrawerExample.tsx

import { Drawer } from "@/components/ui/cn/drawer/Drawer";

export function DrawerExample() {
  return (
    <Drawer />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`open*`	`boolean`	—	Controla se o drawer está aberto
`onClose*`	`() => void`	—	Callback chamado ao fechar
`side`	`'right' \| 'left' \| 'bottom' \| 'top'`	`'right'`	Borda de onde o drawer desliza
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Largura (ou altura) do drawer
`title`	`string`	`undefined`	Título no cabeçalho
`description`	`string`	`undefined`	Texto de descrição abaixo do título
`hideClose`	`boolean`	`false`	Oculta o botão × de fechar
`closeOnOverlay`	`boolean`	`true`	Fecha ao clicar no overlay
`closeOnEscape`	`boolean`	`true`	Fecha ao pressionar Escape
`footer`	`ReactNode`	`undefined`	Conteúdo do rodapé fixo
`footerAlign`	`'left' \| 'right' \| 'center' \| 'between'`	`'right'`	Alinhamento dos elementos do rodapé
`children`	`ReactNode`	`undefined`	Conteúdo principal do drawer

Carregando…