Extends the Dialog component to display content that complements the main content of the screen.
Installation
Install bits-ui
:
Copy and paste the component source files linked at the top of this page into your project.
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>