Drawer

Un panel lateral deslizante de alta fidelidad que se superpone a la pantalla. Es ideal para formularios de edición detallados, configuraciones complejas y exploradores móviles. Soporta múltiples lados, tamaños, ciclos controlados y cuenta con a11y integrada (cierre por Escape/clic-fuera y ciclo de foco).

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { Drawer } from "@tsukira/ui"; <Drawer.Root open={isOpen} onOpenChange={setIsOpen}>  <Drawer.Trigger asChild>    <Button>Abrir Panel</Button>  </Drawer.Trigger>  <Drawer.Content side="right" size="md">    <Drawer.Header eyebrow="Configuración">      <Drawer.Title>Opciones del Proyecto</Drawer.Title>    </Drawer.Header>    <Drawer.Body>      Contenido...    </Drawer.Body>    <Drawer.Footer>      <Drawer.Close asChild>        <Button variant="outline">Cerrar</Button>      </Drawer.Close>    </Drawer.Footer>  </Drawer.Content></Drawer.Root>

Ejemplos#

Lados de deslizamiento (Sides)

Prop 'side' — left · right · top · bottom

El Drawer puede entrar desde cualquiera de los 4 extremos de la pantalla. Pruébalos a continuación:

Tamaños del panel (Sizes)

Prop 'size' — sm · md · lg · xl · full

El ancho (o el alto si entra desde arriba/abajo) se adapta a la escala de tamaños del sistema de diseño:

Receta: Formulario Completo de Perfil

Un caso común de uso de Drawer para edición lateral con validación simulada

Edición de Cuenta

Configura tus accesos y preferencias laterales

API#

DrawerRootProps

Prop	Tipo	Default	Descripción
`children`	`ReactNode`	—	—
`open`	`boolean`	—	—
`defaultOpen`	`boolean`	—	—
`onOpenChange`	`((open: boolean) => void)`	—	—

DrawerTriggerPropsextends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Tipo	Default	Descripción
`asChild`	`boolean`	—	Clona el hijo en lugar de renderizar un <button>.

DrawerClosePropsextends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Tipo	Default	Descripción
`asChild`	`boolean`	—	—

DrawerHeaderPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`eyebrow`	`ReactNode`	—	—