# Sheet

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Button } from "@/components/starwind/button";
import { Input } from "@/components/starwind/input";
import { Label } from "@/components/starwind/label";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/starwind/sheet";
---

<Sheet>
  <SheetTrigger asChild>
    <Button>Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit Profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you're done.
      </SheetDescription>
    </SheetHeader>
    <div class="grid gap-4 px-4">
      <div class="grid gap-2">
        <Label for="name">Name</Label>
        <Input id="name" value="Pedro Duarte" />
      </div>
      <div class="grid gap-2">
        <Label for="username">Username</Label>
        <Input id="username" value="@peduarte" />
      </div>
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button type="submit">Save changes</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>
```
  </div>
  <div slot="react">
```tsx
import { Button } from "@/components/starwind/button";
import { Input } from "@/components/starwind/input";
import { Label } from "@/components/starwind/label";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/starwind/sheet";

export function Example() {
  return (
    <>
      <Sheet>
        <SheetTrigger asChild>
          <Button>Open Sheet</Button>
        </SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Edit Profile</SheetTitle>
            <SheetDescription>
              Make changes to your profile here. Click save when you're done.
            </SheetDescription>
          </SheetHeader>
          <div className="grid gap-4 px-4">
            <div className="grid gap-2">
              <Label htmlFor="name">Name</Label>
              <Input id="name" defaultValue="Pedro Duarte" />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="username">Username</Label>
              <Input id="username" defaultValue="@peduarte" />
            </div>
          </div>
          <SheetFooter>
            <SheetClose asChild>
              <Button type="submit">Save changes</Button>
            </SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Button } from "@/components/starwind/button";
import { Input } from "@/components/starwind/input";
import { Label } from "@/components/starwind/label";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/starwind/sheet";
</script>

<template>
  <Sheet>
    <SheetTrigger asChild>
      <button type="button" :class="ButtonVariants.button({})">Open Sheet</button>
    </SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Edit Profile</SheetTitle>
        <SheetDescription>
          Make changes to your profile here. Click save when you're done.
        </SheetDescription>
      </SheetHeader>
      <div class="grid gap-4 px-4">
        <div class="grid gap-2">
          <Label for="name">Name</Label>
          <Input id="name" default-value="Pedro Duarte" />
        </div>
        <div class="grid gap-2">
          <Label for="username">Username</Label>
          <Input id="username" default-value="@peduarte" />
        </div>
      </div>
      <SheetFooter>
        <SheetClose asChild>
          <button type="submit" :class="ButtonVariants.button({})">Save changes</button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add sheet --framework astro
```
</DocsTabsContent>
```bash
npx starwind@latest add sheet --framework react
```
</DocsTabsContent>
```bash
npx starwind@latest add sheet --framework vue
```
</DocsTabsContent>
</DocsTabs>

## Usage

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Button } from "@/components/starwind/button";
import { Input } from "@/components/starwind/input";
import { Label } from "@/components/starwind/label";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/starwind/sheet";
---

<Sheet>
  <SheetTrigger asChild>
    <Button>Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit Profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you're done.
      </SheetDescription>
    </SheetHeader>
    <div class="grid gap-4 px-4">
      <div class="grid gap-2">
        <Label for="name">Name</Label>
        <Input id="name" value="Pedro Duarte" />
      </div>
      <div class="grid gap-2">
        <Label for="username">Username</Label>
        <Input id="username" value="@peduarte" />
      </div>
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button type="submit">Save changes</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>
```
  </div>
  <div slot="react">
```tsx
import { Button } from "@/components/starwind/button";
import { Input } from "@/components/starwind/input";
import { Label } from "@/components/starwind/label";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/starwind/sheet";

export function Example() {
  return (
    <>
      <Sheet>
        <SheetTrigger asChild>
          <Button>Open Sheet</Button>
        </SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Edit Profile</SheetTitle>
            <SheetDescription>
              Make changes to your profile here. Click save when you're done.
            </SheetDescription>
          </SheetHeader>
          <div className="grid gap-4 px-4">
            <div className="grid gap-2">
              <Label htmlFor="name">Name</Label>
              <Input id="name" defaultValue="Pedro Duarte" />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="username">Username</Label>
              <Input id="username" defaultValue="@peduarte" />
            </div>
          </div>
          <SheetFooter>
            <SheetClose asChild>
              <Button type="submit">Save changes</Button>
            </SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Button } from "@/components/starwind/button";
import { Input } from "@/components/starwind/input";
import { Label } from "@/components/starwind/label";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/starwind/sheet";
</script>

<template>
  <Sheet>
    <SheetTrigger asChild>
      <button type="button" :class="ButtonVariants.button({})">Open Sheet</button>
    </SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Edit Profile</SheetTitle>
        <SheetDescription>
          Make changes to your profile here. Click save when you're done.
        </SheetDescription>
      </SheetHeader>
      <div class="grid gap-4 px-4">
        <div class="grid gap-2">
          <Label for="name">Name</Label>
          <Input id="name" default-value="Pedro Duarte" />
        </div>
        <div class="grid gap-2">
          <Label for="username">Username</Label>
          <Input id="username" default-value="@peduarte" />
        </div>
      </div>
      <SheetFooter>
        <SheetClose asChild>
          <button type="submit" :class="ButtonVariants.button({})">Save changes</button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Composition

Use this structure for a sheet:

```text
Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    └── SheetFooter
```

`SheetContent` includes a close button. Use `SheetClose` when another control also needs to close
the sheet.

## When to Use

Use Sheet for supporting content that slides in from an edge, such as a form or mobile navigation.

## Side

Sheets can slide out from any side of the screen using the `side` prop.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Button } from "@/components/starwind/button";
import { Input } from "@/components/starwind/input";
import { Label } from "@/components/starwind/label";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/starwind/sheet";
---

<!-- Top Sheet -->
<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Top Sheet</Button>
  </SheetTrigger>
  <SheetContent side="top">
    <SheetHeader>
      <SheetTitle>Top Sheet</SheetTitle>
      <SheetDescription>This sheet opens from the top of the screen.</SheetDescription>
    </SheetHeader>
    <div class="grid gap-4 px-4">
      <div class="grid gap-3">
        <Label for="top-sheet-name">Name</Label>
        <Input id="top-sheet-name" value="Pedro Duarte" />
      </div>
      <div class="grid gap-3">
        <Label for="top-sheet-username">Username</Label>
        <Input id="top-sheet-username" value="@peduarte" />
      </div>
    </div>
    <SheetFooter>
      <Button variant="default">Save changes</Button>
      <SheetClose asChild>
        <Button variant="outline">Close</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

<!-- Use side="right", "bottom", or "left" for the other edges. -->
```
  </div>
  <div slot="react">
```tsx
import { Button } from "@/components/starwind/button";
import { Input } from "@/components/starwind/input";
import { Label } from "@/components/starwind/label";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/starwind/sheet";

export function Example() {
  return (
    <>
      {/* Top Sheet */}
      <Sheet>
        <SheetTrigger asChild>
          <Button variant="outline">Open Top Sheet</Button>
        </SheetTrigger>
        <SheetContent side="top">
          <SheetHeader>
            <SheetTitle>Top Sheet</SheetTitle>
            <SheetDescription>This sheet opens from the top of the screen.</SheetDescription>
          </SheetHeader>
          <div className="grid gap-4 px-4">
            <div className="grid gap-3">
              <Label htmlFor="top-sheet-name">Name</Label>
              <Input id="top-sheet-name" value="Pedro Duarte" />
            </div>
            <div className="grid gap-3">
              <Label htmlFor="top-sheet-username">Username</Label>
              <Input id="top-sheet-username" value="@peduarte" />
            </div>
          </div>
          <SheetFooter>
            <Button variant="default">Save changes</Button>
            <SheetClose asChild>
              <Button variant="outline">Close</Button>
            </SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>

      {/* Use side="right", "bottom", or "left" for the other edges. */}
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Button } from "@/components/starwind/button";
import { Input } from "@/components/starwind/input";
import { Label } from "@/components/starwind/label";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/starwind/sheet";
</script>

<template>
  <!-- Top Sheet -->
  <Sheet>
    <SheetTrigger asChild>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">
        Open Top Sheet
      </button>
    </SheetTrigger>
    <SheetContent side="top">
      <SheetHeader>
        <SheetTitle>Top Sheet</SheetTitle>
        <SheetDescription>This sheet opens from the top of the screen.</SheetDescription>
      </SheetHeader>
      <div class="grid gap-4 px-4">
        <div class="grid gap-3">
          <Label for="top-sheet-name">Name</Label>
          <Input id="top-sheet-name" default-value="Pedro Duarte" />
        </div>
        <div class="grid gap-3">
          <Label for="top-sheet-username">Username</Label>
          <Input id="top-sheet-username" default-value="@peduarte" />
        </div>
      </div>
      <SheetFooter>
        <Button variant="default">Save changes</Button>
        <SheetClose asChild>
          <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">
            Close
          </button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>

  <!-- Use side="right", "bottom", or "left" for the other edges. -->
</template>
```
  </div>
</FrameworkCodeSwitcher>

## API Reference
### Sheet
- Inherits div attributes.

### SheetTrigger
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `false` | Wrapper prop | Merges the component behavior and props into its child element. |
- Inherits button attributes.

### SheetContent
- Inherits dialog attributes.

### SheetHeader
- Inherits div attributes.

### SheetFooter
- Inherits div attributes.

### SheetTitle
- Inherits h2 attributes.

### SheetDescription
- Inherits p attributes.

### SheetClose
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `false` | Wrapper prop | Merges the component behavior and props into its child element. |
- Inherits button attributes.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Drawer Primitive](/docs/primitives/drawer/)
- Runtime factory: [`createDrawer`](/docs/runtime/#create-drawer) from `@starwind-ui/runtime/drawer`

## Changelog

### v2.0.2

- Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

### v2.0.0

- Rebuilt Sheet on Starwind Runtime while preserving its styled API over the shared Drawer behavior.
- See the [Drawer Primitive](/docs/primitives/drawer/) for the underlying unstyled anatomy and behavior API.