Sprix logo

Sheet

A side or edge panel for secondary workflows and supporting detail.

The Sheet Component

Quick settings

Adjust rollout preferences without leaving the current page.

Use a side sheet for supporting decisions and short edits.

Launch note

Review the final note before go-live.

Use a bottom sheet when the content reads like a stacked mobile drawer.

Basic Usage

Code Snippet

<script lang="ts">		import { Button, Sheet } from '$lib/components'; 		let open = $state(false);	</script> 	<Button onclick={() => (open = true)}>Open settings</Button> 	<Sheet bind:open={open} side="right" title="Quick settings" description="Adjust rollout preferences.">		<p class="text-sm text-app-text-muted">Move secondary setup work out of the main canvas.</p>	</Sheet>

Examples

Large Left Sheet

Open a wider sheet from the left for navigation or historical context.

Release timeline

Review milestones, approvals, and notes from earlier drafts.

Monday

Kickoff and editorial alignment.

Thursday

Approval and launch readiness review.