Documentation Index
Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
Use this file to discover all available pages before exploring further.
Installation
npx shadcn-svelte@next add sheet
Copy and paste the component source
Copy and paste the component source code into your project.
<script lang="ts">
import * as Sheet from "$lib/components/ui/sheet/index.js";
</script>
<Sheet.Root>
<Sheet.Trigger>Open</Sheet.Trigger>
<Sheet.Content>
<Sheet.Header>
<Sheet.Title>Are you sure absolutely sure?</Sheet.Title>
<Sheet.Description>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</Sheet.Description>
</Sheet.Header>
</Sheet.Content>
</Sheet.Root>
Examples
Pass the side property to <Sheet.Content /> to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.
You can adjust the size of the sheet using CSS classes:
<Sheet.Root>
<Sheet.Trigger>Open</Sheet.Trigger>
<Sheet.Content class="w-[400px] sm:w-[540px]">
<Sheet.Header>
<Sheet.Title>Are you absolutely sure?</Sheet.Title>
<Sheet.Description>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</Sheet.Description>
</Sheet.Header>
</Sheet.Content>
</Sheet.Root>