Components

Popover

A non-modal dialog that floats around a trigger element.

Usage

Use a Button or any other component in the default slot of the Popover.

Then, use the #content slot to add the content displayed when the Popover is open.

<template>
  <UPopover>
    <UButton label="Open" color="gray" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </UPopover>
</template>

Mode

Use the mode prop to change the mode of the Popover. Defaults to click.

mode

<template>
  <UPopover mode="hover">
    <UButton label="Open" color="gray" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </UPopover>
</template>

When using the hover mode, the Radix Vue HoverCard component is used instead of the Popover.

Delay

When using the hover mode, you can use the open-delay and close-delay props to control the delay before the Popover is opened or closed.

openDelay

closeDelay

<template>
  <UPopover mode="hover" :open-delay="500" :close-delay="300">
    <UButton label="Open" color="gray" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </UPopover>
</template>

Content

Use the content prop to control how the Popover content is rendered, like its align or side for example.

content.align

content.side

content.sideOffset

<template>
  <UPopover
    :content="{
      align: 'center',
      side: 'bottom',
      sideOffset: 8
    }"
  >
    <UButton label="Open" color="gray" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </UPopover>
</template>

Arrow

Use the arrow prop to display an arrow on the Popover.

<template>
  <UPopover arrow>
    <UButton label="Open" color="gray" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </UPopover>
</template>

Examples

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <UPopover v-model:open="open">
    <UButton label="Open" color="gray" variant="subtle" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </UPopover>
</template>

In this example, press O to toggle the Popover.

With command palette

You can use a CommandPalette component inside the Popover's content.

<script setup lang="ts">
const labels = [{
  label: 'bug',
  chip: {
    color: 'red' as const
  }
}, {
  label: 'feature',
  chip: {
    color: 'green' as const
  }
}, {
  label: 'enhancement',
  chip: {
    color: 'blue' as const
  }
}]
const label = ref([])
</script>

<template>
  <UPopover :content="{ side: 'right', align: 'start' }">
    <UButton
      icon="i-heroicons-tag"
      label="Select labels"
      color="gray"
      variant="subtle"
    />

    <template #content>
      <UCommandPalette
        v-model="label"
        multiple
        placeholder="Search labels..."
        :groups="[{ id: 'labels', items: labels }]"
        :ui="{ input: '[&>input]:h-8' }"
      />
    </template>
  </UPopover>
</template>

API

Props

Prop	Default	Type
`mode`	`"click"`	`"click" \| "hover"` The display mode of the popover.
`content`	`{ side: 'bottom', sideOffset: 8 }`	`Omit<PopoverContentProps, "asChild" \| "as" \| "forceMount">` The content of the popover.
`arrow`	`false`	`boolean \| Omit<PopoverArrowProps, "asChild" \| "as">` Display an arrow alongside the popover.
`portal`	`true`	`boolean` Render the popover in a portal.
`defaultOpen`		`boolean` The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
`open`		`boolean` The controlled open state of the popover.
`modal`	`false`	`boolean` The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.
`openDelay`	`0`	`number` The duration from when the mouse enters the trigger until the hover card opens.
`closeDelay`	`0`	`number` The duration from when the mouse leaves the trigger or content until the hover card closes.
`ui`		`Partial<{ content: string; arrow: string; }>`

Slots

Slot	Type
`default`	`{ open: boolean; }`
`content`	`{}`

Emits

Event	Type
`update:open`	`[value: boolean]`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    popover: {
      slots: {
        content: 'bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
        arrow: 'fill-gray-200 dark:fill-gray-800'
      }
    }
  }
})

Pagination

A list of buttons or links to navigate through pages.

Progress

An indicator showing the progress of a task.