Drawer

Un panel que se desliza desde cualquier borde y sigue tu dedo, con puntos de anclaje, un tirador funcional y drawers anidados que se apilan.

"use client"

import * as React from "react"
import { IconMinus, IconPlus } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { NumberFlow } from "@/components/ui/number-flow"

export function DrawerDemo() {
  const [goal, setGoal] = React.useState(350)

  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>
        Set daily goal
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto flex w-full max-w-sm flex-col">
          <DrawerHeader>
            <DrawerTitle>Move goal</DrawerTitle>
            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
          </DrawerHeader>
          <div className="flex items-center justify-center gap-6 p-6">
            <Button
              variant="outline"
              size="icon"
              aria-label="Decrease goal"
              disabled={goal <= 200}
              onClick={() => setGoal(goal - 10)}
            >
              <IconMinus />
            </Button>
            <div className="flex min-w-32 flex-col items-center">
              <NumberFlow
                value={goal}
                className="text-6xl font-semibold tracking-tight"
              />
              <span className="text-xs text-muted-foreground uppercase">
                Calories / day
              </span>
            </div>
            <Button
              variant="outline"
              size="icon"
              aria-label="Increase goal"
              disabled={goal >= 600}
              onClick={() => setGoal(goal + 10)}
            >
              <IconPlus />
            </Button>
          </div>
          <DrawerFooter>
            <DrawerClose render={<Button />}>Save goal</DrawerClose>
            <DrawerClose render={<Button variant="outline" />}>
              Cancel
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}

Instalación

pnpm dlx shadcn@latest add https://hextaui.com/r/drawer.json

Añade el componente, los tokens del tema de HextaUI y los componentes de HextaUI de los que depende.

Añade los tokens del tema a tu CSS global, si aún no lo has hecho.

Instala las dependencias.

pnpm add @base-ui/react @tabler/icons-react cn

Copia y pega el siguiente código en tu proyecto.

components/ui/drawer.tsx

"use client"

import * as React from "react"
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
import { cn } from "cn"

import { DialogLayerProvider, useDialogLayer } from "@/components/ui/sheet"

components/ui/sheet.tsx

"use client"

import * as React from "react"
import { Drawer as SheetPrimitive } from "@base-ui/react/drawer"
import { IconX } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

components/ui/button.tsx

"use client"

import * as React from "react"
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { IconAlertCircle, IconCircleCheck } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

Actualiza las rutas de importación para que coincidan con la configuración de tu proyecto.

Uso

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

<Drawer>
  <DrawerTrigger render={<Button variant="outline" />}>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerBody>{/* content */}</DrawerBody>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Composición

Drawer
├── DrawerTrigger
└── DrawerContent
    ├── DrawerHeader
    │   ├── DrawerTitle
    │   └── DrawerDescription
    ├── DrawerBody
    └── DrawerFooter
        └── DrawerClose

Ejemplos

Direcciones

Define swipeDirection en <Drawer /> para elegir el borde. El drawer se abre desde ese borde y se desliza de vuelta hacia él. Los drawers superior e inferior muestran un tirador por defecto.

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

const directions = [
  { value: "up", label: "Top" },
  { value: "right", label: "Right" },
  { value: "down", label: "Bottom" },
  { value: "left", label: "Left" },
] as const

export function DrawerDirections() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      {directions.map(({ value, label }) => (
        <Drawer key={value} swipeDirection={value}>
          <DrawerTrigger render={<Button variant="outline" />}>
            {label}
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>Swipe {value} to close</DrawerTitle>
              <DrawerDescription>
                The drawer follows your finger and keeps the momentum when you
                let go.
              </DrawerDescription>
            </DrawerHeader>
            <DrawerFooter>
              <DrawerClose render={<Button variant="outline" />}>
                Close
              </DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      ))}
    </div>
  )
}

Pasa snapPoints para que un drawer inferior repose en alturas predefinidas. Los números de 0 a 1 son fracciones del viewport, los números mayores son píxeles y las cadenas aceptan px o rem. La parte visible siempre se ajusta a su contenido, así que nada queda oculto bajo la pantalla.

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

const snapPoints = ["20rem", 1]

const places = [
  "Blue Bottle Coffee",
  "Tartine Bakery",
  "Mission Dolores Park",
  "Ferry Building",
  "Golden Gate Park",
  "Lands End Trail",
  "Twin Peaks",
  "Coit Tower",
  "Alamo Square",
  "Baker Beach",
  "Crissy Field",
  "Japanese Tea Garden",
]

export function DrawerSnapPoints() {
  return (
    <Drawer snapPoints={snapPoints}>
      <DrawerTrigger render={<Button variant="outline" />}>
        Nearby places
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Nearby places</DrawerTitle>
          <DrawerDescription>
            Drag up to see the full list, or down to close.
          </DrawerDescription>
        </DrawerHeader>
        <DrawerBody>
          <ul className="flex flex-col divide-y">
            {places.map((place) => (
              <li key={place} className="py-3 text-sm">
                {place}
              </li>
            ))}
          </ul>
        </DrawerBody>
      </DrawerContent>
    </Drawer>
  )
}

Contenido desplazable

<DrawerBody /> se desplaza por sí solo, así que el encabezado y el pie permanecen en su sitio. El deslizamiento solo empieza cuando el cuerpo vuelve a estar desplazado hasta arriba.

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

const sections = Array.from({ length: 12 }, (_, index) => index + 1)

export function DrawerScrollable() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>
        Terms of service
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Terms of service</DrawerTitle>
          <DrawerDescription>Last updated October 2026.</DrawerDescription>
        </DrawerHeader>
        <DrawerBody>
          <div className="flex flex-col gap-4 text-sm text-muted-foreground">
            {sections.map((section) => (
              <p key={section}>
                {section}. By using the service you agree to these terms. We may
                update them from time to time, and we will let you know when
                something important changes. Keep your account details safe and
                tell us if you think someone else has access.
              </p>
            ))}
          </div>
        </DrawerBody>
        <DrawerFooter>
          <DrawerClose render={<Button />}>Accept</DrawerClose>
          <DrawerClose render={<Button variant="outline" />}>
            Decline
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Formularios y el teclado

Envuelve <DrawerContent /> en <DrawerVirtualKeyboardProvider /> cuando un drawer inferior contenga campos de texto. En teléfonos, el campo con foco se desplaza hasta quedar visible sobre el teclado de software en lugar de esconderse tras él. Mantén los campos en <DrawerBody /> para que el encabezado y el pie permanezcan fijos.

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
  DrawerVirtualKeyboardProvider,
} from "@/components/ui/drawer"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function DrawerKeyboard() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>
        Delivery details
      </DrawerTrigger>
      <DrawerVirtualKeyboardProvider>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Delivery details</DrawerTitle>
            <DrawerDescription>
              Tap a field on your phone. It stays above the keyboard.
            </DrawerDescription>
          </DrawerHeader>
          <DrawerBody>
            <FieldGroup>
              <Field>
                <FieldLabel>Name</FieldLabel>
                <Input name="name" autoComplete="name" />
              </Field>
              <Field>
                <FieldLabel>Phone</FieldLabel>
                <Input name="phone" type="tel" autoComplete="tel" />
              </Field>
              <Field>
                <FieldLabel>Street address</FieldLabel>
                <Input name="street" autoComplete="street-address" />
              </Field>
              <Field>
                <FieldLabel>Apartment</FieldLabel>
                <Input name="apartment" />
              </Field>
              <Field>
                <FieldLabel>City</FieldLabel>
                <Input name="city" autoComplete="address-level2" />
              </Field>
              <Field>
                <FieldLabel>Postal code</FieldLabel>
                <Input name="postal" autoComplete="postal-code" />
              </Field>
            </FieldGroup>
          </DrawerBody>
          <DrawerFooter>
            <DrawerClose render={<Button />}>Save address</DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </DrawerVirtualKeyboardProvider>
    </Drawer>
  )
}

Anidado

Un drawer abierto desde un drawer en el mismo borde se apila encima. Los de detrás se encogen, asoman por encima y siguen tu dedo mientras deslizas el de arriba para quitarlo.

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

export function DrawerNested() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>
        Choose a plan
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Choose a plan</DrawerTitle>
          <DrawerDescription>
            Compare plans, then open the details of the one you like.
          </DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <Drawer>
            <DrawerTrigger render={<Button />}>Pro plan details</DrawerTrigger>
            <DrawerContent>
              <DrawerHeader>
                <DrawerTitle>Pro plan</DrawerTitle>
                <DrawerDescription>
                  The first drawer steps back behind this one.
                </DrawerDescription>
              </DrawerHeader>
              <DrawerFooter>
                <Drawer>
                  <DrawerTrigger render={<Button />}>Checkout</DrawerTrigger>
                  <DrawerContent>
                    <DrawerHeader>
                      <DrawerTitle>Checkout</DrawerTitle>
                      <DrawerDescription>
                        Swipe down to go back one step.
                      </DrawerDescription>
                    </DrawerHeader>
                    <DrawerFooter>
                      <DrawerClose render={<Button variant="outline" />}>
                        Back
                      </DrawerClose>
                    </DrawerFooter>
                  </DrawerContent>
                </Drawer>
                <DrawerClose render={<Button variant="outline" />}>
                  Back
                </DrawerClose>
              </DrawerFooter>
            </DrawerContent>
          </Drawer>
          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Confirmar desde un drawer

Los dialogs, alert dialogs, sheets y drawers de otro borde se superponen en lugar de apilarse. El drawer retrocede y un fondo más claro lo cubre.

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

export function DrawerConfirm() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>
        Photo options
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>IMG_2048.heic</DrawerTitle>
          <DrawerDescription>Taken on October 3, 2026.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <DrawerClose render={<Button variant="outline" />}>Share</DrawerClose>
          <AlertDialog>
            <AlertDialogTrigger render={<Button variant="destructive" />}>
              Delete photo
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Delete “IMG_2048.heic”?</AlertDialogTitle>
                <AlertDialogDescription>
                  It will be removed from all your devices.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction variant="destructive">
                  Delete
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Responsive

Cambia swipeDirection con una media query para mostrar un panel lateral en escritorio y una hoja inferior en teléfonos.

"use client"

import * as React from "react"

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

const query = "(min-width: 768px)"

function subscribe(onChange: () => void) {
  const media = window.matchMedia(query)
  media.addEventListener("change", onChange)
  return () => media.removeEventListener("change", onChange)
}

function useIsDesktop() {
  return React.useSyncExternalStore(
    subscribe,
    () => window.matchMedia(query).matches,
    () => false
  )
}

export function DrawerResponsive() {
  const isDesktop = useIsDesktop()

  return (
    <Drawer swipeDirection={isDesktop ? "right" : "down"}>
      <DrawerTrigger render={<Button variant="outline" />}>
        Notifications
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Notifications</DrawerTitle>
          <DrawerDescription>
            A side panel on desktop and a bottom sheet on phones.
          </DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Con modal={false} no hay fondo, la página sigue desplazándose y el foco puede salir del drawer.

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

export function DrawerNonModal() {
  return (
    <Drawer modal={false} swipeDirection="right">
      <DrawerTrigger render={<Button variant="outline" />}>
        Open inspector
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Inspector</DrawerTitle>
          <DrawerDescription>
            The page stays scrollable and clickable while this is open.
          </DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Controlado

Pasa open y onOpenChange para abrirlo desde cualquier lugar, sin un trigger.

"use client"

import * as React from "react"

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

export function DrawerControlled() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open from anywhere
      </Button>
      <Drawer open={open} onOpenChange={setOpen}>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Controlled drawer</DrawerTitle>
            <DrawerDescription>
              Opened from a plain button, without a trigger.
            </DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>
              Close
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  )
}

Triggers desacoplados

Comparte un drawer entre varios triggers con createDrawerHandle. Cada trigger pasa un payload que el drawer renderiza mediante un hijo de tipo función.

"use client"

import { Button } from "@/components/ui/button"
import {
  createDrawerHandle,
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

const contacts = createDrawerHandle<{ name: string; email: string }>()

export function DrawerDetached() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <DrawerTrigger
        handle={contacts}
        payload={{ name: "Olivia Martin", email: "[email protected]" }}
        render={<Button variant="outline" size="sm" />}
      >
        Olivia
      </DrawerTrigger>
      <DrawerTrigger
        handle={contacts}
        payload={{ name: "Jackson Lee", email: "[email protected]" }}
        render={<Button variant="outline" size="sm" />}
      >
        Jackson
      </DrawerTrigger>
      <Drawer handle={contacts}>
        {({ payload }) => (
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>{payload?.name}</DrawerTitle>
              <DrawerDescription>{payload?.email}</DrawerDescription>
            </DrawerHeader>
            <DrawerBody>
              <p className="text-sm text-muted-foreground">
                One drawer, opened by either trigger.
              </p>
            </DrawerBody>
          </DrawerContent>
        )}
      </Drawer>
    </div>
  )
}

De derecha a izquierda

Pasa dir="rtl" a <DrawerContent /> para reflejar su contenido. swipeDirection nombra un borde físico, así que "left" sigue a la izquierda y el tirador permanece en el borde interior.

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

export function DrawerRtl() {
  return (
    <div dir="rtl" className="flex flex-wrap justify-center gap-2">
      <Drawer>
        <DrawerTrigger render={<Button variant="outline" />}>
          من الأسفل
        </DrawerTrigger>
        <DrawerContent dir="rtl">
          <DrawerHeader>
            <DrawerTitle>تعديل الملف الشخصي</DrawerTitle>
            <DrawerDescription>
              يتم حفظ التغييرات عند النقر على حفظ.
            </DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <DrawerClose render={<Button />}>حفظ</DrawerClose>
            <DrawerClose render={<Button variant="outline" />}>
              إلغاء
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
      <Drawer swipeDirection="left" showSwipeHandle>
        <DrawerTrigger render={<Button variant="outline" />}>
          من اليسار
        </DrawerTrigger>
        <DrawerContent dir="rtl">
          <DrawerHeader>
            <DrawerTitle>القائمة</DrawerTitle>
            <DrawerDescription>اسحب إلى اليسار للإغلاق.</DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <DrawerClose render={<Button variant="outline" />}>
              إغلاق
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </div>
  )
}

Teclado

Key	Acción
`EnterSpace`	En el trigger, abre el drawer y mueve el foco dentro de él.
`TabShift + Tab`	Se mueve entre elementos enfocables. El foco permanece dentro de un drawer modal.
`Esc`	Cierra el drawer superior y devuelve el foco a su trigger.

Accesibilidad

El drawer es un diálogo. <DrawerTitle /> lo etiqueta y <DrawerDescription /> lo describe, así que incluye siempre un título.
Deslizar nunca es la única salida: Escape, el fondo y un botón <DrawerClose /> también lo cierran.
El tirador es decorativo y está oculto para las tecnologías de asistencia. Con un ratón, el texto dentro del drawer se puede seleccionar sin arrastrarlo.
Con movimiento reducido activado, el drawer aparece y desaparece con un fundido en lugar de deslizarse. El arrastre sigue al puntero.

Referencia de la API

Construido sobre el drawer de Base UI. Cada parte acepta las props de la primitiva que envuelve.

Drawer

Prop	Tipo	Predeterminado
`swipeDirection`El borde desde el que se abre y la dirección que lo descarta.	`"up" \| "down" \| "left" \| "right"`	`"down"`
`showSwipeHandle`Muestra el tirador. Por defecto es true para up y down, y false para left y right.	`boolean`	`–`
`snapPoints`Alturas en las que puede reposar un drawer vertical. 0–1 es una fracción del viewport, >1 son píxeles, las cadenas aceptan px o rem.	`(number \| string)[]`	`–`
`snapPoint`	`number \| string \| null`	`–`
`defaultSnapPoint`	`number \| string \| null`	`–`
`onSnapPointChange`	`(snapPoint, details) => void`	`–`
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	`–`
`onOpenChange`	`(open: boolean, details) => void`	`–`
`onOpenChangeComplete`Se llama cuando termina la animación de apertura o cierre.	`(open: boolean) => void`	`–`
`modal`El fondo solo se renderiza cuando es true.	`boolean \| "trap-focus"`	`true`
`disablePointerDismissal`Lo mantiene abierto al hacer clic en el fondo.	`boolean`	`false`
`handle`	`DrawerHandle<Payload>`	`–`
`children`	`ReactNode \| ({ payload }) => ReactNode`	`–`

DrawerTrigger

Prop	Tipo	Predeterminado
`handle`	`DrawerHandle<Payload>`	`–`
`payload`	`Payload`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

Atributo	Descripción
`data-slot="drawer-trigger"`	Apunta al trigger en CSS.
`data-popup-open`	Presente mientras su drawer está abierto.

DrawerContent

Renderiza el portal, el fondo, el viewport y el popup, además del tirador. Los drawers verticales se ajustan a su contenido hasta la altura del viewport menos 4rem. Los drawers laterales ocupan el 75% del ancho, hasta 24rem desde el breakpoint sm. Reemplázalo con h-* o w-*, o limítalo a un eje con data-[swipe-axis=y]:.

Prop	Tipo	Predeterminado
`initialFocus`	`boolean \| RefObject \| (type) => HTMLElement \| boolean`	`–`
`finalFocus`	`boolean \| RefObject \| (type) => HTMLElement \| boolean`	`–`
`className`	`string \| (state) => string`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Atributo	Descripción
`data-slot="drawer-popup"`	El panel del drawer.
`data-slot="drawer-content"`	El contenedor interior alrededor de tus hijos. Se desplaza cuando nada más lo hace.
`data-swipe-direction`	up, right, down o left.
`data-swipe-axis`	x o y.
`data-open`	Presente mientras el drawer está abierto.
`data-starting-style`	Presente mientras se anima la entrada.
`data-ending-style`	Presente mientras se anima la salida.
`data-swiping`	Presente mientras se arrastra.
`data-snap-points`	Presente cuando el drawer tiene puntos de ajuste.
`data-expanded`	Presente en el punto de ajuste de altura completa.
`data-nested-drawer-open`	Presente mientras otro drawer está abierto encima.
`data-stack`	Presente mientras un drawer del mismo borde está apilado encima.
`--drawer-inset`	Separa el drawer flotante de los bordes del viewport. Por defecto 0px.
`--drawer-bleed-background`	Rellena el área que se revela al arrastrar más allá de su borde. Por defecto es el color del popover.
`--drawer-swipe-movement-x`	Distancia de arrastre horizontal. También existe una variable -y.
`--drawer-snap-point-offset`	A qué distancia bajo la parte superior está el punto de ajuste actual.
`--nested-drawers`	Cuántos drawers están abiertos encima.

DrawerOverlay

Lo renderiza <DrawerContent /> cuando modal es true. Se desvanece al deslizar y permanece al menos medio visible cuando hay puntos de ajuste. Un drawer superpuesto a un sheet o a un drawer de otro borde recibe un fondo más claro.

Atributo	Descripción
`data-slot="drawer-overlay"`	El fondo.
`data-nested`	Presente en los fondos más claros de drawers superpuestos.
`--drawer-overlay-min-opacity`	La opacidad mínima a la que se desvanece al deslizar. 0, o 0.5 con puntos de ajuste.

DrawerSwipeHandle

Lo renderiza <DrawerContent /> en el borde interior cuando showSwipeHandle está activado. Se puede arrastrar todo el drawer, así que el tirador es una pista visual.

Atributo	Descripción
`data-slot="drawer-swipe-handle"`	El tirador.

DrawerHeader, DrawerBody, DrawerFooter

Elementos <div> simples que organizan el drawer. El encabezado centra su texto en drawers verticales en pantallas pequeñas, el cuerpo se desplaza y ocupa el espacio restante, y el pie apila sus acciones.

Atributo	Descripción
`data-slot="drawer-header"`	Título y descripción.
`data-slot="drawer-body"`	Contenido desplazable.
`data-slot="drawer-footer"`	Acciones.

DrawerTitle

Prop	Tipo	Predeterminado
`render`	`ReactElement \| (props, state) => ReactElement`	`<h2>`

Atributo	Descripción
`data-slot="drawer-title"`	Etiqueta el drawer.

DrawerDescription

Prop	Tipo	Predeterminado
`render`	`ReactElement \| (props, state) => ReactElement`	`<p>`

Atributo	Descripción
`data-slot="drawer-description"`	Describe el drawer.

DrawerVirtualKeyboardProvider

No renderiza ningún elemento. Colócalo dentro de <Drawer />, alrededor de <DrawerContent />. Mientras el teclado de software está abierto, añade espacio bajo el contenedor de desplazamiento del drawer, desplaza el campo con foco hasta hacerlo visible y hace que tocar los campos abra el teclado en iOS. Los drawers sin él no se ven afectados.

Prop	Tipo	Predeterminado
`children`	`ReactNode`	`–`

Atributo	Descripción
`--drawer-keyboard-inset`	Se define en el viewport mientras el teclado está abierto: cuánto de él se superpone a la página. Úsalo con un valor de respaldo de 0px.

DrawerClose

Prop	Tipo	Predeterminado
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

Atributo	Descripción
`data-slot="drawer-close"`	Cierra el drawer al pulsarlo.

createDrawerHandle

createDrawerHandle<Payload>() devuelve un handle que conecta un <Drawer /> con triggers renderizados en otro lugar. Créalo una sola vez, fuera de tu componente.

Usado en bloques

Bloques que se construyen sobre Drawer.

ArtifactEl panel junto a un chat de IA que muestra lo que creó el modelo. Páginas web, SVG, documentos y código llegan en streaming y luego pasan a una vista previa en sandbox, con versiones que puedes comparar y restaurar, una división redimensionable y una hoja inferior en móviles.