Skip to content
Appearance
Accent and overlay
Color mode

Drawer

A panel that slides from an edge.

Upstream documentation

Examples

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Drawer
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/drawer.json'

Usage

A complete example using the installed component and hook paths.

Drawer usage
"use client";import { Button } from "@/components/ui/button";import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";function DrawerPreview() {  return (    <Drawer>      <DrawerTrigger render={<Button variant="outline" />}>Open drawer</DrawerTrigger>      <DrawerContent>        <DrawerHeader>          <DrawerTitle>Example drawer</DrawerTitle>          <DrawerDescription>A panel with some sample details.</DrawerDescription>        </DrawerHeader>        <DrawerFooter>          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>        </DrawerFooter>      </DrawerContent>    </Drawer>  );}export default function Demo() {  return <DrawerPreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

Drawer

Drawer props
DrawerPrimitive.Root.Props & {  showSwipeHandle?: boolean;}
modal
true
showSwipeHandle
false
swipeDirection
"down"

DrawerPortal

DrawerPortal props
DrawerPrimitive.Portal.Props

DrawerOverlay

DrawerOverlay props
DrawerPrimitive.Backdrop.Props

DrawerSwipeHandle

DrawerSwipeHandle props
React.ComponentProps<"div">

DrawerTrigger

DrawerTrigger props
DrawerPrimitive.Trigger.Props

DrawerClose

DrawerClose props
DrawerPrimitive.Close.Props

DrawerContent

DrawerContent props
DrawerPrimitive.Popup.Props

DrawerHeader

DrawerHeader props
React.ComponentProps<"div">

DrawerFooter

DrawerFooter props
React.ComponentProps<"div">

DrawerTitle

DrawerTitle props
DrawerPrimitive.Title.Props

DrawerDescription

DrawerDescription props
DrawerPrimitive.Description.Props

Source

Registry JSON