Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Source Tailwind CSS JavaScript

Edit profile

Make changes to your profile here. Click save when you're done.

Name

Username

package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/input"
	"github.com/templui/templui/internal/components/label"
	"github.com/templui/templui/internal/components/sheet"
)

templ SheetDefault() {
	@sheet.Sheet(sheet.Props{
		Side: sheet.SideRight,
	}) {
		@sheet.Trigger() {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				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",
						Type:  input.TypeText,
						Value: "Pedro Duarte",
					})
				</div>
				<div class="grid gap-3">
					@label.Label(label.Props{
						For: "sheet-demo-username",
					}) {
						Username
					}
					@input.Input(input.Props{
						ID:    "sheet-demo-username",
						Type:  input.TypeText,
						Value: "@peduarte",
					})
				</div>
			</div>
			@sheet.Footer() {
				@button.Button(button.Props{
					Type: "submit",
				}) {
					Save changes
				}
				@sheet.Close() {
					@button.Button(button.Props{
						Variant: button.VariantOutline,
					}) {
						Close
					}
				}
			}
		}
	}
}

Examples

Sheet Sides

Top Sheet

This slides in from the top.

Content for the top sheet.

Right Sheet

This slides in from the right.

Content for the right sheet.

Bottom Sheet

This slides in from the bottom.

Content for the bottom sheet.

Left Sheet

This slides in from the left.

Content for the left sheet.

package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/sheet"
)

templ SheetSides() {
	<div class="grid grid-cols-2 gap-4">
		// Top Sheet
		@sheet.Sheet(sheet.Props{
			ID:   "sheet-top",
			Side: sheet.SideTop,
		}) {
			@sheet.Trigger() {
				@button.Button(button.Props{
					Variant: button.VariantOutline,
					Class:   "w-full",
				}) {
					Open from Top
				}
			}
			@sheet.Content() {
				@sheet.Header() {
					@sheet.Title() {
						Top Sheet
					}
					@sheet.Description() {
						This slides in from the top.
					}
				}
				<div class="px-4 py-6">
					<p class="text-sm">Content for the top sheet.</p>
				</div>
				@sheet.Footer() {
					@sheet.Close() {
						@button.Button() {
							Close
						}
					}
				}
			}
		}
		// Right Sheet
		@sheet.Sheet(sheet.Props{
			ID:   "sheet-right",
			Side: sheet.SideRight,
		}) {
			@sheet.Trigger() {
				@button.Button(button.Props{
					Variant: button.VariantOutline,
					Class:   "w-full",
				}) {
					Open from Right
				}
			}
			@sheet.Content() {
				@sheet.Header() {
					@sheet.Title() {
						Right Sheet
					}
					@sheet.Description() {
						This slides in from the right.
					}
				}
				<div class="px-4 py-6">
					<p class="text-sm">Content for the right sheet.</p>
				</div>
				@sheet.Footer() {
					@sheet.Close() {
						@button.Button() {
							Close
						}
					}
				}
			}
		}
		// Bottom Sheet
		@sheet.Sheet(sheet.Props{
			ID:   "sheet-bottom",
			Side: sheet.SideBottom,
		}) {
			@sheet.Trigger() {
				@button.Button(button.Props{
					Variant: button.VariantOutline,
					Class:   "w-full",
				}) {
					Open from Bottom
				}
			}
			@sheet.Content() {
				@sheet.Header() {
					@sheet.Title() {
						Bottom Sheet
					}
					@sheet.Description() {
						This slides in from the bottom.
					}
				}
				<div class="px-4 py-6">
					<p class="text-sm">Content for the bottom sheet.</p>
				</div>
				@sheet.Footer() {
					@sheet.Close() {
						@button.Button() {
							Close
						}
					}
				}
			}
		}
		// Left Sheet
		@sheet.Sheet(sheet.Props{
			ID:   "sheet-left",
			Side: sheet.SideLeft,
		}) {
			@sheet.Trigger() {
				@button.Button(button.Props{
					Variant: button.VariantOutline,
					Class:   "w-full",
				}) {
					Open from Left
				}
			}
			@sheet.Content() {
				@sheet.Header() {
					@sheet.Title() {
						Left Sheet
					}
					@sheet.Description() {
						This slides in from the left.
					}
				}
				<div class="px-4 py-6">
					<p class="text-sm">Content for the left sheet.</p>
				</div>
				@sheet.Footer() {
					@sheet.Close() {
						@button.Button() {
							Close
						}
					}
				}
			}
		}
	</div>
}

External Trigger

This sheet has no internal trigger

The trigger button exists outside the Sheet component.

package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/sheet"
)

templ SheetExternalTrigger() {
	// Sheet with content but no internal trigger
	@sheet.Sheet(sheet.Props{
		ID:   "external-trigger-demo",
		Side: sheet.SideRight,
	}) {
		// No trigger inside - will be triggered externally
		@sheet.Content() {
			@sheet.Header() {
				@sheet.Title() {
					External Trigger
				}
				@sheet.Description() {
					This sheet has no internal trigger
				}
			}
			<div class="flex-1 p-4">
				<p class="text-sm text-muted-foreground">
					The trigger button exists outside the Sheet component.
				</p>
			</div>
			@sheet.Footer() {
				@sheet.Close() {
					@button.Button(button.Props{
						Variant: button.VariantOutline,
					}) {
						Close
					}
				}
			}
		}
	}
	// External trigger outside of Sheet component
	@sheet.Trigger(sheet.TriggerProps{
		For: "external-trigger-demo",
	}) {
		@button.Button(button.Props{
			Variant: button.VariantOutline,
		}) {
			Open Sheet
		}
	}
}

Standalone Content

No wrapper component needed

Useful for HTMX or dynamic content loading.

package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/sheet"
)

templ SheetStandalone() {
	// Standalone sheet content (without Sheet wrapper)
	@sheet.Content(sheet.ContentProps{
		ID:   "standalone-sheet-demo",
		Side: sheet.SideLeft,
		Open: false,
	}) {
		@sheet.Header() {
			@sheet.Title() {
				Standalone Content
			}
			@sheet.Description() {
				No wrapper component needed
			}
		}
		<div class="flex-1 p-4">
			<p class="text-sm text-muted-foreground">
				Useful for HTMX or dynamic content loading.
			</p>
		</div>
		@sheet.Footer() {
			@sheet.Close(sheet.CloseProps{
				For: "standalone-sheet-demo",
			}) {
				@button.Button(button.Props{
					Variant: button.VariantOutline,
				}) {
					Close
				}
			}
		}
	}
	// Trigger for the standalone sheet
	@sheet.Trigger(sheet.TriggerProps{
		For: "standalone-sheet-demo",
	}) {
		@button.Button(button.Props{
			Variant: button.VariantOutline,
		}) {
			Open Sheet
		}
	}
}

Installation

Install the component
```
templui add sheet
```
Add the JavaScript to your layout
```
@dialog.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

API Reference

Required parameter

Hover for description

Sheet

Name	Type	Default
`ID` Unique identifier for the sheet (auto-generated if not provided)	`string`	`randomID`
`Class` Additional CSS classes to apply to the sheet wrapper	`string`	`""`
`Attributes` Additional HTML attributes to apply to the sheet wrapper	`templ.Attributes`	`nil`
`Side` Side from which the sheet slides in (top, right, bottom, left)	`Side`	`SideRight`
`Open` Whether the sheet should be open initially	`bool`	`false`
`DisableClickAway` Disable closing the sheet when clicking the backdrop	`bool`	`false`
`DisableESC` Disable closing the sheet with the ESC key	`bool`	`false`

Trigger

Name	Type	Default
`ID` Unique identifier for the trigger element	`string`	`""`
`Class` Additional CSS classes to apply to the trigger	`string`	`""`
`Attributes` Additional HTML attributes to apply to the trigger	`templ.Attributes`	`nil`
`For` ID of the sheet to trigger (for external triggers outside Sheet wrapper)	`string`	`""`

Content

Name	Type	Default
`Class` Additional CSS classes to apply to the content container	`string`	`""`
`Attributes` Additional HTML attributes to apply to the content container	`templ.Attributes`	`nil`
`HideCloseButton` Hide the close X button in the top right corner	`bool`	`false`
`ID` Sheet ID for standalone usage (when not wrapped in Sheet component)	`string`	`""`
`Side` Side for standalone usage (when not wrapped in Sheet component)	`Side`	`SideRight`
`Open` Initial open state for standalone usage (when not wrapped in Sheet component)	`bool`	`false`

Header

Name	Type	Default
`ID` Unique identifier for the header element	`string`	`""`
`Class` Additional CSS classes to apply to the header	`string`	`""`
`Attributes` Additional HTML attributes to apply to the header	`templ.Attributes`	`nil`

Title

Name	Type	Default
`ID` Unique identifier for the title element	`string`	`""`
`Class` Additional CSS classes to apply to the title	`string`	`""`
`Attributes` Additional HTML attributes to apply to the title	`templ.Attributes`	`nil`

Description

Name	Type	Default
`ID` Unique identifier for the description element	`string`	`""`
`Class` Additional CSS classes to apply to the description	`string`	`""`
`Attributes` Additional HTML attributes to apply to the description	`templ.Attributes`	`nil`

Footer

Name	Type	Default
`ID` Unique identifier for the footer element	`string`	`""`
`Class` Additional CSS classes to apply to the footer	`string`	`""`
`Attributes` Additional HTML attributes to apply to the footer	`templ.Attributes`	`nil`

Close

Name	Type	Default
`ID` Unique identifier for the close button	`string`	`""`
`Class` Additional CSS classes to apply to the close button	`string`	`""`
`Attributes` Additional HTML attributes to apply to the close button	`templ.Attributes`	`nil`

Menu

Getting Started

Components

Sheet

Edit profile

Examples

Top Sheet

Right Sheet

Bottom Sheet

Left Sheet

External Trigger

Standalone Content

Installation

API Reference

Sheet

Trigger

Content

Header

Title

Description

Footer

Close