Browse components

Drawer

Bottom sheet / drawer for mobile-friendly panels.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/drawer.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/drawer.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/drawer.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/drawer.

Import

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

example.tsx

import { Button } from "@/components/ui/button"import {  Drawer,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "@/components/ui/drawer"export function Example() {  return (    <Drawer>      <DrawerTrigger render={<Button />}>Open drawer</DrawerTrigger>      <DrawerContent>        <DrawerHeader>          <DrawerTitle>Drawer</DrawerTitle>          <DrawerDescription>A bottom sheet panel.</DrawerDescription>        </DrawerHeader>        <DrawerFooter>          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>        </DrawerFooter>      </DrawerContent>    </Drawer>  )}

API Reference

Drawer

Base UI Dialog configured as a bottom sheet.

Prop	Type	Default
open	boolean	—
onOpenChange	(open: boolean) => void	—

DrawerContent

Prop	Type	Default
showHandle	boolean	true

showHandle — Drag handle at the top of the sheet.