---
title: Drawer
description: A panel that slides in from the edge of the screen with swipe-to-dismiss gestures.
links:
doc: https://base-ui.com/react/components/drawer
api: https://base-ui.com/react/components/drawer#api-reference
---
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer';
export function DrawerDefault() {
return (
}>
Open Drawer
Notifications
You are all caught up. Good job!
}>
Close
);
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/drawer
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import * as React from 'react';
import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
import { cn } from '@/lib/utils';
function Drawer({
swipeDirection = 'down',
...props
}: DrawerPrimitive.Root.Props) {
return (
);
}
function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
return ;
}
function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
return ;
}
function DrawerProvider({ ...props }: DrawerPrimitive.Provider.Props) {
return ;
}
function DrawerPortal({
className,
...props
}: Omit & {
className?: string;
}) {
return (
);
}
function DrawerOverlay({
className,
...props
}: Omit & {
className?: string;
}) {
return (
);
}
function DrawerViewport({
className,
...props
}: Omit & {
className?: string;
}) {
return (
);
}
function DrawerHandle({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
function DrawerContent({
className,
...props
}: Omit & {
className?: string;
}) {
return (
);
}
function DrawerPopup({
className,
children,
container,
showHandle,
unstyled,
overlayClassName,
...props
}: Omit & {
className?: string;
container?: DrawerPrimitive.Portal.Props['container'];
showHandle?: boolean;
unstyled?: boolean;
overlayClassName?: string;
}) {
return (
{!unstyled && showHandle !== false && (
)}
{children}
);
}
function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
return (
);
}
function DrawerTitle({
className,
...props
}: Omit & {
className?: string;
}) {
return (
);
}
function DrawerDescription({
className,
...props
}: Omit & {
className?: string;
}) {
return (
);
}
function DrawerIndentBackground({
className,
...props
}: DrawerPrimitive.IndentBackground.Props) {
return (
);
}
function DrawerIndent({
className,
...props
}: Omit & {
className?: string;
}) {
return (
);
}
const createDrawerHandle = DrawerPrimitive.createHandle;
export {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHandle,
DrawerHeader,
DrawerIndent,
DrawerIndentBackground,
DrawerOverlay,
DrawerPopup,
DrawerPortal,
DrawerProvider,
DrawerTitle,
DrawerTrigger,
DrawerViewport,
createDrawerHandle,
};
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
```
```tsx
OpenDrawer TitleDrawer description goes here.Close
```
## Examples
### Right Side
Use `swipeDirection="right"` on the `Drawer` component to slide the panel in from the right.
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer';
export function DrawerRight() {
return (
}>
Open Drawer
Drawer
This is a drawer that slides in from the side. You can swipe to
dismiss it.
}>
Close
);
}
```
### Non-Modal
Set `modal={false}` and `disablePointerDismissal` on the `Drawer` to keep the page interactive while the drawer is open.
```tsx
'use client';
import { Button } from '@/components/ui/button';
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer';
export function DrawerNonModal() {
return (
}>
Open Non-Modal Drawer
Non-modal Drawer
This drawer does not trap focus and ignores outside clicks. Use
the close button or swipe to dismiss it.
}>
Close
);
}
```
### Nested Drawers
Nest multiple `Drawer` components and manage each with controlled `open` / `onOpenChange` state to create a stacking effect.
```tsx
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer';
export function DrawerNested() {
const [firstOpen, setFirstOpen] = React.useState(false);
const [secondOpen, setSecondOpen] = React.useState(false);
const [thirdOpen, setThirdOpen] = React.useState(false);
return (
{
setFirstOpen(nextOpen);
if (!nextOpen) {
setSecondOpen(false);
setThirdOpen(false);
}
}}
>
}>
Open Drawer Stack
Account
Nested drawers can be styled to stack, while each drawer remains
independently focus managed.
{
setSecondOpen(nextOpen);
if (!nextOpen) {
setThirdOpen(false);
}
}}
>
}
>
Security settings
Security
Review sign-in activity and update your security
preferences.
Passkeys enabled
2FA via authenticator app
3 signed-in devices
}
>
Advanced options
Advanced
This drawer is taller to demonstrate
variable-height stacking.
}
>
Done
}>
Close
}>
Close
);
}
```
### Snap Points
Pass a `snapPoints` array to `Drawer` and use `unstyled` on `DrawerPopup` to apply custom popup styling for snap behavior.
```tsx
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer';
const TOP_MARGIN_REM = 1;
const VISIBLE_SNAP_POINTS_REM = [30];
function toViewportSnapPoint(heightRem: number) {
return `${heightRem + TOP_MARGIN_REM}rem`;
}
const snapPoints = [...VISIBLE_SNAP_POINTS_REM.map(toViewportSnapPoint), 1];
export function DrawerSnapPoints() {
return (
}>
Open Snap Drawer
Snap points
Drag the sheet to snap between a compact peek and a near
full-height view.
{Array.from({ length: 20 }, (_, index) => (
))}
}>
Close
);
}
```
### Action Sheet
Use `DrawerPopup` with `unstyled` and `overlayClassName` to customize the popup and overlay styling for an action sheet layout.
```tsx
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer';
const ACTIONS = [
'Unfollow',
'Mute',
'Add to Favourites',
'Add to Close Friends',
'Restrict',
];
export function DrawerActionSheet() {
const [open, setOpen] = React.useState(false);
return (
}>
Open Action Sheet
Profile actions
Choose an action for this user.