mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-08 22:45:47 +00:00
e224dc30d8
Update in-repo base drawer consumers to the new wrapper API. Replace asChild usage with render, switch direction to swipeDirection, and align examples, blocks, app consumers, and docs with the new base drawer usage pattern.
131 lines
2.7 KiB
Plaintext
131 lines
2.7 KiB
Plaintext
---
|
|
title: Drawer
|
|
description: A drawer component for React.
|
|
base: base
|
|
component: true
|
|
links:
|
|
doc: https://base-ui.com/react/components/drawer
|
|
api: https://base-ui.com/react/components/drawer#api-reference
|
|
---
|
|
|
|
<ComponentPreview styleName="base-nova" name="drawer-demo" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTrigger value="cli">Command</TabsTrigger>
|
|
<TabsTrigger value="manual">Manual</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add drawer
|
|
```
|
|
|
|
</TabsContent>
|
|
|
|
<TabsContent value="manual">
|
|
|
|
<Steps className="mb-0 pt-2">
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install @base-ui/react
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource
|
|
name="drawer"
|
|
title="components/ui/drawer.tsx"
|
|
styleName="base-nova"
|
|
/>
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsContent>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx showLineNumbers
|
|
import {
|
|
Drawer,
|
|
DrawerClose,
|
|
DrawerContent,
|
|
DrawerDescription,
|
|
DrawerFooter,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "@/components/ui/drawer"
|
|
```
|
|
|
|
```tsx showLineNumbers
|
|
<Drawer>
|
|
<DrawerTrigger>Open</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>Are you absolutely sure?</DrawerTitle>
|
|
<DrawerDescription>This action cannot be undone.</DrawerDescription>
|
|
</DrawerHeader>
|
|
<DrawerFooter>
|
|
<Button>Submit</Button>
|
|
<DrawerClose>
|
|
<Button variant="outline">Cancel</Button>
|
|
</DrawerClose>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
```
|
|
|
|
## Composition
|
|
|
|
Use the following composition to build a `Drawer`:
|
|
|
|
```text
|
|
Drawer
|
|
├── DrawerTrigger
|
|
└── DrawerContent
|
|
├── DrawerHeader
|
|
│ ├── DrawerTitle
|
|
│ └── DrawerDescription
|
|
└── DrawerFooter
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Scrollable Content
|
|
|
|
Keep actions visible while the content scrolls.
|
|
|
|
<ComponentPreview styleName="base-nova" name="drawer-scrollable-content" />
|
|
|
|
### Sides
|
|
|
|
Use the `swipeDirection` prop to set the side of the drawer. Available options are `up`, `right`, `down`, and `left`.
|
|
|
|
<ComponentPreview styleName="base-nova" name="drawer-sides" />
|
|
|
|
### Responsive Dialog
|
|
|
|
You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile.
|
|
|
|
<ComponentPreview styleName="base-nova" name="drawer-dialog" />
|
|
|
|
## RTL
|
|
|
|
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
|
|
|
|
<ComponentPreview styleName="base-nova" name="drawer-rtl" direction="rtl" />
|
|
|
|
## API Reference
|
|
|
|
See the [Base UI documentation](https://base-ui.com/react/components/drawer) for the full API reference.
|