Sheet

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

package examples import (

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

shadcn-templ add sheet

Copy and paste the following code into your project.

components/sheet/sheet.templ

package sheet import (	"context" 	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/utils") type ctxKey string const stateKey ctxKey = "sheetState" type Side string const (	SideTop    Side = "top"	SideRight  Side = "right"	SideBottom Side = "bottom"	SideLeft   Side = "left") type ctxState struct {	id               string	open             bool	disableClickAway bool} func state(ctx context.Context) ctxState {	if s, ok := ctx.Value(stateKey).(ctxState); ok {		return s	}	return ctxState{}} type Props struct {	ID string	// Open renders the sheet already open on page load.	Open bool	// DisableDismissible keeps the sheet open when clicking the backdrop.	DisableDismissible bool} type ContentProps struct {	Class      string	Attributes templ.Attributes	// Side of the screen the sheet slides in from. Defaults to right.	Side            Side	HideCloseButton bool} type HeaderProps struct {	ID         string	Class      string	Attributes templ.Attributes} type FooterProps struct {	ID         string	Class      string	Attributes templ.Attributes} type TitleProps struct {	ID         string	Class      string	Attributes templ.Attributes} type DescriptionProps struct {	ID         string	Class      string	Attributes templ.Attributes} // Sheet renders no element: it only carries the id and options that link// Trigger, Content and Close (via ctx). Like shadcn, the sheet IS the dialog// primitive with side styling; the dialog script drives it.templ Sheet(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.ID == "" {		{{ p.ID = utils.RandomID() }}	}	{{ ctx = context.WithValue(ctx, stateKey, ctxState{id: p.ID, open: p.Open, disableClickAway: p.DisableDismissible}) }}	{ children... }} // Trigger returns the attributes that turn any element (usually a button)// into the sheet trigger — the asChild equivalent: no wrapper element.func Trigger(ctx context.Context) templ.Attributes {	return TriggerFor(state(ctx).id)} // TriggerFor targets a sheet outside the current Sheet root by id.func TriggerFor(id string) templ.Attributes {	return templ.Attributes{		"data-tui-dialog-trigger": true,		"aria-controls":           id,		"aria-haspopup":           "dialog",		"aria-expanded":           "false",	}} // Close returns the attributes that make any element close the sheet.func Close(ctx context.Context) templ.Attributes {	return CloseFor(state(ctx).id)} // CloseFor targets a sheet outside the current Sheet root by id.func CloseFor(id string) templ.Attributes {	return templ.Attributes{		"data-tui-dialog-close":  true,		"data-tui-dialog-target": id,	}} templ Content(props ...ContentProps) {	{{ var p ContentProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Side == "" {		{{ p.Side = SideRight }}	}	{{ s := state(ctx) }}	// Inert until the script portals it to <body> at init, so the SSRd	// content never participates in layout or sibling CSS.	<template data-tui-dialog-portal>		<div data-tui-dialog-root hidden>			// 1:1 base/ui/sheet.tsx SheetOverlay (Dialog.Backdrop): the look			// comes from cn-sheet-overlay. user-select none is Base UI's			// inline style on the backdrop.			<div				data-slot="sheet-overlay"				data-tui-dialog-backdrop				role="presentation"				style="user-select: none; -webkit-user-select: none;"				class="cn-sheet-overlay fixed inset-0 z-50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0"			></div>			// 1:1 base/ui/sheet.tsx SheetContent (Dialog.Popup): the look			// comes from cn-sheet-content; the data-starting-style/			// data-ending-style variants are Base UI's transition lifecycle,			// driven by dialog.js.			<div				id={ s.id }				role="dialog"				tabindex="-1"				data-slot="sheet-content"				data-tui-dialog-content				data-side={ string(p.Side) }				data-tui-dialog-initial-open={ utils.IfElse(s.open, "true", "false") }				data-tui-dialog-show-modal="true"				if s.disableClickAway {					data-tui-dialog-disable-dismissible="true"				}				class={					utils.CN(						"cn-sheet-content data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem]",						p.Class,					),				}				{ p.Attributes... }			>				{ children... }				if !p.HideCloseButton {					@button.Button(button.Props{						Variant: button.VariantGhost,						Size:    button.SizeIconSm,						Class:   "cn-sheet-close",						Attributes: templ.Attributes{							"data-slot":             "sheet-close",							"data-tui-dialog-close": true,							"aria-label":            "Close",						},					}) {						@icon.X()						<span class="sr-only">Close</span>					}				}			</div>		</div>	</template>} templ Header(props ...HeaderProps) {	{{ var p HeaderProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="sheet-header"		class={ utils.CN("cn-sheet-header flex flex-col", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Footer(props ...FooterProps) {	{{ var p FooterProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="sheet-footer"		class={ utils.CN("cn-sheet-footer mt-auto flex flex-col", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Title(props ...TitleProps) {	{{ var p TitleProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="sheet-title"		data-tui-dialog-title		class={ utils.CN("cn-sheet-title cn-font-heading", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Description(props ...DescriptionProps) {	{{ var p DescriptionProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="sheet-description"		data-tui-dialog-description		class={ utils.CN("cn-sheet-description", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>}

Component scripts are loaded through the shared script bundle, see JavaScript.

Update the import paths to match your project setup.

Usage

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

@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:

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.

package examples import (

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.

package examples import (

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`	-

Separator Sidebar

On This Page

Installation Usage Composition Side No Close Button API Reference Sheet SheetTrigger SheetContent SheetHeader SheetFooter SheetTitle SheetDescription

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.