1<script lang="ts"> 2 import Button from '../button/button.svelte'; 3 import { buttonVariants } from '../button/button.variants.js'; 4 import { Input } from '../input/index.js'; 5 import { Label } from '../label/index.js'; 6 import * as Sheet from './index.js'; 7</script> 8 9<Sheet.Root> 10 <Sheet.Trigger class={buttonVariants({ variant: 'outline' })}>Open</Sheet.Trigger> 11 <Sheet.Content side="right"> 12 <Sheet.Header> 13 <Sheet.Title>Edit profile</Sheet.Title> 14 <Sheet.Description> 15 Make changes to your profile here. Click save when you're done. 16 </Sheet.Description> 17 </Sheet.Header> 18 <div class="grid flex-1 auto-rows-min gap-6 px-4"> 19 <div class="grid gap-3"> 20 <Label for="sheet-preview-name">Name</Label> 21 <Input id="sheet-preview-name" value="Pedro Duarte" /> 22 </div> 23 <div class="grid gap-3"> 24 <Label for="sheet-preview-username">Username</Label> 25 <Input id="sheet-preview-username" value="@peduarte" /> 26 </div> 27 </div> 28 <Sheet.Footer> 29 <Button type="submit">Save changes</Button> 30 <Sheet.Close class={buttonVariants({ variant: 'outline' })}>Close</Sheet.Close> 31 </Sheet.Footer> 32 </Sheet.Content> 33</Sheet.Root> 34

Installation

Usage

Use sheet for edge panels (dialog-based). Compose trigger, content, header, and footer. Pass side on Content as top, right, bottom, or left.

1<script lang="ts">
2	import { buttonVariants } from '~/components/button';
3	import * as Sheet from '~/components/sheet';
4</script>
5
6<Sheet.Root>
7	<Sheet.Trigger class={buttonVariants({ variant: 'outline' })}>Open</Sheet.Trigger>
8	<Sheet.Content side="right">
9		<Sheet.Header>
10			<Sheet.Title>Edit profile</Sheet.Title>
11			<Sheet.Description>
12				Make changes to your profile here. Click save when you're done.
13			</Sheet.Description>
14		</Sheet.Header>
15		<Sheet.Footer>
16			<Sheet.Close class={buttonVariants({ variant: 'outline' })}>Close</Sheet.Close>
17		</Sheet.Footer>
18	</Sheet.Content>
19</Sheet.Root>