Sheet

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

Source Tailwind CSS JavaScript

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/input"
	"github.com/templui/templui/components/label"
	"github.com/templui/templui/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

package showcase

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

templ SheetSides() {
	<div class="grid grid-cols-2 gap-4">
		// Top Sheet
		@sheet.Sheet(sheet.Props{
			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{
			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{
			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{
			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

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/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
		}
	}
}

Installation

templui add sheet

Load the script once in your layout:

<head>
  @sheet.Script()
</head>

API Reference

Required parameter

Hover for description

Sheet

Name	Type	Default
`ID` Optional HTML id for the sheet root. Useful for external targeting.	`string`	`""`
`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` Optional sheet root id 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`
`Side` Side from which the sheet slides in. Usually inherited from Sheet.	`Side`	`SideRight`

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

Installation

API Reference

Sheet

Trigger

Content

Header

Title

Description

Footer

Close