# antuikit / Drawer

> Drawer with a `floating` panel that sits off the screen edges, a `divided` switch for the header and footer lines, a `flush` body and `small` padding.

Docs: https://antuikit.com/docs/components/drawer

## Install

npx antuikit@latest init
npx antuikit@latest add drawer

## Import

import { Drawer } from "@/components/ui/drawer";

## Demos

- [Basic](https://ui.antuikit.com/embed/drawer/basic.md): Open the drawer with `open` and close it in `onClose`, which fires for the close button, the mask and Esc.
- [Floating](https://ui.antuikit.com/embed/drawer/floating.md): Set `floating` to hold the panel off the screen edges with rounded corners, from any `placement`.
- [Without dividers](https://ui.antuikit.com/embed/drawer/divided.md): Set `divided={false}` to remove the lines under the header and above the footer, and the body's top and bottom padding with them.
- [Flush body](https://ui.antuikit.com/embed/drawer/flush.md): Set `flush` to remove the body's padding, so an image or a list reaches the panel's edges.
- [Small](https://ui.antuikit.com/embed/drawer/small.md): Set `small` to tighten the header, body and footer padding and step the title and close glyph down, for a narrow panel next to dense content.
- [Closable placement](https://ui.antuikit.com/embed/drawer/closable-placement.md): Set `closable={{ placement: "start" }}` to move the close button from the end of the header to before the title.
- [Resizable](https://ui.antuikit.com/embed/drawer/resizable.md): Set `resizable` to let the reader drag the drawer's inner edge, cap the width with `maxSize`, and set a minimum inside `onResize`.
- [Blurred mask](https://ui.antuikit.com/embed/drawer/mask.md): Set `mask={{ blur: true }}` to blur the page behind the drawer as well as dimming it.
- [Button-only close](https://ui.antuikit.com/embed/drawer/locked.md): Set `mask={{ closable: false }}` and `keyboard={false}` so only a button closes the drawer, like one holding unsaved work.
- [Without a mask](https://ui.antuikit.com/embed/drawer/no-mask.md): Set `mask={false}` to leave the page behind the drawer visible and usable while the drawer is open.
- [Extra actions](https://ui.antuikit.com/embed/drawer/extra-actions.md): Put small icon-only text buttons in `extra`, and end them with a vertical Divider to set them apart from the close button.
- [Scrollable content](https://ui.antuikit.com/embed/drawer/scrollable-content.md): Long content scrolls inside the drawer body while the header and the `footer` stay in place.
- [Loading](https://ui.antuikit.com/embed/drawer/loading.md): Set `loading` to show a skeleton in the body while its data arrives, with the title already in place.
- [Multi-level](https://ui.antuikit.com/embed/drawer/multi-level.md): Nest a `Drawer` inside another to open the next level, which pushes its parent aside, here also as a floating stack with a shorter `push` distance.
- [Rendered in place](https://ui.antuikit.com/embed/drawer/render-in-current.md): Set `getContainer={false}` to render the drawer inside its parent element instead of over the whole page.
- [Form in a drawer](https://ui.antuikit.com/embed/drawer/form-in-drawer.md): A single-column `Form` in a drawer that focuses its first field on open, moves to the first invalid field on a failed submit, and clears its fields when the drawer closes.
- [CRM record](https://ui.antuikit.com/embed/drawer/crm-record.md): A floating, resizable contact panel with a full screen toggle, previous and next buttons, and tabs for activity, deals, tasks and notes.
- [Stepped form](https://ui.antuikit.com/embed/drawer/stepped-form.md): A three-step property listing form with Steps at the top, Back on the left of the footer and Cancel and Continue on the right, ending in a preview of the listing.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/drawer`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Drawer` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.