Drawer

free

Drawer brings supporting panels into the current page without a route change.

import { useState } from 'react';
import Button from '@/components/ui/button';
import Drawer from '@/components/ui/drawer';

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Drawer

pnpm dlx nateui@latest add Drawer

yarn dlx nateui@latest add Drawer

Examples

Basic

import { useState } from 'react';
import Button from '@/components/ui/button';
import Drawer from '@/components/ui/drawer';

Placement

import { useState } from 'react';
import Button from '@/components/ui/button';
import Drawer from '@/components/ui/drawer';
import Radio from '@/components/ui/radio';

Width & Height

import { useState } from 'react';
import Button from '@/components/ui/button';
import Drawer from '@/components/ui/drawer';

Footer

import { useState } from 'react';
import Button from '@/components/ui/button';
import Drawer from '@/components/ui/drawer';

Custom Style

import { useState } from 'react';
import Button from '@/components/ui/button';
import Drawer from '@/components/ui/drawer';

Closable

import { useState } from 'react';
import Button from '@/components/ui/button';
import Drawer from '@/components/ui/drawer';

Custom Backdrop

import { useState } from 'react';
import Button from '@/components/ui/button';
import Drawer from '@/components/ui/drawer';

Form

import { useState } from 'react';
import Button from '@/components/ui/button';
import Drawer from '@/components/ui/drawer';
import Form from '@/components/ui/form';

API

Drawer accepts the props below plus native props for the drawer content div.

Prop	Description	Type	Default
`bodyClass`	Extra class names applied to the scrollable body region.	`string`	-
`children`	Content rendered in the scrollable body of the drawer.	`ReactNode`	-
`closable`	Shows the default close button in the header.	`boolean`	`true`
`contentClassName`	Class names applied to the drawer content surface.	`string`	-
`footer`	Content rendered in a footer region below the body.	`string \| ReactNode`	-
`footerClass`	Extra class names applied to the footer region.	`string`	-
`headerClass`	Extra class names applied to the header region.	`string`	-
`height`	Height of the drawer. Used when `placement` is `'top'` or `'bottom'`.	`string \| number`	`370`
`isOpen`	Controls whether the drawer is visible.	`boolean`	`false`
`lockScroll`	Locks document scrolling through the overlay while the drawer is mounted.	`boolean`	`true`
`onClose`	Called when the drawer asks to close through the close button, overlay, Escape key, or a drag-to-dismiss gesture.	`DrawerOpenChangeHandler`	-
`onOpen`	Called when the floating layer reports that the drawer opened.	`DrawerOpenChangeHandler`	-
`overlayClassName`	Class names applied to the overlay element.	`string`	-
`placement`	Edge the drawer slides out from. `'top'` and `'bottom'` add a drag handle for dismissing the drawer by swipe.	`DrawerPlacement`	`'right'`
`ref`	Ref forwarded to the drawer content element.	`Ref<HTMLDivElement>`	-
`shouldCloseOnEsc`	Allows Escape to request closing the drawer.	`boolean`	`true`
`shouldCloseOnOverlayClick`	Allows an overlay click to request closing the drawer.	`boolean`	`true`
`title`	Title rendered in the header region.	`string \| ReactNode`	-
`width`	Width of the drawer. Used when `placement` is `'left'` or `'right'`.	`number`	`370`
`...nativeDivProps`	Native props applied to the drawer content element.	`NativeDrawerDivProps`	-

Types

type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left';
type DrawerOpenChangeHandler = (open: boolean) => void;
type NativeDrawerDivProps = Omit<ComponentProps<'div'>, 'title'>;