---
title: Drawer
description: "`Drawer`は、画面の端から表示されるパネルのコンポーネントです。"
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/drawer/drawer.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/drawer
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-drawer--basic
---

```tsx
<Drawer.Root>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>
```

## 使い方

```tsx
import { Drawer } from "@yamada-ui/react"
```

```tsx
import { Drawer } from "@/components/ui"
```

```tsx
import { Drawer } from "@workspaces/ui"
```

```tsx
<Drawer.Root>
  <Drawer.OpenTrigger />
  <Drawer.Content>
    <Drawer.Overlay />
    <Drawer.CloseButton />
    <Drawer.Header />
    <Drawer.Body />
    <Drawer.Footer />
    <Drawer.CloseTrigger />
  </Drawer.Content>
</Drawer.Root>
```

:::note
`Drawer.Overlay`と`Drawer.CloseButton`は、省略することができます。
:::

### サイズを変更する

```tsx
<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg", "xl", "full"]}>
    {(size) => (
      <Drawer.Root key={size} size={size}>
        <Drawer.OpenTrigger>
          <Button>Open "{size}" Drawer</Button>
        </Drawer.OpenTrigger>

        <Drawer.Content>
          <Drawer.Header>ドラゴンボール</Drawer.Header>

          <Drawer.Body>
            『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
          </Drawer.Body>

          <Drawer.Footer>
            <Drawer.CloseTrigger>
              <Button variant="ghost">とじる</Button>
            </Drawer.CloseTrigger>
            <Button>Wikipedia</Button>
          </Drawer.Footer>
        </Drawer.Content>
      </Drawer.Root>
    )}
  </For>
</Wrap>
```

### 位置を変更する

表示位置を変更する場合は、`placement`に`"block-start"`や`"inline-start"`などを設定します。デフォルトでは、`"inline-end"`が設定されています。

```tsx
<Wrap gap="md">
  <For each={["block-start", "inline-start", "inline-end", "block-end"]}>
    {(placement) => (
      <Drawer.Root key={placement} placement={placement}>
        <Drawer.OpenTrigger>
          <Button>Open "{placement}" Drawer</Button>
        </Drawer.OpenTrigger>

        <Drawer.Content>
          <Drawer.Header>ドラゴンボール</Drawer.Header>

          <Drawer.Body>
            『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
          </Drawer.Body>

          <Drawer.Footer>
            <Drawer.CloseTrigger>
              <Button variant="ghost">とじる</Button>
            </Drawer.CloseTrigger>
            <Button>Wikipedia</Button>
          </Drawer.Footer>
        </Drawer.Content>
      </Drawer.Root>
    )}
  </For>
</Wrap>
```

### 所要時間を変更する

所要時間を変更する場合は、`duration`に数値(秒)を設定します。

```tsx
<Drawer.Root duration={0.7}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>
```

### マウント時にスクロールをブロックしない

デフォルトでは、パネルを開いた際に主要なコンテンツのスクロールをブロックしています。これは、アクセシビリティを確保するためです。もし、主要なコンテンツのスクロールをブロックしたくない場合は、`blockScrollOnMount`を`false`に設定します。

```tsx
<Drawer.Root blockScrollOnMount={false}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>
```

### 閉じるボタンを無効にする

閉じるボタンを無効にする場合は、`withCloseButton`を`false`に設定します。

```tsx
<Drawer.Root withCloseButton={false}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>
```

### オーバーレイを無効にする

パネルのオーバーレイを無効(非表示)にする場合は、`withOverlay`を`false`にします。

```tsx
<Drawer.Root withOverlay={false}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>
```

### ドラッグして閉じる

`Drawer`をドラッグで閉じたい場合は、`closeOnDrag`を`true`に設定します。

```tsx
<Drawer.Root closeOnDrag>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>
```

### ドラッグバーを非表示にする

ドラッグバーを非表示にする場合は、`withDragBar`を`false`に設定します。

```tsx
<Drawer.Root closeOnDrag withDragBar={false}>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>
```

### 閉じるボタンをカスタマイズする

```tsx
<Drawer.Root>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Content>
    <Drawer.CloseButton colorScheme="red" />

    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>
```

### オーバーレイをカスタマイズする

```tsx
<Drawer.Root>
  <Drawer.OpenTrigger>
    <Button>Open Drawer</Button>
  </Drawer.OpenTrigger>

  <Drawer.Overlay bg="blackAlpha.300" backdropFilter="blur(10px)" />

  <Drawer.Content>
    <Drawer.Header>ドラゴンボール</Drawer.Header>

    <Drawer.Body>
      『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Drawer.Body>

    <Drawer.Footer>
      <Drawer.CloseTrigger>
        <Button variant="ghost">とじる</Button>
      </Drawer.CloseTrigger>
      <Button>Wikipedia</Button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>
```

### 制御する

表示・非表示を制御する場合は、`open`と`onClose`を設定します。

```tsx
const { open, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Drawer</Button>

    <Drawer.Root open={open} onClose={onClose}>
      <Drawer.Content>
        <Drawer.Header>ドラゴンボール</Drawer.Header>

        <Drawer.Body>
          『ドラゴンボール』は、鳥山明による日本の漫画作品です。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
        </Drawer.Body>

        <Drawer.Footer>
          <Button variant="ghost" onClick={onClose}>
            とじる
          </Button>
          <Button>Wikipedia</Button>
        </Drawer.Footer>
      </Drawer.Content>
    </Drawer.Root>
  </>
)
```

## Props

### Drawer.Root

| Prop                    | Default        | Type                                                                                      | Description                                                                                                                                                                   |
| ----------------------- | -------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `size`                  | `"lg"`         | `"2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "full" \| "lg" \| "md" \| "sm" \| "xl" ...` | The size of the component.                                                                                                                                                    |
| `allowPinchZoom`        | `false.`       | `boolean`                                                                                 | Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.                                                                                                  |
| `blockScrollOnMount`    | `true`         | `boolean`                                                                                 | If `true`, scrolling will be disabled on the `body` when the drawer opens.                                                                                                    |
| `body`                  | -              | `DrawerBodyProps \| ReactNode`                                                            | The drawer body to use.                                                                                                                                                       |
| `cancel`                | -              | `ButtonProps \| ReactNode`                                                                | The drawer cancel button to use.                                                                                                                                              |
| `closeOnDrag`           | `false`        | `boolean`                                                                                 | If `true`, then the drawer will close on drag.                                                                                                                                |
| `closeOnEsc`            | `true`         | `boolean`                                                                                 | If `true`, the modal will close when the `Esc` key is pressed.                                                                                                                |
| `closeOnOverlay`        | `true`         | `boolean`                                                                                 | If `true`, the modal will close when the overlay is clicked.                                                                                                                  |
| `defaultOpen`           | -              | `boolean`                                                                                 | If `true`, the element will be initially opened.                                                                                                                              |
| `dragConstraints`       | `0`            | `number`                                                                                  | Applies constraints on the permitted draggable area.                                                                                                                          |
| `dragElastic`           | `0.1`          | `number`                                                                                  | The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.                                                                                       |
| `dragOffset`            | `80`           | `number`                                                                                  | Offset from being dragged to closing.                                                                                                                                         |
| `dragVelocity`          | `100`          | `number`                                                                                  | Velocity of the drag that triggers close.                                                                                                                                     |
| `duration`              | -              | `MotionTransitionProps["duration"]`                                                       | The animation duration.                                                                                                                                                       |
| `finalFocusRef`         | -              | `RefObject<HTMLElement \| null>`                                                          | `ref` of the element to return focus to when `FocusLock` unmounts.                                                                                                            |
| `footer`                | -              | `DrawerFooterProps \| ReactNode`                                                          | The drawer footer to use.                                                                                                                                                     |
| `header`                | -              | `DrawerHeaderProps \| ReactNode`                                                          | The drawer header to use.                                                                                                                                                     |
| `initialFocusRef`       | -              | `RefObject<HTMLElement \| null>`                                                          | `ref` of the element to receive focus initially.                                                                                                                              |
| `lockFocusAcrossFrames` | `false`        | `boolean`                                                                                 | Enables aggressive focus capturing within iframes. - If `true`: keep focus in the lock, no matter where lock is active. - If `false`: allows focus to move outside of iframe. |
| `middle`                | -              | `ButtonProps \| ReactNode`                                                                | The drawer middle button to use.                                                                                                                                              |
| `onCancel`              | -              | `(onClose: () => void) => void`                                                           | The callback invoked when cancel button clicked.                                                                                                                              |
| `onClose`               | -              | `() => void \| Promise<void>`                                                             | Callback invoked to close the element.                                                                                                                                        |
| `onCloseComplete`       | -              | `() => void`                                                                              | Callback function to run side effects after the drawer has closed.                                                                                                            |
| `onEsc`                 | -              | `() => void`                                                                              | Callback invoked when the escape key is pressed and focus is within modal.                                                                                                    |
| `onMiddle`              | -              | `(onClose: () => void) => void`                                                           | The callback invoked when middle button clicked.                                                                                                                              |
| `onOpen`                | -              | `() => void \| Promise<void>`                                                             | Callback invoked to open the element.                                                                                                                                         |
| `onSuccess`             | -              | `(onClose: () => void) => void`                                                           | The callback invoked when success button clicked.                                                                                                                             |
| `open`                  | -              | `boolean`                                                                                 | If `true`, the element will be opened.                                                                                                                                        |
| `placement`             | `"inline-end"` | `"block-end" \| "block-start" \| "inline-end" \| "inline-start" ...`                      | The placement of the drawer.                                                                                                                                                  |
| `portalProps`           | -              | `Omit<PortalProps, "children">`                                                           | Props to be forwarded to the portal component.                                                                                                                                |
| `restoreFocus`          | `false`        | `boolean`                                                                                 | If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.                                                                             |
| `success`               | -              | `ButtonProps \| ReactNode`                                                                | The drawer success button to use.                                                                                                                                             |
| `title`                 | -              | `DrawerTitleProps \| ReactNode`                                                           | The drawer title to use.                                                                                                                                                      |
| `trigger`               | -              | `ReactNode`                                                                               | The modal trigger to use.                                                                                                                                                     |
| `withCloseButton`       | `true`         | `boolean`                                                                                 | If `true`, display the drawer close button.                                                                                                                                   |
| `withDragBar`           | `true`         | `boolean`                                                                                 | If `true`, display the drag bar when `closeOnDrag` is `true`.                                                                                                                 |
| `withOverlay`           | `true`         | `boolean`                                                                                 | If `true`, display the drawer overlay.                                                                                                                                        |

### Drawer.CloseButton

| Prop            | Default    | Type                                                                                                                                                         | Description                                                           |
| --------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- |
| `as`            | -          | `As`                                                                                                                                                         | The HTML element to render.                                           |
| `asChild`       | -          | `boolean`                                                                                                                                                    | Merges its props onto its immediate child.                            |
| `css`           | -          | `CSSObject \| CSSObject[]`                                                                                                                                   | The CSS object.                                                       |
| `colorScheme`   | -          | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                    | Set color scheme variables.                                           |
| `size`          | -          | `"2xl" \| "2xs" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"`                                                                                                     | The size of the component.                                            |
| `variant`       | -          | `"ghost" \| "outline" \| "solid" \| "subtle" \| "surface" ...`                                                                                               | The variant of the component.                                         |
| `active`        | `false`    | `boolean`                                                                                                                                                    | If `true`, the button is represented as active.                       |
| `disabled`      | `false`    | `boolean`                                                                                                                                                    | If `true`, the button is disabled.                                    |
| `disableRipple` | `false`    | `boolean`                                                                                                                                                    | If `true`, disable ripple effects when pressing a element.            |
| `fullRounded`   | `false`    | `boolean`                                                                                                                                                    | If `true`, the button is full rounded. Else, it'll be slightly round. |
| `icon`          | -          | `string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` | The icon to be used in the button.                                    |
| `loading`       | `false`    | `boolean`                                                                                                                                                    | If `true`, the loading state of the button is represented.            |
| `type`          | `"button"` | `"button" \| "reset" \| "submit"`                                                                                                                            | The type of button. Accepts `button`, `reset`, or `submit`.           |

### Drawer.CloseTrigger

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Drawer.Content

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `keyof IntrinsicElements`                                                                                                 | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Drawer.DragBar

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Drawer.Footer

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Drawer.Header

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Drawer.OpenTrigger

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Drawer.Overlay

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `DOMElement`                                                                                                              | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Drawer.Title

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。