Component

Drawer

Disponible

Panel deslizante que aparece desde un borde de la pantalla para mostrar contenido adicional sin abandonar la vista actual.

Bottom · Left · Header · Body · Footer

Import

Importa los estilos base y los componentes del Drawer.

TypeScript

1import 'nave-ui-library/styles.css'
2import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerTitle, DrawerDescription, DrawerCloseButton } from 'nave-ui-library/react'

Bottom (Mobile)

La dirección por defecto para dispositivos móviles. Incluye un manejador visual y cierre por arrastre.

Side Panel (Left)

Ideal para filtros de búsqueda o paneles de configuración en escritorio.

API Reference

Props principales del Drawer.

Prop	Type	Default	Description
`direction`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Dirección desde la que se desliza el panel.
`open`	`boolean`	—	Controla apertura (controlled mode).
`onOpenChange`	`(open: boolean) => void`	—	Callback al cambiar visibilidad.
`children`req	`ReactNode`	—	Trigger y Content del drawer.

Registry

Ver configuración técnica del registro

JSON

1{
2  "name": "Drawer",
3  "description": "Drawer lateral para navegación o contenido adicional.",
4  "component": "Drawer",
5  "files": [
6    "components/base/navegation/Drawer.tsx"
7  ],
8  "dependencies": [
9    "react",
10    "vaul"
11  ],
12  "props": {
13    "side": {
14      "type": "'left' | 'right' | 'top' | 'bottom'",
15      "description": "Side from which drawer appears."
16    }
17  }
18}