Drawer
Bottom sheet built on Radix Dialog that springs up from the edge and can be flicked down by its grab handle to dismiss.
About Drawer
Bottom sheet built on Radix Dialog that springs up from the edge and can be flicked down by its grab handle to dismiss.
Drawer is a free primitive component for React, built on shadcn/ui and Tailwind CSS with motion animations that respect reduced-motion settings. It ships as 123 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- drawer
- bottom sheet
- mobile
- overlay
- drag
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/drawerDependencies installed automatically: motion, radix-ui.
Uses: use-reduced-motion, utils.
Usage
import Drawer from "@/components/ui/drawer"
export default function Page() {
return <Drawer />
}