huntabyte__shadcn-svelte/docs/content/components/sheet.md

title, description, component, links

title	description	component	links
Sheet	Extends the Dialog component to display content that complements the main content of the screen.	true	source doc api https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/sheet https://bits-ui.com/docs/components/dialog https://bits-ui.com/docs/components/dialog#api-reference

<script> import ComponentPreview from "$lib/components/component-preview.svelte"; import ComponentSource from "$lib/components/component-source.svelte"; import PMAddComp from "$lib/components/pm-add-comp.svelte"; import PMInstall from "$lib/components/pm-install.svelte"; import Steps from "$lib/components/steps.svelte"; import InstallTabs from "$lib/components/install-tabs.svelte"; let { viewerData } = $props(); import Step from "$lib/components/step.svelte"; </script>

Installation

{#snippet cli()} {/snippet} {#snippet manual()}

Install bits-ui:

Copy and paste the following code into your project.

{#if viewerData} {/if} {/snippet}

Usage

<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

Side

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.

Size

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>