# @fluentui/react-drawer

> Drawer components for Fluent UI React

Latest version **9.13.4** (published 2026-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-drawer
pnpm add @fluentui/react-drawer
yarn add @fluentui/react-drawer
bun add @fluentui/react-drawer
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.13.4 |
| Published | 2026-09-21 |
| First published | 2023-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 656.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20293 |
| Maintainers | uifabricteam, uifrnbot, microsoft1es, microsoft-oss-releases |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-drawer
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-drawer

## Dependencies (11)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.1
- [@griffel/react](https://npm.io/package/@griffel/react.md) ^1.5.32
- [@fluentui/react-theme](https://npm.io/package/@fluentui/react-theme.md) ^9.2.2
- [@fluentui/react-dialog](https://npm.io/package/@fluentui/react-dialog.md) ^9.18.5
- [@fluentui/react-motion](https://npm.io/package/@fluentui/react-motion.md) ^9.16.4
- [@fluentui/react-portal](https://npm.io/package/@fluentui/react-portal.md) ^9.8.16
- [@fluentui/react-tabster](https://npm.io/package/@fluentui/react-tabster.md) ^9.26.18
- [@fluentui/react-utilities](https://npm.io/package/@fluentui/react-utilities.md) ^9.26.7
- [@fluentui/react-jsx-runtime](https://npm.io/package/@fluentui/react-jsx-runtime.md) ^9.4.6
- [@fluentui/react-shared-contexts](https://npm.io/package/@fluentui/react-shared-contexts.md) ^9.26.4
- [@fluentui/react-motion-components-preview](https://npm.io/package/@fluentui/react-motion-components-preview.md) ^0.15.9

## Recent versions

- 9.13.4 (latest) — 2026-09-21
- 0.0.0-nightly-20261002-0407.1 (nightly) — 2026-10-02
- 9.74.5-experimental.tabster-v9.20260804-bb909442fe.0 (experimental) — 2026-08-04
- 9.0.0-beta.41 (beta) — 2023-11-06
- 0.0.0-nightly-20260929-0404.1 — 2026-09-29
- 0.0.0-nightly-20260928-0404.1 — 2026-09-28
- 0.0.0-nightly-20260925-0403.1 — 2026-09-25
- 0.0.0-nightly-20260924-0403.1 — 2026-09-24
- 0.0.0-nightly-20260923-0404.1 — 2026-09-23
- 0.0.0-nightly-20260922-0403.1 — 2026-09-22
- 0.0.0-nightly-20260917-0408.1 — 2026-09-17
- 0.0.0-nightly-20260916-0409.1 — 2026-09-16
- 0.0.0-nightly-20260915-0407.1 — 2026-09-15
- 0.0.0-nightly-20260914-0407.1 — 2026-09-14
- 0.0.0-nightly-20260910-0408.1 — 2026-09-10
- … 969 more at https://npm.io/package/@fluentui/react-drawer/versions

## README

# @fluentui/react-drawer

**React Drawer components for [Fluent UI React](https://react.fluentui.dev/)**

These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.

The Drawer gives users a quick entry point to configuration and information. It should be used when retaining context is beneficial to users. An overlay is optional depending on whether or not interacting with the background content is beneficial to the user’s context/scenario. An overlay makes the Drawer blocking and signifies that the users full attention is required when making configurations.

## Usage

To import React Drawer components:

```tsx
import {
  Drawer,
  OverlayDrawer,
  InlineDrawer,
  DrawerHeader,
  DrawerHeaderTitle,
  DrawerHeaderNavigation,
  DrawerBody
} from "@fluentui/react-components';
```

Simple example of Drawer Usage:

```tsx
import { DrawerBody, DrawerHeader, DrawerHeaderTitle, Drawer } from '@fluentui/react-components';
import { Button } from '@fluentui/react-components';
import { Dismiss24Regular } from '@fluentui/react-icons';

export const App = () => (
  <Drawer type="inline" open>
    <DrawerHeader>
      <DrawerHeaderTitle
        action={
          <Button
            appearance="subtle"
            aria-label="Close drawer"
            icon={<Dismiss24Regular />}
            onClick={() => setIsOpen(false)}
          />
        }
      >
        Title goes here
      </DrawerHeaderTitle>
    </DrawerHeader>

    <DrawerBody>
      <p>Content goes here</p>
    </DrawerBody>
  </Drawer>
);
```

## Specification

See the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.

## API

For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/components-drawer--default).

---
_Source: https://npm.io/package/@fluentui/react-drawer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._