---
title: Sheet
description: Extends the Dialog component to display content that complements the main content of the screen.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/input"
	"github.com/axadrn/shadcn-templ/v2/components/label"
	"github.com/axadrn/shadcn-templ/v2/components/sheet"
)

templ SheetDemo() {
	@sheet.Sheet() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: sheet.Trigger(ctx),
		}) {
			Open
		}
		@sheet.Content() {
			@sheet.Header() {
				@sheet.Title() {
					Edit profile
				}
				@sheet.Description() {
					Make changes to your profile here. Click save when you're done.
				}
			}
			<div class="grid flex-1 auto-rows-min gap-6 px-4">
				<div class="grid gap-3">
					@label.Label(label.Props{For: "sheet-demo-name"}) {
						Name
					}
					@input.Input(input.Props{ID: "sheet-demo-name", Value: "Axel Adrian"})
				</div>
				<div class="grid gap-3">
					@label.Label(label.Props{For: "sheet-demo-username"}) {
						Username
					}
					@input.Input(input.Props{ID: "sheet-demo-username", Value: "@axadrn"})
				</div>
			</div>
			@sheet.Footer() {
				@button.Button(button.Props{Type: button.TypeSubmit}) {
					Save changes
				}
				@button.Button(button.Props{
					Variant:    button.VariantOutline,
					Attributes: sheet.Close(ctx),
				}) {
					Close
				}
			}
		}
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add sheet
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="sheet" title="components/sheet/sheet.templ" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/sheet"
```

```templ showLineNumbers
@sheet.Sheet() {
	<button { sheet.Trigger(ctx)... }>Open</button>
	@sheet.Content() {
		@sheet.Header() {
			@sheet.Title() {
				Are you absolutely sure?
			}
			@sheet.Description() {
				This action cannot be undone.
			}
		}
	}
}
```

## Composition

Use the following composition to build a `Sheet`:

```text
sheet.Sheet
├── sheet.Trigger
└── sheet.Content
    ├── sheet.Header
    │   ├── sheet.Title
    │   └── sheet.Description
    └── sheet.Footer
```

## Side

Use the `Side` prop on `sheet.Content` to set the edge of the screen where the sheet appears. Values are `top`, `right`, `bottom`, and `left`.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/sheet"
)

var sheetSides = []sheet.Side{sheet.SideTop, sheet.SideRight, sheet.SideBottom, sheet.SideLeft}

templ SheetSide() {
	<div class="flex flex-wrap gap-2">
		for _, side := range sheetSides {
			@sheet.Sheet() {
				@button.Button(button.Props{
					Variant:    button.VariantOutline,
					Class:      "capitalize",
					Attributes: sheet.Trigger(ctx),
				}) {
					{ string(side) }
				}
				@sheet.Content(sheet.ContentProps{Side: side, Class: "data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]"}) {
					@sheet.Header() {
						@sheet.Title() {
							Edit profile
						}
						@sheet.Description() {
							Make changes to your profile here. Click save when you're done.
						}
					}
					<div class="no-scrollbar overflow-y-auto px-4">
						for range 10 {
							<p class="mb-2 leading-relaxed">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
							</p>
						}
					</div>
					@sheet.Footer() {
						@button.Button(button.Props{Type: button.TypeSubmit}) {
							Save changes
						}
						@button.Button(button.Props{
							Variant:    button.VariantOutline,
							Attributes: sheet.Close(ctx),
						}) {
							Close
						}
					}
				}
			}
		}
	</div>
}
```

## No Close Button

Use `HideCloseButton` on `sheet.Content` to hide the close button.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/sheet"
)

templ SheetNoCloseButton() {
	@sheet.Sheet() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: sheet.Trigger(ctx),
		}) {
			Open Sheet
		}
		@sheet.Content(sheet.ContentProps{HideCloseButton: true}) {
			@sheet.Header() {
				@sheet.Title() {
					No Close Button
				}
				@sheet.Description() {
					This sheet doesn't have a close button in the top-right corner. Click outside to close.
				}
			}
		}
	}
}
```

## API Reference

### Sheet

The `sheet.Sheet` component is the root, it carries the id that links trigger and content.

| Prop               | Type   | Default |
| ------------------ | ------ | ------- |
| `Open`             | `bool` | `false` |
| `DisableDismissible` | `bool` | `false` |

### SheetTrigger

`sheet.Trigger(ctx)` returns the attributes that turn any element into the sheet trigger, `sheet.TriggerFor(id)` targets a sheet outside the current root. `sheet.Close(ctx)` and `sheet.CloseFor(id)` close it.

### SheetContent

The `sheet.Content` component is the sliding panel.

| Prop              | Type                                             | Default     |
| ----------------- | ------------------------------------------------ | ----------- |
| `Side`            | `SideTop \| SideRight \| SideBottom \| SideLeft` | `SideRight` |
| `HideCloseButton` | `bool`                                           | `false`     |
| `Class`           | `string`                                         | -           |

### SheetHeader

The `sheet.Header` component wraps the title and description.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### SheetFooter

The `sheet.Footer` component holds actions at the bottom.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### SheetTitle

The `sheet.Title` component renders the accessible sheet title.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### SheetDescription

The `sheet.Description` component renders the accessible sheet description.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |