---
title: Bottom Sheet
description: A bottom sheet overlay with a drag handle.
---
import Source from './_generated/bottom-sheet.mdx';

A bottom sheet overlay with a drag handle — for secondary content and quick actions.

<DemoFrame component="bottom-sheet" height={560} />

## Installation

```bash
npx touchcn add bottom-sheet
```

## Usage

<CodeGroup>

```html Angular
<button tcnButton (click)="open.set(true)">Open</button>

<tcn-bottom-sheet [(open)]="open">
  <p>Sheet content</p>
</tcn-bottom-sheet>
```

```tsx React
import { TcnBottomSheet } from '@/components/ui/bottom-sheet';

<TcnBottomSheet open={open} onOpenChange={setOpen} title="Options">
  <p>Sheet content</p>
</TcnBottomSheet>
```

```vue Vue
<script setup lang="ts">
import { TcnBottomSheet } from '@/components/ui/bottom-sheet';
</script>

<template>
  <TcnBottomSheet v-model:open="open" title="Options">
    <p>Sheet content</p>
  </TcnBottomSheet>
</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).                 |
| `title`        | `string`                   | `'Bottom Sheet'` | Accessible label announced on open (React).  |

<Source />