Sheet

Preview

svelte

<script lang="ts">
	import { Sheet } from "fancy-ui-svelte";
	import { Button } from "fancy-ui-svelte";
	import { Switch } from "fancy-ui-svelte";

	let open = $state(false);
	let notifications = $state(true);
	let compactMode = $state(false);
</script>

<Button onclick={() => (open = true)}>Open settings</Button>

<Sheet bind:open title="Settings" description="Update your workspace preferences.">
	<div class="flex items-center justify-between">
		<span class="text-muted-foreground text-[13px]">Notifications</span>
		<Switch bind:checked={notifications} label="Notifications" />
	</div>
	<div class="flex items-center justify-between">
		<span class="text-muted-foreground text-[13px]">Compact mode</span>
		<Switch bind:checked={compactMode} label="Compact mode" />
	</div>
</Sheet>

Installation

pnpm add fancy-ui-svelte

import { Sheet } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { Sheet } from 'fancy-ui-svelte';
</script>

<Sheet />

Examples

Basic Usage

svelte

<script lang="ts">
	import { Sheet } from "$lib/fancy-ui/sheet";
	import { Button } from "$lib/fancy-ui/button";
	import { Switch } from "$lib/fancy-ui/switch";

	let open = $state(false);
	let notifications = $state(true);
	let compactMode = $state(false);
</script>

<Button onclick={() => (open = true)}>Open settings</Button>

<Sheet bind:open title="Settings" description="Update your workspace preferences.">
	<div class="flex items-center justify-between">
		<span class="text-muted-foreground text-[13px]">Notifications</span>
		<Switch bind:checked={notifications} label="Notifications" />
	</div>
	<div class="flex items-center justify-between">
		<span class="text-muted-foreground text-[13px]">Compact mode</span>
		<Switch bind:checked={compactMode} label="Compact mode" />
	</div>
</Sheet>

Sides

Slide in from any edge of the viewport.

svelte

<script lang="ts">
	import { Sheet, type SheetSide } from "$lib/fancy-ui/sheet";
	import { Button } from "$lib/fancy-ui/button";

	let open = $state(false);
	let side = $state<SheetSide>("right");

	function openFrom(next: SheetSide) {
		side = next;
		open = true;
	}
</script>

<div class="flex flex-wrap gap-2">
	<Button variant="outline" onclick={() => openFrom("left")}>Left</Button>
	<Button variant="outline" onclick={() => openFrom("right")}>Right</Button>
	<Button variant="outline" onclick={() => openFrom("top")}>Top</Button>
	<Button variant="outline" onclick={() => openFrom("bottom")}>Bottom</Button>
</div>

<Sheet bind:open {side} title="Panel" description="Slides in from {side}.">
	<p class="text-muted-foreground text-[13px]">Body content goes here.</p>
</Sheet>

With Footer

Pin actions below the body.

svelte

<script lang="ts">
	import { Sheet } from "$lib/fancy-ui/sheet";
	import { Button } from "$lib/fancy-ui/button";
	import { Input } from "$lib/fancy-ui/input";

	let open = $state(false);
	let email = $state("");

	function send() {
		open = false;
	}
</script>

<Button onclick={() => (open = true)}>Invite a member</Button>

<Sheet
	bind:open
	title="Invite a member"
	description="Send an email invitation to join the workspace."
	{footer}
>
	<Input bind:value={email} type="email" placeholder="email@example.com" />
</Sheet>

{#snippet footer()}
	<Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
	<Button onclick={send}>Invite</Button>
{/snippet}

Props

Prop	Type	Default	Description
`open`	boolean	`false`	Whether the sheet is open. Bindable
`onOpenChange`	(open: boolean) => void	-	Called with the new value whenever the sheet opens or closes
`side`	"left" \| "right" \| "top" \| "bottom"	`"right"`	Edge of the viewport the panel slides in from
`title`	string	-	Heading rendered in the header and wired to aria-labelledby
`description`	string	-	Supporting text under the title, wired to aria-describedby
`dismissible`	boolean	`true`	Whether Escape, the scrim and the close button can close the sheet
`size`	"sm" \| "md" \| "lg"	`"md"`	Panel width (left/right sides) or height (top/bottom sides)
`class`	string	-	Additional CSS classes merged onto the panel
`ref`	HTMLDivElement \| null	`null`	Bindable element reference to the panel