## Installation [#installation]
Before adding components, init your project with your design system from the [Studio](/studio).
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add @dotui/sheet
```
```bash
pnpm dlx shadcn@latest add @dotui/sheet
```
```bash
yarn dlx shadcn@latest add @dotui/sheet
```
```bash
bunx shadcn@latest add @dotui/sheet
```
## Usage [#usage]
```tsx
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { Sheet } from "@/components/ui/sheet"
```
```tsx
```
## Anatomy [#anatomy]
A `Sheet` has no built-in trigger. Wrap it in a `Dialog` with a `Button` child as the trigger, and put your content inside `DialogContent`. A sheet can also hold a menu or a listbox directly — that's how pickers render on mobile.
```tsx
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { Sheet, SheetHandle } from "@/components/ui/sheet"
```
```tsx
```
`SheetHandle` is a visible swipe affordance. The whole sheet swipes: it rides the browser's native scrolling, so it follows the finger with momentum and rubber-banding for free.
## Position [#position]
`position` anchors the sheet to an edge: `bottom` (the default), `top`, `start`, `end`, or physical `left` and `right`. `start` and `end` mirror in right-to-left locales. `swipeDirection` defaults to the same edge.
```tsx
...
```
## Snap points [#snap-points]
`snapPoints` stops the sheet partway open. Each value is how much of the sheet shows, in pixels or as a CSS length — percentages are of the sheet's size. It opens at the first one and drags up to its full height.
```tsx
...
```
## Open state [#open-state]
Rendered under a `Dialog`, the sheet shares the dialog's open state, so the trigger `Button` opens it with no wiring. To drive it yourself, pass `isOpen` with `onOpenChange` (or `defaultOpen` for uncontrolled).
```tsx
const [isOpen, setIsOpen] = React.useState(false)
...
```
## Dismissal [#dismissal]
The sheet dismisses on swipe, outside interaction, and Escape. `preventDismissal` blocks all three; with snap points, the sheet still swipes between them.
```tsx
...
```
## Examples [#examples]
## API Reference [#api-reference]
### Sheet [#sheet]
### SheetHandle [#sheethandle]