Sheet

Multi-directional modal sheets that slide fluidly from the edges of the screen. Specially tuned with backdrop filter blurs, corner curves, and clean dismiss triggers.

Preview

Configuration

Slide Orientation (Side)

Render Close Button Shows the top-right 'X' button helper

Installation

npx shadcn-svelte@latest add https://ui.grgurevic.click/r/sheet.json

Svelte Composition Code

<script lang="ts">
	import * as Sheet from "$lib/components/ui/sheet";
	import { Button } from "$lib/components/ui/button";
</script>

<Sheet.Root>
	<Sheet.Trigger>
		<Button>Open Sheet</Button>
	</Sheet.Trigger>
	<Sheet.Content side="bottom">
		<Sheet.Header>
			<Sheet.Title>Sheet Title</Sheet.Title>
			<Sheet.Description>Detailed description goes here.</Sheet.Description>
		</Sheet.Header>
		<div class="p-6">
			<!-- Custom sheet content -->
		</div>
		<Sheet.Footer>
			<Button>Save Changes</Button>
		</Sheet.Footer>
	</Sheet.Content>
</Sheet.Root>

API & Sub-components Reference

Sheet.Root

Coordinates dynamic viewport opening states, overlays, focus locks, and overlay blurs.

Sheet.Trigger

The clickable element (like a Button) that triggers opening callbacks.

Sheet.Content

The primary overlay panel styled with Svelte edge slides, progressive shadows, and round layouts.

• side: "left" | "right" | "top" | "bottom" - Cardinal direction slide path.
• showCloseButton: boolean (true) - Displays upper corner click dismisses.