Drawer

A programmatic sliding panel component that appears from the edge of the screen.

Props

Prop	Type	Default	Description
`isOpen`	`boolean`	`false`	Controls the visibility of the drawer. Supports $bindable.
`componentId`	`string`	`undefined`	The unique identifier for the component wrapper.
`position`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'left'`	The side of the screen from which the drawer appears.
`closeOnBackdropClick`	`boolean`	`true`	Whether clicking the backdrop should close the drawer.
`scrollLock`	`boolean`	`true`	Whether to prevent body scrolling when the drawer is open.
`variant`	`string`	`''`	Custom variant class for theming.
`transitionFn`	`function`	`() => {}`	Transition function for the drawer panel.
`transitionParams`	`object`	`{}`	Parameters for the panel transition.
`backdropTransitionFn`	`function`	`() => {}`	Transition function for the backdrop.
`backdropTransitionParams`	`object`	`undefined`	Parameters for the backdrop transition.

A standard drawer anchored to the left.

<script>

  import { Drawer } from 'fluid-ui-svelte/components';

  import { Button, Text } from 'fluid-ui-svelte/base';

  let isBasicDrawerOpen = $state(false);

</script>

<Button onclick={async () => isBasicDrawerOpen = true}>Open Drawer</Button>

<Drawer bind:isOpen={isBasicDrawerOpen} position="left">

  <div class="flex flex-col gap-4">

    <Text type="h2">Drawer Content</Text>

    <Text>This is some content inside the drawer.</Text>

    <Button onclick={async () => isBasicDrawerOpen = false}>Close</Button>

  </div>

</Drawer>

Toggle drawers from all four directions.

<script>

  import { Drawer } from 'fluid-ui-svelte/components';

  let left = $state(false);

  let right = $state(false);

  let top = $state(false);

  let bottom = $state(false);

</script>

<Button onclick={async () => left = true}>Left</Button>

<Button onclick={async () => right = true}>Right</Button>

<Button onclick={async () => top = true}>Top</Button>

<Button onclick={async () => bottom = true}>Bottom</Button>

<Drawer bind:isOpen={left} position="left">Left Drawer</Drawer>

<Drawer bind:isOpen={right} position="right">Right Drawer</Drawer>

<Drawer bind:isOpen={top} position="top">Top Drawer</Drawer>

<Drawer bind:isOpen={bottom} position="bottom">Bottom Drawer</Drawer>

Pass standard Svelte transitions or custom ones.

<script>

  import { Drawer } from 'fluid-ui-svelte/components';

  import { fly, fade } from 'svelte/transition';

  let isAnimatedDrawerOpen = $state(false);

</script>

<Button onclick={async () => isAnimatedDrawerOpen = true}>Open Animated</Button>

<Drawer

  bind:isOpen={isAnimatedDrawerOpen}

  position="right"

  transitionFn={fly}

  transitionParams={{ x: 500, duration: 500 }}

  backdropTransitionFn={fade}

  Animated Content

</Drawer>

Using the fly transition for a sliding effect.

<script>

  import { Drawer } from 'fluid-ui-svelte/components';

  import { fly } from 'svelte/transition';

  let isFlyDrawerOpen = $state(false);

</script>

<Button onclick={async () => isFlyDrawerOpen = true}>Open Fly Drawer</Button>

<Drawer

  bind:isOpen={isFlyDrawerOpen}

  position="bottom"

  transitionFn={fly}

  transitionParams={{ y: 200, duration: 800 }}

  Fly Content

</Drawer>