### Install Vaul package

Source: https://context7.com/emilkowalski/vaul/llms.txt

Command to install the Vaul library via npm.

```bash
npm install vaul
```

--------------------------------

### Drawer Component Props Reference

Source: https://context7.com/emilkowalski/vaul/llms.txt

A comprehensive example demonstrating all available configuration props for the Drawer.Root component, including snap points, behavior settings, and event callbacks.

```tsx
import { Drawer } from 'vaul';

function FullyConfiguredDrawer() {
  return (
    <Drawer.Root
      open={false}
      defaultOpen={false}
      onOpenChange={(open) => {}}
      snapPoints={[0.25, 0.5, 1]}
      activeSnapPoint={0.5}
      setActiveSnapPoint={(snap) => {}}
      fadeFromIndex={2}
      snapToSequentialPoint={false}
      dismissible={true}
      modal={true}
      handleOnly={false}
      direction="bottom"
      shouldScaleBackground={false}
      setBackgroundColorOnScale={true}
      noBodyStyles={false}
      closeThreshold={0.25}
      scrollLockTimeout={500}
      fixed={false}
      repositionInputs={true}
      preventScrollRestoration={false}
      autoFocus={false}
      container={null}
      onDrag={(e, percent) => {}}
      onRelease={(e, open) => {}}
      onClose={() => {}}
      onAnimationEnd={(open) => {}}
    >
      <Drawer.Trigger>Open</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay />
        <Drawer.Content>
          <Drawer.Handle preventCycle={false} />
          <Drawer.Title>Title</Drawer.Title>
          <Drawer.Description>Description</Drawer.Description>
          <Drawer.Close>Close</Drawer.Close>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}
```

--------------------------------

### Preventing Drawer Drag with data-vaul-no-drag

Source: https://context7.com/emilkowalski/vaul/llms.txt

This example demonstrates how to use the `data-vaul-no-drag` attribute on a slider and a carousel component within a Vaul drawer. Elements with this attribute will not trigger the drawer's dragging behavior, allowing for independent interaction.

```APIDOC
## Preventing Drag on Elements

Use the `data-vaul-no-drag` attribute on elements that should not trigger drawer dragging, such as sliders, carousels, or other interactive components.

### Code Example

```tsx
import { Drawer } from 'vaul';

function DrawerWithNoDragZones() {
  return (
    <Drawer.Root>
      <Drawer.Trigger asChild>
        <button>Open Drawer</button>
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4 h-[80%]">
          <Drawer.Title>Interactive Content</Drawer.Title>

          {/* This slider won't trigger drawer drag */}
          <div data-vaul-no-drag className="my-4">
            <input type="range" min="0" max="100" className="w-full" />
            <p>Dragging this slider won't move the drawer</p>
          </div>

          {/* This carousel area won't trigger drawer drag */}
          <div data-vaul-no-drag className="overflow-x-auto flex gap-4 p-4">
            {[1, 2, 3, 4, 5].map((i) => (
              <div key={i} className="w-32 h-32 bg-gray-200 flex-shrink-0 rounded" />
            ))}
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}
```

### Usage

Apply the `data-vaul-no-drag` attribute directly to the HTML element or React component that should be excluded from initiating drawer drag gestures. This is particularly useful for elements that require their own touch interactions, such as range sliders, image carousels, or custom input components.
```

--------------------------------

### Implement Basic Drawer

Source: https://context7.com/emilkowalski/vaul/llms.txt

A standard implementation of the Drawer component using the Root, Trigger, Portal, and Content primitives.

```tsx
import { Drawer } from 'vaul';

function BasicDrawer() {
  return (
    <Drawer.Root>
      <Drawer.Trigger asChild>
        <button>Open Drawer</button>
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
          <Drawer.Title>Drawer Title</Drawer.Title>
          <Drawer.Description>Drawer content goes here.</Drawer.Description>
          <Drawer.Close>Close</Drawer.Close>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}
```

--------------------------------

### Drawer.Root Props Reference

Source: https://context7.com/emilkowalski/vaul/llms.txt

Complete list of properties for the Drawer.Root component to handle advanced behavior, snap points, and appearance.

```APIDOC
## Drawer.Root Props

### Parameters
#### State Control
- **open** (boolean) - Optional - Controlled open state.
- **defaultOpen** (boolean) - Optional - Initial open state.
- **onOpenChange** (function) - Optional - Callback on state change.

#### Snap Points
- **snapPoints** (array) - Optional - Array of percentages or pixels.
- **activeSnapPoint** (number) - Optional - Current active snap point.

#### Behavior
- **dismissible** (boolean) - Optional - Allow dismiss via swipe/click/esc.
- **modal** (boolean) - Optional - Modal mode toggle.
- **direction** (string) - Optional - 'top' | 'bottom' | 'left' | 'right'.

#### Appearance
- **shouldScaleBackground** (boolean) - Optional - Enable background scaling effect.
```

--------------------------------

### Configure Snap Points

Source: https://context7.com/emilkowalski/vaul/llms.txt

Configures a drawer with multiple snap points, allowing the user to stop the drawer at specific heights.

```tsx
import { useState } from 'react';
import { Drawer } from 'vaul';

function SnapPointsDrawer() {
  const snapPoints = ['148px', '355px', 1];
  const [snap, setSnap] = useState<number | string | null>(snapPoints[0]);

  return (
    <Drawer.Root
      snapPoints={snapPoints}
      activeSnapPoint={snap}
      setActiveSnapPoint={setSnap}
      fadeFromIndex={1}
    >
      <Drawer.Trigger asChild>
        <button>Open Drawer</button>
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg h-full max-h-[97%]">
          <div className={snap === 1 ? 'overflow-y-auto' : 'overflow-hidden'}>
            <h2>Multi-stage Drawer</h2>
            <p>Current snap point: {snap}</p>
            <p>Swipe up to expand, down to collapse or close.</p>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}
```

--------------------------------

### Create Controlled Drawer

Source: https://context7.com/emilkowalski/vaul/llms.txt

Demonstrates how to manage the drawer's open state externally using React state hooks for programmatic control.

```tsx
import { useState } from 'react';
import { Drawer } from 'vaul';

function ControlledDrawer() {
  const [open, setOpen] = useState(false);

  return (
    <Drawer.Root open={open} onOpenChange={setOpen}>
      <Drawer.Trigger asChild>
        <button>Open Drawer</button>
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4 h-[96%]">
          <Drawer.Title>Controlled Drawer</Drawer.Title>
          <p>This drawer's state is controlled externally.</p>
          <button onClick={() => setOpen(false)}>Close Programmatically</button>
          <Drawer.Close>Close via Drawer.Close</Drawer.Close>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}
```

--------------------------------

### Implement Non-Modal Drawer

Source: https://context7.com/emilkowalski/vaul/llms.txt

Configures a drawer that allows users to interact with the background content while the drawer is open. The overlay is automatically disabled in this mode.

```tsx
import { Drawer } from 'vaul';

function NonModalDrawer() {
  return (
    <Drawer.Root modal={false}>
      <Drawer.Trigger asChild>
        <button>Open Non-Modal Drawer</button>
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4 h-[50%] shadow-lg">
          <Drawer.Title>Non-Modal Drawer</Drawer.Title>
          <p>You can interact with content behind this drawer.</p>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}
```

--------------------------------

### Enable iOS-style Background Scaling

Source: https://context7.com/emilkowalski/vaul/llms.txt

Applies a scaling effect to the background content when the drawer opens. Requires the 'data-vaul-drawer-wrapper' attribute on the main app container.

```tsx
import { Drawer } from 'vaul';

function ScaledBackgroundDrawer() {
  return (
    <div data-vaul-drawer-wrapper="" className="h-screen w-screen bg-white">
      <Drawer.Root shouldScaleBackground>
        <Drawer.Trigger asChild>
          <button>Open Drawer</button>
        </Drawer.Trigger>
        <Drawer.Portal>
          <Drawer.Overlay className="fixed inset-0 bg-black/40" />
          <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4 h-[96%]">
            <Drawer.Title>Scaled Background Effect</Drawer.Title>
            <p>The background scales down when this drawer opens.</p>
          </Drawer.Content>
        </Drawer.Portal>
      </Drawer.Root>
    </div>
  );
}
```

--------------------------------

### Implement Nested Drawers

Source: https://context7.com/emilkowalski/vaul/llms.txt

Creates stacked drawer hierarchies using Drawer.NestedRoot. The parent drawer automatically adjusts its scale and position when a nested drawer is triggered.

```tsx
import { Drawer } from 'vaul';

function NestedDrawers() {
  return (
    <Drawer.Root>
      <Drawer.Trigger asChild>
        <button>Open First Drawer</button>
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4 h-[96%]">
          <Drawer.Title>First Drawer</Drawer.Title>
          <p>This is the parent drawer.</p>

          <Drawer.NestedRoot>
            <Drawer.Trigger asChild>
              <button>Open Nested Drawer</button>
            </Drawer.Trigger>
            <Drawer.Portal>
              <Drawer.Overlay className="fixed inset-0 bg-black/40" />
              <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-gray-100 rounded-t-lg p-4 h-[94%]">
                <Drawer.Title>Nested Drawer</Drawer.Title>
                <p>This drawer is nested inside the first one.</p>
                <Drawer.Close>Close Nested</Drawer.Close>
              </Drawer.Content>
            </Drawer.Portal>
          </Drawer.NestedRoot>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}
```

--------------------------------

### Add Draggable Handle with Snap Points

Source: https://context7.com/emilkowalski/vaul/llms.txt

Integrates a draggable handle indicator and snap points. Allows users to interactively resize the drawer to predefined heights.

```tsx
import { useState } from 'react';
import { Drawer } from 'vaul';

function DrawerWithHandle() {
  const snapPoints = ['148px', '355px'];
  const [snap, setSnap] = useState<number | string | null>(snapPoints[0]);

  return (
    <Drawer.Root
      snapPoints={snapPoints}
      activeSnapPoint={snap}
      setActiveSnapPoint={setSnap}
    >
      <Drawer.Trigger asChild>
        <button>Open Drawer</button>
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg h-full max-h-[97%]">
          <Drawer.Handle className="mx-auto mt-4 w-12 h-1.5 rounded-full bg-gray-300" />
          <div className="p-4">
            <h2>Drawer with Handle</h2>
            <p>Tap or drag the handle to interact with snap points.</p>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}
```

--------------------------------

### Implement Non-Dismissible Drawer

Source: https://context7.com/emilkowalski/vaul/llms.txt

Creates a drawer that ignores standard dismissal triggers like swiping or clicking outside. Requires controlled state management to handle the closing mechanism manually.

```tsx
import { useState } from 'react';
import { Drawer } from 'vaul';

function NonDismissibleDrawer() {
  const [open, setOpen] = useState(false);

  return (
    <Drawer.Root dismissible={false} open={open}>
      <Drawer.Trigger asChild onClick={() => setOpen(true)}>
        <button>Open Non-Dismissible Drawer</button>
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
          <Drawer.Title>Non-Dismissible Drawer</Drawer.Title>
          <p>This drawer cannot be swiped away or dismissed by clicking outside.</p>
          <button onClick={() => setOpen(false)}>
            Close (only way to dismiss)
          </button>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}
```

--------------------------------

### Non-Modal Drawer Configuration

Source: https://context7.com/emilkowalski/vaul/llms.txt

Configures a drawer that allows interaction with background content by disabling modal behavior.

```APIDOC
## Drawer.Root (Non-Modal)

### Description
Allows interaction with elements outside the drawer while it is open.

### Parameters
#### Request Body
- **modal** (boolean) - Required - Set to false to allow background interaction.

### Request Example
<Drawer.Root modal={false}>
```

--------------------------------

### Configure Drawer Opening Direction

Source: https://context7.com/emilkowalski/vaul/llms.txt

Sets the drawer's opening direction using the direction prop. Supports 'top', 'bottom', 'left', and 'right' to create side panels or top sheets.

```tsx
import { Drawer } from 'vaul';

function DirectionalDrawer({ direction }: { direction: 'top' | 'bottom' | 'left' | 'right' }) {
  const positionClasses = {
    bottom: 'bottom-0 left-0 right-0 h-[50%] rounded-t-lg',
    top: 'top-0 left-0 right-0 h-[50%] rounded-b-lg',
    left: 'left-0 top-0 bottom-0 w-[300px] rounded-r-lg',
    right: 'right-0 top-0 bottom-0 w-[300px] rounded-l-lg',
  };

  return (
    <Drawer.Root direction={direction}>
      <Drawer.Trigger asChild>
        <button>Open {direction} drawer</button>
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className={`fixed bg-white p-6 ${positionClasses[direction]}`}>
          <Drawer.Title>Drawer from {direction}</Drawer.Title>
          <Drawer.Close>Close</Drawer.Close>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}
```

--------------------------------

### Non-Dismissible Drawer Configuration

Source: https://context7.com/emilkowalski/vaul/llms.txt

Configures a drawer that prevents user dismissal via swipe, click-outside, or Escape key, requiring controlled state management for closing.

```APIDOC
## Drawer.Root (Non-Dismissible)

### Description
Creates a drawer that cannot be dismissed by standard user interactions. Must be used with controlled state.

### Parameters
#### Request Body
- **dismissible** (boolean) - Required - Set to false to disable dismissal.
- **open** (boolean) - Required - Controlled state for visibility.

### Request Example
<Drawer.Root dismissible={false} open={open}>
```

--------------------------------

### Preventing Drag on Interactive Elements with data-vaul-no-drag

Source: https://context7.com/emilkowalski/vaul/llms.txt

This snippet demonstrates how to apply the 'data-vaul-no-drag' attribute to HTML elements within a Vaul Drawer. By adding this attribute, components like range sliders and horizontal carousels remain interactive without triggering the drawer's drag gesture.

```tsx
import { Drawer } from 'vaul';

function DrawerWithNoDragZones() {
  return (
    <Drawer.Root>
      <Drawer.Trigger asChild>
        <button>Open Drawer</button>
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4 h-[80%]">
          <Drawer.Title>Interactive Content</Drawer.Title>

          <div data-vaul-no-drag className="my-4">
            <input type="range" min="0" max="100" className="w-full" />
            <p>Dragging this slider won't move the drawer</p>
          </div>

          <div data-vaul-no-drag className="overflow-x-auto flex gap-4 p-4">
            {[1, 2, 3, 4, 5].map((i) => (
              <div key={i} className="w-32 h-32 bg-gray-200 flex-shrink-0 rounded" />
            ))}
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.