Radix Vue

Appearance

Popover ​

Displays rich content in a portal, triggered by a button.

Features ​

  • Can be controlled or uncontrolled.
  • Customize side, alignment, offsets, collision handling.
  • Optionally render a pointing arrow.
  • Focus is fully managed and customizable.
  • Supports modal and non-modal modes.
  • Dismissing and layering behavior is highly customizable.

Installation ​

Install the component from your command line.

bash
npm install radix-vue

Anatomy ​

Import all parts and piece them together.

vue
<script setup>
import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'radix-vue'
</script>

<template>
  <PopoverRoot>
    <PopoverTrigger />
    <PopoverAnchor />
    <PopoverPortal>
      <PopoverContent>
        <PopoverClose />
        <PopoverArrow />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>

API Reference ​

Root ​

Contains all the parts of a popover.

PropTypeDefault
defaultOpen
boolean
open
boolean
modal
boolean
false
EmitType
@update:open
(open: boolean) => void

Trigger ​

The button that toggles the popover. By default, the PopoverContent will position itself against the trigger.

PropTypeDefault
as
string | Component
button
asChild
boolean
false
Data AttributeValue
[data-state]"open" | "closed"

Anchor ​

An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.

PropTypeDefault
as
string | Component
div
asChild
boolean
false

Portal ​

When used, portals the content part into the body.

PropTypeDefault
to
string | HTMLElement
body

Content ​

The component that pops out when the popover is open.

PropTypeDefault
forceMount
boolean
side
enum
"bottom"
sideOffset
number
0
align
enum
"center"
alignOffset
number
0
avoidCollisions
boolean
true
collisionBoundary
Boundary
[]
collisionPadding
number | Padding
0
arrowPadding
number
0
sticky
enum
"partial"
hideWhenDetached
boolean
false
as
string | Component
div
asChild
boolean
false
EmitType
@openAutoFocus
(event: Event) => void
@closeAutoFocus
(event: Event) => void
@escapeKeyDown
(event: KeyboardEvent) => void
@pointerDownOutside
(event: PointerDownOutsideEvent) => void
@interactOutside
(event: FocusEvent | MouseEvent | TouchEvent) => void
Data AttributeValue
[data-state]"open" | "closed"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"
CSS VariableDescription
--radix-popover-content-transform-origin
The transform-origin computed from the content and arrow positions/offsets
--radix-popover-content-available-width
The remaining width between the trigger and the boundary edge
--radix-popover-content-available-height
The remaining height between the trigger and the boundary edge
--radix-popover-trigger-width
The width of the trigger
--radix-popover-trigger-height
The height of the trigger

Arrow ​

An optional arrow element to render alongside the popover. This can be used to help visually link the anchor with the PopoverContent. Must be rendered inside PopoverContent.

PropTypeDefault
as
string | Component
svg
asChild
boolean
false
width
number
10
height
number
5

Close ​

The button that closes an open popover.

PropTypeDefault
as
string | Component
button
asChild
boolean
false

Examples ​

Constrain the content size ​

You may want to constrain the width of the content so that it matches the trigger width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as --radix-popover-trigger-width and --radix-popover-content-available-height to support this. Use them to constrain the content dimensions.

vue
// index.vue
<script setup>
import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'radix-vue'
</script>

<template>
  <PopoverRoot>
    <PopoverTrigger>…</PopoverTrigger>
    <PopoverPortal>
      <PopoverContent class="PopoverContent" :side-offset="5">
        …
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>
css
/* styles.css */
.PopoverContent {
  width: var(--radix-popover-trigger-width);
  max-height: var(--radix-popover-content-available-height);
}

Origin-aware animations ​

We expose a CSS custom property --radix-popover-content-transform-origin. Use it to animate the content from its computed origin based on side, sideOffset, align, alignOffset and any collisions.

vue
// index.vue
<script setup>
import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'radix-vue'
</script>

<template>
  <PopoverRoot>
    <PopoverTrigger>…</PopoverTrigger>
    <PopoverPortal>
      <PopoverContent class="PopoverContent">
        …
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>
css
/* styles.css */
.PopoverContent {
  transform-origin: var(--radix-popover-content-transform-origin);
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

Collision-aware animations ​

We expose data-side and data-align attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

vue
// index.vue
<script setup>
import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'radix-vue'
</script>

<template>
  <PopoverRoot>
    <PopoverTrigger>…</PopoverTrigger>
    <PopoverPortal>
      <PopoverContent class="PopoverContent">
        …
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>
css
/* styles.css */
.PopoverContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.PopoverContent[data-side="top"] {
  animation-name: slideUp;
}
.PopoverContent[data-side="bottom"] {
  animation-name: slideDown;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

With custom anchor ​

You can anchor the content to another element if you do not want to use the trigger as the anchor.

vue
// index.vue
<script setup>
import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'radix-vue'
</script>

<template>
  <PopoverRoot>
    <PopoverAnchor as-child>
      <div class="Row">
        Row as anchor <PopoverTrigger>Trigger</PopoverTrigger>
      </div>
    </PopoverAnchor>

    <PopoverPortal>
      <PopoverContent>…</PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>
css
/* styles.css */
.Row {
  background-color: gainsboro;
  padding: 20px;
}

Accessibility ​

Adheres to the Dialog WAI-ARIA design pattern.

Keyboard Interactions ​

KeyDescription
Space
Opens/closes the popover.
Enter
Opens/closes the popover.
Tab
Moves focus to the next focusable element
Shift + Tab
Moves focus to the previous focusable element
Esc
Closes the popover and moves focus to PopoverTrigger.

Custom APIs ​

Create your own API by abstracting the primitive parts into your own component.

Abstract the arrow and set default configuration ​

This example abstracts the PopoverArrow part and sets a default sideOffset configuration.

Usage ​

vue
<script setup lang="ts">
import { Popover, PopoverContent, PopoverTrigger } from './your-popover'
</script>

<template>
  <Popover>
    <PopoverTrigger>Popover trigger</PopoverTrigger>
    <PopoverContent>Popover content</PopoverContent>
  </Popover>
</template>

Implementation ​

ts
// your-popover.ts
export { default as PopoverContent } from 'PopoverContent.vue'

export { PopoverRoot as Popover, PopoverTrigger } from 'radix-vue'
vue
<!-- PopoverContent.vue -->
<script setup lang="ts">
import { PopoverContent, type PopoverContentEmits, type PopoverContentProps, PopoverPortal, useForwardPropsEmits, } from 'radix-vue'

const props = defineProps<PopoverContentProps>()
const emits = defineEmits<PopoverContentEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <PopoverPortal>
    <PopoverContent v-bind="{ ...forwarded, ...$attrs }">
      <slot />
    </PopoverContent>
  </PopoverPortal>
</template>