Quick Start Philosophy Customization Icons Haptics LLMs

Sheet

Example

Usage

A Sheet slides in from any edge of the screen — useful for forms, filters, or navigation that complements the main content.

The API mirrors Modal: one component, bind:open, plus optional title, description, and a footer snippet for action buttons.

		<Button onclick={() => (open = true)} variant="secondary">Open</Button>

<Sheet
	bind:open
	side="right"
	title="Edit profile"
	description="Make changes to your profile here."
>
	<!-- main content -->

	{#snippet footer()}
		<Button variant="secondary" onclick={() => (open = false)}>Cancel</Button>
		<Button onclick={() => (open = false)}>Save changes</Button>
	{/snippet}
</Sheet>

Side

Use the side prop to pick which edge the sheet slides in from. Values: top, right (default), bottom, left.

Width / height

Override the default size with the class prop:

		<Sheet bind:open class="sm:max-w-lg">
	<!-- wider sheet on larger screens -->
</Sheet>

API Reference

Sheet

A dialog that slides in from the edge of the screen. Built on top of the bits-ui Dialog primitive.

Property Type Description

open $bindable

boolean

Whether the sheet is open. Default: false

side

enum

Which edge of the screen the sheet slides in from. Default: 'right'

title

string

Optional title rendered in the sheet header. Default: —

description

string

Optional description rendered in the sheet header. Default: —

children required

Snippet

The main content of the sheet.

footer

Snippet

Optional footer snippet, typically containing action buttons. Default: —

closeButton

boolean

Whether to show the close button in the top-right corner. Default: true

interactOutsideBehavior

enum

How the sheet responds to clicks outside its content. Default: 'close'

onOpenAutoFocus

function

Callback when focus is moved into the sheet on open. Call event.preventDefault() to prevent default focus behavior. Default: —

contentProps

Dialog.ContentProps

Additional props to pass to the underlying Dialog.Content component. Default: —

onOpenChange

function

A callback invoked when the open state changes. Default: —

onOpenChangeComplete

function

A callback invoked after the open/close transition completes. Default: —

class

string

Additional CSS classes to apply to the sheet content. Default: —

Property

open

side

title

description

children

footer

closeButton

interactOutsideBehavior

onOpenAutoFocus

contentProps

onOpenChange

onOpenChangeComplete

class