Radix homepageRadix Homepage
PrimitivesAlpha

Popover

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

import React from 'react';
import { styled, keyframes } from '@stitches/react';
import { violet, mauve, blackA } from '@radix-ui/colors';
import { MixerHorizontalIcon, Cross2Icon } from '@radix-ui/react-icons';
import * as PopoverPrimitive from '@radix-ui/react-popover';
const slideUpAndFade = keyframes({
'0%': { opacity: 0, transform: 'translateY(2px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
});
const slideRightAndFade = keyframes({
'0%': { opacity: 0, transform: 'translateX(-2px)' },
'100%': { opacity: 1, transform: 'translateX(0)' },
});
const slideDownAndFade = keyframes({
'0%': { opacity: 0, transform: 'translateY(-2px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
});
const slideLeftAndFade = keyframes({
'0%': { opacity: 0, transform: 'translateX(2px)' },
'100%': { opacity: 1, transform: 'translateX(0)' },
});
const StyledContent = styled(PopoverPrimitive.Content, {
borderRadius: 4,
padding: 20,
width: 260,
backgroundColor: 'white',
boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
'@media (prefers-reduced-motion: no-preference)': {
animationDuration: '400ms',
animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
willChange: 'transform, opacity',
'&[data-state="open"]': {
'&[data-side="top"]': { animationName: slideDownAndFade },
'&[data-side="right"]': { animationName: slideLeftAndFade },
'&[data-side="bottom"]': { animationName: slideUpAndFade },
'&[data-side="left"]': { animationName: slideRightAndFade },
},
},
'&:focus': {
boxShadow: `hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px, 0 0 0 2px ${violet.violet7}`,
},
});
const StyledArrow = styled(PopoverPrimitive.Arrow, {
fill: 'white',
});
const StyledClose = styled(PopoverPrimitive.Close, {
all: 'unset',
fontFamily: 'inherit',
borderRadius: '100%',
height: 25,
width: 25,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
color: violet.violet11,
position: 'absolute',
top: 5,
right: 5,
'&:hover': { backgroundColor: violet.violet4 },
'&:focus': { boxShadow: `0 0 0 2px ${violet.violet7}` },
});
// Exports
export const Popover = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;
export const PopoverContent = StyledContent;
export const PopoverArrow = StyledArrow;
export const PopoverClose = StyledClose;
// Your app...
const Flex = styled('div', { display: 'flex' });
const IconButton = styled('button', {
all: 'unset',
fontFamily: 'inherit',
borderRadius: '100%',
height: 35,
width: 35,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
color: violet.violet11,
backgroundColor: 'white',
boxShadow: `0 2px 10px ${blackA.blackA7}`,
'&:hover': { backgroundColor: violet.violet3 },
'&:focus': { boxShadow: `0 0 0 2px black` },
});
const Fieldset = styled('fieldset', {
all: 'unset',
display: 'flex',
gap: 20,
alignItems: 'center',
});
const Label = styled('label', {
fontSize: 13,
color: violet.violet11,
width: 75,
});
const Input = styled('input', {
all: 'unset',
width: '100%',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
flex: '1',
borderRadius: 4,
padding: '0 10px',
fontSize: 13,
lineHeight: 1,
color: violet.violet11,
boxShadow: `0 0 0 1px ${violet.violet7}`,
height: 25,
'&:focus': { boxShadow: `0 0 0 2px ${violet.violet8}` },
});
const Text = styled('div', {
margin: 0,
color: mauve.mauve12,
fontSize: 15,
lineHeight: '19px',
variants: {
faded: {
true: { color: mauve.mauve10 },
},
bold: {
true: { fontWeight: 500 },
},
},
});
const PopoverDemo = () => (
<Popover>
<PopoverTrigger as={IconButton} aria-label="Update dimensions">
<MixerHorizontalIcon />
</PopoverTrigger>
<PopoverContent sideOffset={5} >
<Flex css={{ flexDirection: 'column', gap: 10 }}>
<Text bold css={{ marginBottom: 10 }}>
Dimensions
</Text>
<Fieldset>
<Label htmlFor="width">Width</Label>
<Input id="width" defaultValue="100%" />
</Fieldset>
<Fieldset>
<Label htmlFor="maxWidth">Max. width</Label>
<Input id="maxWidth" defaultValue="300px" />
</Fieldset>
<Fieldset>
<Label htmlFor="height">Height</Label>
<Input id="height" defaultValue="25px" />
</Fieldset>
<Fieldset>
<Label htmlFor="maxHeight">Max. height</Label>
<Input id="maxHeight" defaultValue="none" />
</Fieldset>
</Flex>
<PopoverArrow />
<PopoverClose aria-label="Close">
<Cross2Icon />
</PopoverClose>
</PopoverContent>
</Popover>
);
export default PopoverDemo;

Features

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

Install the component from your command line.

npm install @radix-ui/react-popover

Import all parts and piece them together.

import * as Popover from '@radix-ui/react-popover';
export default () => (
<Popover.Root>
<Popover.Trigger />
<Popover.Anchor />
<Popover.Content>
<Popover.Close />
<Popover.Arrow />
</Popover.Content>
</Popover.Root>
);

Contains all the parts of a popover.

PropTypeDefault
defaultOpenbooleanNo default value
openbooleanNo default value
onOpenChangefunctionNo default value

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

PropTypeDefault
asenumbutton

An optional element to position the Popover.Content against. If this part is not used, the content will position alongside the Popover.Trigger.

PropTypeDefault
asenumdiv

The component that pops out when the popover is open.

PropTypeDefault
asenumdiv
trapFocusbooleantrue
onOpenAutoFocusfunctionNo default value
onCloseAutoFocusfunctionNo default value
disableOutsidePointerEventsbooleanfalse
onEscapeKeyDownfunctionNo default value
onPointerDownOutsidefunctionNo default value
onFocusOutsidefunctionNo default value
onInteractOutsidefunctionNo default value
disableOutsideScrollbooleanfalse
portalledbooleantrue
forceMountbooleanNo default value
sideenum"bottom"
sideOffsetnumber0
alignenum"center"
alignOffsetnumber0
avoidCollisionsbooleantrue
collisionToleranceboolean0

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

PropTypeDefault
asenumsvg
widthnumber10
heightnumber5
offsetnumberNo default value

The button that closes an open popover.

PropTypeDefault
asenumbutton

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.

import { styled, keyframes } from '@stitches/react';
import * as Popover from '@radix-ui/react-popover';
const scaleIn = keyframes({
'0%': { opacity: 0, transform: 'scale(0)' },
'100%': { opacity: 1, transform: 'scale(1)' },
});
const StyledContent = styled(Popover.Content, {
transformOrigin: 'var(--radix-popover-content-transform-origin)',
animation: `${scaleIn} 0.5s ease-out`,
});
export default () => (
<Popover.Root>
<Popover.Trigger></Popover.Trigger>
<StyledContent></StyledContent>
</Popover.Root>
);

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.

import { styled, keyframes } from '@stitches/react';
import * as Popover from '@radix-ui/react-popover';
const slideDown = keyframes({
'0%': { opacity: 0, transform: 'translateY(-10px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
});
const slideUp = keyframes({
'0%': { opacity: 0, transform: 'translateY(10px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
});
const StyledContent = styled(Popover.Content, {
animationDuration: '0.6s',
animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
'&[data-side="top"]': { animationName: slideUp },
'&[data-side="bottom"]': { animationName: slideDown },
});
export default () => (
<Popover.Root>
<Popover.Trigger></Popover.Trigger>
<StyledContent></StyledContent>
</Popover.Root>
);

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

import { styled } from 'path-to/stitches.config';
import * as Popover from '@radix-ui/react-popover';
const StyledContent = styled(Popover.Content, {
borderRadius: 3,
padding: '20px',
fontSize: 14,
backgroundColor: 'gainsboro',
color: 'black',
});
const StyledArrow = styled(Popover.Arrow, {
fill: 'gainsboro',
});
const StyledAnchor = styled(Popover.Anchor, {
background: 'gainsboro',
padding: 20,
});
export default () => (
<Popover.Root>
<StyledAnchor>
Row as anchor <Popover.Trigger>Trigger</Popover.Trigger>
</StyledAnchor>
<StyledContent>
<h3>Popover content</h3>
<p>Are you sure you wanna do this?</p>
<Popover.Close>Yes</Popover.Close>
<StyledArrow />
</StyledContent>
</Popover.Root>
);

Adheres to the Dialog WAI-ARIA design pattern.

KeyDescription
SpaceOpens/closes the popover.
EnterOpens/closes the popover.
TabMoves focus to the next focusable element
Shift + TabMoves focus to the previous focusable element
EscCloses the popover and moves focus to Popover.Trigger.

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

Abstract the arrow and set default configuration

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

Usage

import { Popover, PopoverTrigger, PopoverContent } from './your-popover';
export default () => (
<Popover>
<PopoverTrigger>Popover trigger</PopoverTrigger>
<PopoverContent>Popover content</PopoverContent>
</Popover>
);

Implementation

// your-popover.js
import React from 'react';
import * as PopoverPrimitive from '@radix-ui/react-popover';
export const Popover = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;
export const PopoverContent = React.forwardRef(
({ children, ...props }, forwardedRef) => (
<PopoverPrimitive.Content sideOffset={5} {...props} ref={forwardedRef}>
{children}
<PopoverPrimitive.Arrow />
</PopoverPrimitive.Content>
)
);