Sheet

A panel that slides in from the edge of the screen.

Installation

npx lily-svelte@latest add sheet

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the sheet source from the registry into `$lib/components/ui/sheet`.

Usage

<script lang="ts">
	import {
		Sheet,
		SheetTrigger,
		SheetContent,
		SheetHeader,
		SheetTitle,
		SheetDescription
	} from '$lib/components/ui/sheet';
	import { Button } from '$lib/components/ui/button';
</script>
 
<Sheet>
	<SheetTrigger>
		{#snippet child({ props })}
			<Button {...props}>Open</Button>
		{/snippet}
	</SheetTrigger>
	<SheetContent side="right">
		<SheetHeader>
			<SheetTitle>Edit profile</SheetTitle>
			<SheetDescription>Make changes here.</SheetDescription>
		</SheetHeader>
	</SheetContent>
</Sheet>

side can be "top", "right" (default), "bottom", or "left".

← Separator Sidebar →