---
title: Popover
description: "`Popover` is a component that floats around an element to display information."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/popover/popover.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/popover
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-popover--basic
---

# Popover

`Popover` is a component that floats around an element to display information.

```tsx
<Popover.Root>
  <Popover.Trigger>
    <Button>Click Me</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>空条承太郎</Popover.Header>
    <Popover.Body>やれやれだぜ</Popover.Body>
  </Popover.Content>
</Popover.Root>
```

## Usage

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

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

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

```tsx
<Popover.Root>
  <Popover.Anchor />
  <Popover.Trigger />
  <Popover.Content>
    <Popover.Header />
    <Popover.Body />
    <Popover.Footer />
  </Popover.Content>
</Popover.Root>
```

### Change Size

```tsx
<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg"]}>
    {(size) => (
      <Popover.Root key={size} size={size}>
        <Popover.Trigger>
          <Button>Size ({size})</Button>
        </Popover.Trigger>

        <Popover.Content>
          <Popover.Header>花京院典明</Popover.Header>
          <Popover.Body>レロレロレロレロレロレロ</Popover.Body>
        </Popover.Content>
      </Popover.Root>
    )}
  </For>
</Wrap>
```

### Add Footer

```tsx
<Popover.Root>
  <Popover.Trigger>
    <Button>Click Me</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>ジョルノ・ジョバァーナ</Popover.Header>
    <Popover.Body>僕には夢がある</Popover.Body>
    <Popover.Footer>黄金の風</Popover.Footer>
  </Popover.Content>
</Popover.Root>
```

### Display Popover on Different Element

To display a popover on a different element, use `Popover.Anchor`.

```tsx
<Popover.Root>
  <Wrap gap="md">
    <Popover.Anchor>
      <Center borderWidth="1px" h="10" px="3" rounded="l2">
        Here Display Popover
      </Center>
    </Popover.Anchor>

    <Popover.Trigger>
      <Button>Click Me</Button>
    </Popover.Trigger>
  </Wrap>

  <Popover.Content>
    <Popover.Header>ジョセフ・ジョースター</Popover.Header>
    <Popover.Body>お前の次のセリフは…「そんなバカな！」と言う</Popover.Body>
  </Popover.Content>
</Popover.Root>
```

### Change Animation

To change the animation, set `animationScheme` to `"block-start"`, `"inline-end"`, etc. By default, `"scale"` is set.

```tsx
<Wrap gap="md">
  <For
    each={["scale", "block-start", "inline-start", "inline-end", "block-end"]}
  >
    {(animationScheme) => (
      <Popover.Root key={animationScheme} animationScheme={animationScheme}>
        <Popover.Trigger>
          <Button>{toTitleCase(animationScheme)}</Button>
        </Popover.Trigger>

        <Popover.Content>
          <Popover.Header>ブローノ・ブチャラティ</Popover.Header>
          <Popover.Body>アリーヴェデルチ（さよならだ）</Popover.Body>
        </Popover.Content>
      </Popover.Root>
    )}
  </For>
</Wrap>
```

### Change Placement

To change the placement, set `placement` to `"start"`, `"end-end"`, etc. By default, `"end"` is set.

```tsx
<Wrap gap="md">
  <For
    each={[
      "start",
      "start-start",
      "start-end",
      "end",
      "end-start",
      "end-end",
      "center-start",
      "center-start-start",
      "center-start-end",
      "center-end",
      "center-end-start",
      "center-end-end",
    ]}
  >
    {(placement) => (
      <Popover.Root key={placement} placement={placement}>
        <Popover.Trigger>
          <Button>{toTitleCase(placement)}</Button>
        </Popover.Trigger>

        <Popover.Content>
          <Popover.Header>ディアボロ</Popover.Header>
          <Popover.Body>これが…レクイエム…だ</Popover.Body>
        </Popover.Content>
      </Popover.Root>
    )}
  </For>
</Wrap>
```

### Change Duration

To change the duration, set `duration` to a number (seconds).

```tsx
<Popover.Root duration={0.7}>
  <Popover.Trigger>
    <Button>Click Me</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>吉良吉影</Popover.Header>
    <Popover.Body>僕は平穏に暮らしたいだけなんだ</Popover.Body>
  </Popover.Content>
</Popover.Root>
```

### Change Offset

To change the offset, set `gutter` or `offset` to a value.

```tsx
<HStack>
  <Popover.Root gutter={32}>
    <Popover.Trigger>
      <Button>Gutter</Button>
    </Popover.Trigger>

    <Popover.Content>
      <Popover.Header>東方仗助</Popover.Header>
      <Popover.Body>グレートだぜ</Popover.Body>
    </Popover.Content>
  </Popover.Root>

  <Popover.Root offset={[16, 16]}>
    <Popover.Trigger>
      <Button>Offset</Button>
    </Popover.Trigger>
    <Popover.Content>
      <Popover.Header>東方仗助</Popover.Header>
      <Popover.Body>グレートだぜ</Popover.Body>
    </Popover.Content>
  </Popover.Root>
</HStack>
```

### Use Modal

To use modal, set `modal` to `true`. This enables scroll blocking and focus trapping.

```tsx
<Popover.Root modal>
  <Popover.Trigger>
    <Button>Open Profile</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>フーゴ・パンナコッタ</Popover.Header>
    <Popover.Body>
      <Field.Root label="スタンド名">
        <Input placeholder="パープル・ヘイズ" />
      </Field.Root>

      <Field.Root label="能力">
        <Input type="text" placeholder="ウイルス散布" />
      </Field.Root>
    </Popover.Body>
  </Popover.Content>
</Popover.Root>
```

### Disable

To disable the popover, set `disabled` to `true`.

```tsx
<Popover.Root disabled>
  <Popover.Trigger>
    <Button>Click Me</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>虹村億泰</Popover.Header>
    <Popover.Body>おい、仗助！</Popover.Body>
  </Popover.Content>
</Popover.Root>
```

### Disable Close on Outside Click

To disable closing when clicking outside, set `closeOnBlur` to `false`.

```tsx
<Popover.Root closeOnBlur={false}>
  <Popover.Trigger>
    <Button>No Close on Blur</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>イギー</Popover.Header>
    <Popover.Body>んがくく（犬の鳴き声）</Popover.Body>
  </Popover.Content>
</Popover.Root>
```

### Disable Close on ESC Key

To disable closing when pressing the ESC key, set `closeOnEsc` to `false`.

```tsx
<Popover.Root closeOnEsc={false}>
  <Popover.Trigger>
    <Button>No Close on ESC</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>ディオ・ブランドー</Popover.Header>
    <Popover.Body>無駄無駄無駄！</Popover.Body>
  </Popover.Content>
</Popover.Root>
```

### Disable Auto Focus

To disable automatic focus when the popover opens, set `autoFocus` to `false`.

```tsx
<Popover.Root autoFocus={false}>
  <Popover.Trigger>
    <Button>No Auto Focus</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>岸辺露伴</Popover.Header>
    <Popover.Body>
      <Field.Root label="職業">
        <Input placeholder="漫画家" />
      </Field.Root>
    </Popover.Body>
  </Popover.Content>
</Popover.Root>
```

### Set Initial Focus

To set the initial focus, pass a `Ref` to `initialFocusRef`.

```tsx
const inputRef = useRef<HTMLInputElement>(null)

return (
  <Popover.Root initialFocusRef={inputRef}>
    <Popover.Trigger>
      <Button>Focus Email Input</Button>
    </Popover.Trigger>

    <Popover.Content>
      <Popover.Header>ナランチャ・ギルガ</Popover.Header>
      <Popover.Body>
        <Field.Root label="スタンド名">
          <Input placeholder="エアロスミス" />
        </Field.Root>

        <Field.Root label="好きなもの">
          <Input ref={inputRef} type="text" placeholder="飛行機とピザ" />
        </Field.Root>
      </Popover.Body>
    </Popover.Content>
  </Popover.Root>
)
```

### Block Scroll

To block scrolling while the popover is open, set `blockScrollOnMount` to `true`.

```tsx
<Popover.Root blockScrollOnMount>
  <Popover.Trigger>
    <Button>Block Scroll</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>岸辺露伴</Popover.Header>
    <Popover.Body>だが断る</Popover.Body>
  </Popover.Content>
</Popover.Root>
```

### Close on Scroll

To automatically close the popover when scrolling, set `closeOnScroll` to `true`.

```tsx
<Popover.Root closeOnScroll>
  <Popover.Trigger>
    <Button>Close on Scroll</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>ギアッチョ</Popover.Header>
    <Popover.Body>根掘り葉掘り聞きやがって！</Popover.Body>
  </Popover.Content>
</Popover.Root>
```

### Nest Popovers

```tsx
<Popover.Root>
  <Popover.Trigger>
    <Button>Open Parent</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>花京院典明</Popover.Header>
    <Popover.Body>
      <Text>やはりエジプトか……いつ出発する？</Text>

      <Popover.Root>
        <Popover.Trigger>
          <Button>わたしも同行する</Button>
        </Popover.Trigger>

        <Popover.Content>
          <Popover.Header>空条承太郎</Popover.Header>
          <Popover.Body>花京院</Popover.Body>
        </Popover.Content>
      </Popover.Root>
    </Popover.Body>
  </Popover.Content>
</Popover.Root>
```

### Control

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

return (
  <Popover.Root open={open} onClose={onClose} onOpen={onOpen}>
    <Popover.Trigger>
      <Button>Click Me</Button>
    </Popover.Trigger>

    <Popover.Content>
      <Popover.Header>スピードワゴン</Popover.Header>
      <Popover.Body>
        こいつはくせえッー！ ゲロ以下のにおいがプンプンするぜッーーーーッ!!
      </Popover.Body>
    </Popover.Content>
  </Popover.Root>
)
```

## Props

### Popover.Root

| Prop                 | Default   | Type                                                                                      | Description                                                                                   |
| -------------------- | --------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| `size`               | `"md"`    | `"lg" \| "md" \| "sm" \| "xs"`                                                            | The size of the component.                                                                    |
| `anchor`             | -         | `ReactNode`                                                                               | The popover anchor to use.                                                                    |
| `anchorProps`        | -         | `Omit<PopoverAnchorProps, "asChild" \| "children">`                                       | Props for anchor element.                                                                     |
| `animationScheme`    | `"scale"` | `"block-end" \| "block-start" \| "inline-end" \| "inline-start" \| "none" \| "scale" ...` | The animation of the element.                                                                 |
| `autoFocus`          | `true`    | `boolean`                                                                                 | If `true`, focus will be transferred to the first interactive element when the popover opens. |
| `autoUpdate`         | `true`    | `boolean`                                                                                 | If `true`, automatically updates the position of the floating element when necessary.         |
| `blockScrollOnMount` | `false`   | `boolean`                                                                                 | If `true`, scrolling will be disabled on the `body` when the modal opens.                     |
| `body`               | -         | `PopoverBodyProps \| ReactNode`                                                           | The popover body to use.                                                                      |
| `bodyProps`          | -         | `Omit<PopoverBodyProps, "children">`                                                      | Props for body element.                                                                       |
| `children`           | -         | `ReactNodeOrFunction<{                                                                    |

    open: boolean
    onClose: () => void

}>`| The children of the popover. |
|`closeOnBlur`|`true`|`boolean`| If`true`, the popover will close when you blur out it by clicking outside or tabbing out. |
| `closeOnEsc`|`true`|`boolean`| If`true`, the popover will hide on pressing Esc key. |
| `closeOnScroll`|`false`|`boolean`| If`true`, the popover will hide on scroll. |
| `closeTriggerProps`| - |`Omit<PopoverCloseTriggerProps, "asChild" \| "children">`| Props for close trigger element. |
|`contentProps`| - |`Omit<PopoverContentProps, "children">`| Props for content element. |
|`defaultOpen`| - |`boolean`| If`true`, the element will be initially opened. |
| `disabled`|`false`|`boolean`| If`true`, the popover will be disabled. |
| `duration`|`0.1`|`MotionLifecycleProps<number> \| number`| The animation duration. |
|`elements`| - |`{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined; }`| Object containing the reference and floating elements. |
|`flip`|`true`|`boolean`| If`true`, the popper will change its placement and flip when it's about to overflow its boundary area. |
| `footer`| - |`PopoverFooterProps \| ReactNode`| The popover footer to use. |
|`footerProps`| - |`Omit<PopoverFooterProps, "children">`| Props for footer element. |
|`gutter`|`8`|`number`| The distance or margin between the reference and popper. It is used internally to create an`offset`modifier. |
|`header`| - |`PopoverHeaderProps \| ReactNode`| The popover header to use. |
|`headerProps`| - |`Omit<PopoverHeaderProps, "children">`| Props for header element. |
|`initialFocusRef`| - |`RefObject<HTMLElement \| null>`| The`ref`of the element that should receive focus when the popover opens. |
|`matchWidth`|`false`|`boolean`| If`true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker`and`select`patterns. |
|`middleware`| - |`(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: { detectOverflow: (state: MiddlewareState, options?: DetectOverflowOptions \| Derivable<...> \| undefined) => Promise<...>; } & Platform; ... 4 more ...; elements: Elements; }) => Promisable<...>; } \| null \| und...`| Array of middleware objects to modify the positioning or provide data for rendering. |
|`modal`|`false`|`boolean`| If`true`, the popover will be modal.  - scrolling is blocked. - focus is trapped within the popover. |
| `offset`| - |`[number, number]`| The main and cross-axis offset to displace popper element from its reference element. |
|`onClose`| - |`() => void \| Promise<void>`| Callback invoked to close the element. |
|`onOpen`| - |`() => void \| Promise<void>`| Callback invoked to open the element. |
|`open`| - |`boolean`| If`true`, the element will be opened. |
| `openOnClick`|`true`|`boolean`| If`true`, the popover will be opened when click on the field. |
| `placement`|`"end"`|`"center-end-end" \| "center-end-start" \| "center-end" \| "center-start-end" \| "center-start-start" \| "center-start" \| "end-center" \| "end-end" \| "end-start" \| "end" ...`| The placement of the popper relative to its reference. |
|`platform`| - |`Platform`| Custom or extended platform object. |
|`preventOverflow`|`true`|`boolean`| If`true`, will prevent the popper from being cut off and ensure it's visible within the boundary area. |
| `strategy`|`"absolute"`|`"absolute" \| "fixed"`| The CSS positioning strategy to use. |
|`transferFocus`|`true`|`boolean`| If`true`, the focus will be transferred to the popover content when the tab key is pressed. |
| `transform`|`true`|`boolean`| Whether to use`transform`for positioning instead of`top`and`left`(layout) in the`floatingStyles`object. |
|`trigger`| - |`ReactNode`| The popover trigger to use. |
|`triggerProps`| - |`Omit<PopoverTriggerProps, "asChild" \| "children">`| Props for trigger element. |
|`updateRef`| - |`RefObject<() => void>`| Update the position of the floating element, re-rendering the component if required. |
|`whileElementsMounted`| - |`(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void`| A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass`autoUpdate`). |

### Popover.Anchor

| 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.                |

### Popover.Body

| 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.                |

### Popover.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.                |

### Popover.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.                |
| `portalProps`     | -       | `Omit<PortalProps, "children">`                                                                                           | Props for portal component.                |
| `positionerProps` | -       | `Omit<PopoverPositionerProps, "children">`                                                                                | Props for positioner component.            |

### Popover.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.                |

### Popover.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.                |

### Popover.Trigger

| 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.                |

## Accessibility

The `Popover` follows the [WAI-ARIA - Dialog (Modal) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) for accessibility.

### Keyboard Navigation

| Key             | Description                                                                                                             | State                               |
| --------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
| `Tab`           | Focuses the next element within the popover that is not disabled. If it's the last element, the popover is closed.      | `open={true}`                       |
| `Shift` + `Tab` | Focuses the previous element within the popover that is not disabled. If it's the first element, the popover is closed. | `open={true}`                       |
| `Escape`        | Closes the popover.                                                                                                     | `open={true}` + `closeOnEsc={true}` |

### ARIA Roles and Attributes

| Element                      | Roles and Attributes     | Usage                                                                                            |
| :--------------------------- | :----------------------- | :----------------------------------------------------------------------------------------------- |
| `div.ui-popover__content`    | `role="dialog"`          | Indicates that it is a dialog.                                                                   |
|                              | `id`                     | Used to associate with `button.ui-popover__trigger`.                                             |
|                              | `aria-labelledby`        | Sets the `id` of the associated `div.ui-popover__header`.                                        |
|                              | `aria-describedby`       | Sets the `id` of the associated `div.ui-popover__body`.                                          |
|                              | `aria-hidden`            | Sets to `"false"` when popover is opened, and `"true"` when it is closed.                        |
|                              | `aria-modal`             | Sets to `"true"` when `modal={true}`.                                                            |
| `button.ui-popover__trigger` | `role="button"`          | Indicates that it is a button.                                                                   |
|                              | `aria-disabled`          | Sets to `"true"` when `disabled={true}`.                                                         |
|                              | `aria-expanded`          | Sets to `"true"` when popover is opened, and `"false"` when it is closed.                        |
|                              | `aria-controls`          | Set to `div.ui-popover__content`'s id when popover is opened, and `undefined` when it is closed. |
|                              | `aria-haspopup="dialog"` | Indicates that it triggers a dialog.                                                             |
| `div.ui-popover__header`     | `id`                     | Used to associate with `div.ui-popover__content`.                                                |
| `div.ui-popover__body`       | `id`                     | Used to associate with `div.ui-popover__content`.                                                |

## Similar Components

- [Tooltip](https://yamada-ui.com/docs/components/tooltip.md): `Tooltip` is a component that displays short information, such as supplementary details for an element.
- [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen.
- [Modal](https://yamada-ui.com/docs/components/modal.md): `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.
- [NativePopover](https://yamada-ui.com/docs/components/native-popover.md): `NativePopover` is a component that floats around an element to display information using the HTML Popover API.
- [ActionBar](https://yamada-ui.com/docs/components/action-bar.md): `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
- [Menu](https://yamada-ui.com/docs/components/menu.md): `Menu` is a component that displays a common dropdown menu.

## Uses Components & Hooks

- [NativePopover](https://yamada-ui.com/docs/components/native-popover.md): `NativePopover` is a component that floats around an element to display information using the HTML Popover API.
- [Button](https://yamada-ui.com/docs/components/button.md): `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.
- [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`.
- [Portal](https://yamada-ui.com/docs/components/portal.md): `Portal` is a component that renders elements outside of the current `DOM` hierarchy.
- [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element.
- [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md): `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position.

- [useValue](https://yamada-ui.com/docs/hooks/use-value.md): `useValue` is a custom hook that combines `useBreakpointValue` and `useColorModeValue`.
- [useDisclosure](https://yamada-ui.com/docs/hooks/use-disclosure.md): `useDisclosure` is a custom hook that helps handle common open/close or toggle scenarios. It can be used to control components such as `Modal`, `Dialog`, `Drawer`, etc.
- [useOutsideClick](https://yamada-ui.com/docs/hooks/use-outside-click.md): `useOutsideClick` is a custom hook that detects click events outside of an element.

## Used By Components & Hooks

- [ActionBar](https://yamada-ui.com/docs/components/action-bar.md): `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
- [Autocomplete](https://yamada-ui.com/docs/components/autocomplete.md): `Autocomplete` is a component used to display suggestions in response to user text input.
- [ColorPicker](https://yamada-ui.com/docs/components/color-picker.md): `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.
- [DatePicker](https://yamada-ui.com/docs/components/date-picker.md): `DatePicker` is a component used for users to select a date.
- [Menu](https://yamada-ui.com/docs/components/menu.md): `Menu` is a component that displays a common dropdown menu.
- [Modal](https://yamada-ui.com/docs/components/modal.md): `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.
- [Select](https://yamada-ui.com/docs/components/select.md): `Select` is a component used for allowing a user to choose values from a list of options.
- [Tooltip](https://yamada-ui.com/docs/components/tooltip.md): `Tooltip` is a component that displays short information, such as supplementary details for an element.