# Sheet

A flyout that opens from the side of the screen, based on the dialog component.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import {
	Button,
	Field,
	FieldLabel,
	Form,
	Input,
	Sheet,
	SheetClose,
	SheetDescription,
	SheetFooter,
	SheetHeader,
	SheetPanel,
	SheetPopup,
	SheetTitle,
	SheetTrigger,
} from "coss-svelte";
</script>

<Sheet>
	<SheetTrigger>Open Sheet</SheetTrigger>
	<SheetPopup>
		<SheetHeader>
			<SheetTitle>Edit profile</SheetTitle>
			<SheetDescription>
				Make changes to your profile here. Click save when you’re done.
			</SheetDescription>
		</SheetHeader>
		<Form class="contents">
			<SheetPanel class="grid gap-4">
				<Field>
					<FieldLabel>Name</FieldLabel>
					<Input value="Margaret Welsh" type="text" />
				</Field>
				<Field>
					<FieldLabel>Username</FieldLabel>
					<Input value="@maggie.welsh" type="text" />
				</Field>
			</SheetPanel>
			<SheetFooter>
				<SheetClose>Cancel</SheetClose>
				<Button type="submit">Save</Button>
			</SheetFooter>
		</Form>
	</SheetPopup>
</Sheet>

```

## Anatomy

- `Sheet`
- `SheetClose`
- `SheetContent`
- `SheetDescription`
- `SheetFooter`
- `SheetHeader`
- `SheetPanel`
- `SheetPopup`
- `SheetTitle`
- `SheetTrigger`

## API Reference

### Sheet

A flyout that opens from the side of the screen, based on the dialog component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `bind:open` | `boolean` | `false` | Open state for the popup or disclosure. Bind with `bind:open`. |
| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Side from which the surface appears. |
| `trigger` | `string` | `"Open"` | Fallback trigger text rendered when custom children are not provided. |
| `title` | `string` | `""` | Title text rendered by the component's built-in fallback layout. |
| `description` | `string` | `""` | Supporting text rendered by the component's built-in fallback layout. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Bits UI Dialog.Root](https://bits-ui.com/docs/components/dialog#root).

### SheetClose

Renders a control that closes the parent surface.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Dialog.Close](https://bits-ui.com/docs/components/dialog#close).

### SheetContent

Wraps the primary content for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### SheetDescription

Provides supporting copy for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Dialog.Description](https://bits-ui.com/docs/components/dialog#description).

### SheetFooter

Groups footer content and actions for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### SheetHeader

Groups heading content for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### SheetPanel

Renders the main panel surface for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### SheetPopup

Renders the floating or modal surface for the parent component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Side from which the surface appears. |
| `portalProps` | `{ disabled?: boolean; to?: PortalTarget }` | `{}` | Configures the exact Bits Portal target (`to`) or renders inline when `disabled`. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Dialog.Content](https://bits-ui.com/docs/components/dialog#content).

### SheetTitle

Names the parent surface or section.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Dialog.Title](https://bits-ui.com/docs/components/dialog#title).

### SheetTrigger

Renders the control that opens, closes, or selects related content.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Dialog.Trigger](https://bits-ui.com/docs/components/dialog#trigger).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | compound |
| Category | Overlays & Popups |
| Particles | 3 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/sheet.json` for the complete local file and dependency closure.
- Sheet is stable in the current source catalog.