---
title: Drawer
description: A side navigation drawer that slides in from an edge.
---
import Source from './_generated/drawer.mdx';

A side navigation drawer that slides in from the start or end edge over a scrim. It uses an opaque surface (glass is not idiomatic for a nav drawer); MD3 rounds the trailing corners. Content is free-form — typically a list.

<DemoFrame component="drawer" height={560} />

## Installation

```bash
npx touchcn add drawer
```

## Usage

<CodeGroup>

```html Angular
<tcn-drawer [(open)]="open" side="start">
  <tcn-list>…</tcn-list>
</tcn-drawer>
```

```tsx React
import { TcnDrawer } from '@/components/ui/drawer';

<TcnDrawer open={open} onOpenChange={setOpen} side="start">
  <TcnList>…</TcnList>
</TcnDrawer>
```

```vue Vue
<script setup lang="ts">
import { TcnDrawer } from '@/components/ui/drawer';
import { TcnList } from '@/components/ui/list';
</script>

<template>
  <TcnDrawer v-model:open="open" side="start">
    <TcnList>…</TcnList>
  </TcnDrawer>
</template>
```

</CodeGroup>

## Props

| Prop           | Type                      | Default    | Description                                |
| -------------- | ------------------------- | ---------- | ------------------------------------------ |
| `open`         | `boolean`                 | `false`    | Open state (two-way bound on Angular).     |
| `onOpenChange` | `(open: boolean) => void` | —          | Open-state callback (React).               |
| `side`         | `'start' \| 'end'`        | `'start'`  | Edge the drawer slides in from.            |
| `title`        | `string`                  | `'Drawer'` | Accessible label announced on open (React). |

<Source />