Sheet

Edge-anchored surface on bits-ui Dialog. Slides in from any side with a 200ms fade-and-translate, carries Title, Description, and Close like a Dialog.

API Reference Component Source

Usage

sheet.svelte

<script lang="ts">
	import { Dialog as SheetPrimitive } from 'bits-ui';

	let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
</script>

<SheetPrimitive.Root
	bind:open
	{...restProps}
	{...{ 'data-slot': 'sheet' } as Record<string, unknown>}
/>

Sides

sheet-sides.svelte

<script lang="ts">
	import { Dialog as SheetPrimitive } from 'bits-ui';

	let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
</script>

<SheetPrimitive.Root
	bind:open
	{...restProps}
	{...{ 'data-slot': 'sheet' } as Record<string, unknown>}
/>

Sizes

Override the default width with a Tailwind max-width class on Sheet.Content. Useful for narrower drawers or full-bleed panels.

sheet-sizes.svelte

<script lang="ts">
	import { Dialog as SheetPrimitive } from 'bits-ui';

	let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
</script>

<SheetPrimitive.Root
	bind:open
	{...restProps}
	{...{ 'data-slot': 'sheet' } as Record<string, unknown>}
/>

Scrollable content

Wrap a long body in ScrollArea with flex-1 — header and footer stay pinned, only the middle scrolls.

sheet-scrollable.svelte

<Sheet.Content side="right" class="flex flex-col">
	<Sheet.Header>...</Sheet.Header>
	<ScrollArea class="flex-1 px-4">
		<!-- long content -->
	</ScrollArea>
	<Sheet.Footer>...</Sheet.Footer>
</Sheet.Content>

Form in sheet

Wrap the body in a <form> with onsubmit — the submit button can live in the footer or be a primary type="submit" action that closes the sheet.

sheet-form.svelte

<Sheet.Content side="right">
	<form onsubmit={(e) => { e.preventDefault(); /* submit + close */ }}>
		<Sheet.Header>...</Sheet.Header>
		<div class="grid gap-4 px-4">
			<Label for="name">Name</Label>
			<Input id="name" bind:value={formName} />
			...
		</div>
		<Sheet.Footer>
			<Sheet.Close><Button variant="outline">Cancel</Button></Sheet.Close>
			<Button type="submit">Save</Button>
		</Sheet.Footer>
	</form>
</Sheet.Content>

Sheet.Content props

Inherits bits-ui Dialog.Content props via spread.

Type	Default	Description
`'top' \| 'right' \| 'bottom' \| 'left'`	`'right'`	Edge the sheet enters from. Width caps at sm on left/right; height is auto on top/bottom.
`boolean`	`true`	Renders the absolute-positioned top-right ghost close button.
`ComponentProps<Sheet.Portal>`	—	Forwarded to the internal portal.
`string`	—	Merged onto the content surface via tailwind-merge.