120k
New

Drawer

PreviousNext

A drawer component for Svelte.

About

Drawer is built on top of Vaul Svelte, which is a Svelte port of Vaul by Emil Kowalski.

Installation

pnpm dlx shadcn@latest add @force-ui-svelte/drawer

Usage

<script lang="ts">
  import * as Drawer from "$lib/components/ui/drawer/index.js";
</script>
<Drawer.Root>
  <Drawer.Trigger>Open</Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Are you absolutely sure?</Drawer.Title>
      <Drawer.Description>This action cannot be undone.</Drawer.Description>
    </Drawer.Header>
    <Drawer.Footer>
      <Button>Submit</Button>
      <Drawer.Close>Cancel</Drawer.Close>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Composition

Use the following composition to build a Drawer:

Drawer.Root
├── Drawer.Trigger
└── Drawer.Content
    ├── Drawer.Header
    │   ├── Drawer.Title
    │   └── Drawer.Description
    └── Drawer.Footer

Examples

Scrollable Content

Keep actions visible while the content scrolls.

Sides

Use the direction prop to set the side of the drawer. Available options are top, right, bottom, and left.

Responsive Dialog

You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog on desktop and a Drawer on mobile.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Vaul documentation for the full API reference.