# Drawer
A drawer component for React.
## When to use
* Show a panel that slides in from an edge, often from the bottom on mobile.
* Hold a short task, such as a filter or a form, that the user can swipe away.
## How it works
Parts: `Drawer`, `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerTitle`, `DrawerDescription`, `DrawerFooter`, `DrawerClose`, `DrawerPortal` and `DrawerOverlay`. With Base UI it wraps `@base-ui/react/drawer`, adds `DrawerSwipeHandle` and takes `swipeDirection` (`down` by default). With Radix it wraps `Drawer` from `vaul`.
## Example
### Base UI
```tsx
'use client'
import { Button } from "@/shadcn/base/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/shadcn/base/ui/drawer"
export default function DrawerWithSides() {
return (
Move Goal
Set your daily activity goal.
)
}
```
```tsx [components/ui/drawer.tsx]
"use client"
import * as React from "react"
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
import { cn } from "cn"
type DrawerContextProps = {
hasSnapPoints: boolean
modal: DrawerPrimitive.Root.Props["modal"]
showSwipeHandle: boolean
swipeDirection: NonNullable
}
const DrawerContext = React.createContext(null)
function useDrawer() {
const context = React.useContext(DrawerContext)
if (!context) {
throw new Error("useDrawer must be used within a Drawer.")
}
return context
}
function Drawer({
modal = true,
showSwipeHandle = false,
snapPoints,
swipeDirection = "down",
...props
}: DrawerPrimitive.Root.Props & {
showSwipeHandle?: boolean
}) {
const hasSnapPoints = snapPoints != null && snapPoints.length > 0
const contextValue = React.useMemo(
() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
[hasSnapPoints, modal, showSwipeHandle, swipeDirection]
)
return (
)
}
function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
return
)
}
function DrawerContent({
className,
children,
...props
}: DrawerPrimitive.Popup.Props) {
const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()
const swipeAxis =
swipeDirection === "down" || swipeDirection === "up" ? "y" : "x"
return (
{modal === true && (
{showSwipeHandle &&
{children}
)
}
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
return (
Open Drawer
Move Goal
Set your daily activity goal.
onClick(-10)}
disabled={goal <= 200}
>
Decrease
onClick(10)}
disabled={goal >= 400}
>
Increase
Submit
Cancel
)
}
```
```tsx [components/ui/drawer.tsx]
"use client"
import * as React from "react"
import { cn } from "cn"
import { Drawer as DrawerPrimitive } from "vaul"
function Drawer({
...props
}: React.ComponentProps) {
return ) {
return ) {
return ) {
return ) {
return (
) {
return (
{children}
)
}
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
function DrawerTitle({
className,
...props
}: React.ComponentProps) {
return (
) {
return (