# Drawer Side Panel — React Dialog Component

> A floating settings panel that slides in from the right with staggered rows while the page behind recedes and dims.

- Category: [Dialogs & Drawers](https://pixelpapa.com/components/dialogs.md)
- Tags: drawer, panel, settings, slide, stagger
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/dialogs/drawer-side-panel

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/drawer-side-panel
```

The file is written to `components/pixelpapa/drawer-side-panel.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/dialogs/drawer-side-panel.

## AI prompt

```text
Add the "Drawer Side Panel" component from PixelPapa UI to this project.

What it is: A floating settings panel that slides in from the right with staggered rows while the page behind recedes and dims.
Category: Dialogs & Drawers. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/drawer-side-panel
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/drawer-side-panel.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/drawer-side-panel.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/drawer-side-panel" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More dialogs & drawers

- [Dialog Command Style Search](https://pixelpapa.com/components/dialogs/dialog-command-style-search.md) (Pro): A search dialog in the style of a command palette: scope chips, matches highlighted as you type, and a selection bar that springs between results with the arrow keys.
- [Dialog Confirm Destructive](https://pixelpapa.com/components/dialogs/dialog-confirm-destructive.md) (Pro): A type-to-confirm dialog: the delete button fills up as each character of the resource name matches, unlocks at the last one and shakes on a wrong try.
- [Dialog Morph From Button](https://pixelpapa.com/components/dialogs/dialog-morph-from-button.md): A button that grows into the dialog itself through a shared layout, with its label travelling to become the title, then shrinks back on close.
- [Dialog Multi Step Wizard](https://pixelpapa.com/components/dialogs/dialog-multi-step-wizard.md) (Pro): A wizard dialog whose steps slide in the direction of travel while the card springs to each step's height and a segmented progress bar fills.
- [Dialog Scale Spring](https://pixelpapa.com/components/dialogs/dialog-scale-spring.md): A modal that springs up from 86% scale over a blurred scrim, traps focus, closes on Escape or outside click and hands focus back to its trigger.
- [Drawer Bottom Sheet Drag](https://pixelpapa.com/components/dialogs/drawer-bottom-sheet-drag.md): A bottom sheet you can drag down to dismiss: a slow pull past the threshold or a quick flick closes it, and the scrim fades with the drag distance.