npm install @radix-ui/react-popover

import { Popover } from "radix-ui";

export default () => (
	<Popover.Root>
		<Popover.Trigger />
		<Popover.Anchor />
		<Popover.Portal>
			<Popover.Content>
				<Popover.Close />
				<Popover.Arrow />
			</Popover.Content>
		</Popover.Portal>
	</Popover.Root>
);

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "onOpenAutoFocus",
		type: "(event: Event) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when focus moves into the component after
				opening. It can be prevented by calling{" "}
				<Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onCloseAutoFocus",
		type: "(event: Event) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when focus moves to the trigger after closing. It
				can be prevented by calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onEscapeKeyDown",
		type: "(event: KeyboardEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the escape key is down. It can be prevented
				by calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onPointerDownOutside",
		type: "(event: PointerDownOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when a pointer event occurs outside the bounds of
				the component. It can be prevented by calling{" "}
				<Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onFocusOutside",
		type: "(event: FocusOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when focus moves outside the bounds of the
				component. It can be prevented by calling{" "}
				<Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onInteractOutside",
		type: "(event: PointerDownOutsideEvent | FocusOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when an interaction (pointer or focus event)
				happens outside the bounds of the component. It can be prevented by
				calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "forceMount",
		type: "boolean",
		description: (
			<span>
				Used to force mounting when more control is needed. Useful when
				controlling animation with React animation libraries. It inherits from{" "}
				<Code>Popover.Portal</Code>.
			</span>
		),
	},
	{
		name: "side",
		type: '"top" | "right" | "bottom" | "left"',
		typeSimple: "enum",
		default: '"bottom"',
		description: (
			<span>
				The preferred side of the anchor to render against when open. Will be
				reversed when collisions occur and <Code>avoidCollisions</Code> is
				enabled.
			</span>
		),
	},
	{
		name: "sideOffset",
		type: "number",
		default: "0",
		description: <span>The distance in pixels from the anchor.</span>,
	},
	{
		name: "align",
		type: '"start" | "center" | "end"',
		typeSimple: "enum",
		default: '"center"',
		description: (
			<span>
				The preferred alignment against the anchor. May change when collisions
				occur.
			</span>
		),
	},
	{
		name: "alignOffset",
		type: "number",
		default: "0",
		description: (
			<span>
				An offset in pixels from the <Code>"start"</Code> or{" "}
				<Code>"end"</Code> alignment options.
			</span>
		),
	},
	{
		name: "avoidCollisions",
		type: "boolean",
		default: "true",
		description: (
			<span>
				When <Code>true</Code>, overrides the <Code>side</Code> and
				<Code>align</Code> preferences to prevent collisions with boundary
				edges.
			</span>
		),
	},
	{
		name: "collisionBoundary",
		type: "Element | null | Array<Element | null>",
		typeSimple: "Boundary",
		default: "[]",
		description: (
			<span>
				The element used as the collision boundary. By default this is the
				viewport, though you can provide additional element(s) to be included
				in this check.
			</span>
		),
	},
	{
		name: "collisionPadding",
		type: "number | Partial<Record<Side, number>>",
		typeSimple: "number | Padding",
		default: "0",
		description: (
			<span>
				The distance in pixels from the boundary edges where collision
				detection should occur. Accepts a number (same for all sides), or a
				partial padding object, for example:{" "}
				<Code>{`{ top: 20, left: 20 }`}</Code>.
			</span>
		),
	},
	{
		name: "arrowPadding",
		type: "number",
		default: "0",
		description: (
			<span>
				The padding between the arrow and the edges of the content. If your
				content has <Code>border-radius</Code>, this will prevent it from
				overflowing the corners.
			</span>
		),
	},
	{
		name: "sticky",
		type: '"partial" | "always"',
		typeSimple: "enum",
		default: '"partial"',
		description: (
			<span>
				The sticky behavior on the align axis. <Code>"partial"</Code> will
				keep the content in the boundary as long as the trigger is at least
				partially in the boundary whilst <Code>"always"</Code> will keep the
				content in the boundary regardless.
			</span>
		),
	},
	{
		name: "hideWhenDetached",
		type: "boolean",
		default: "false",
		description: (
			<span>
				Whether to hide the content when the trigger becomes fully occluded.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "width",
		type: "number",
		default: 10,
		description: <span>The width of the arrow in pixels.</span>,
	},
	{
		name: "height",
		type: "number",
		default: 5,
		description: <span>The height of the arrow in pixels.</span>,
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

// index.jsx
import { Popover } from "radix-ui";
import "./styles.css";

export default () => (
	<Popover.Root>
		<Popover.Trigger>…</Popover.Trigger>
		<Popover.Portal>
			<Popover.Content __className__="PopoverContent" sideOffset={5}>
				…
			</Popover.Content>
		</Popover.Portal>
	</Popover.Root>
);

/* styles.css */
.PopoverContent {
	width: var(__--radix-popover-trigger-width__);
	max-height: var(__--radix-popover-content-available-height__);
}

// index.jsx
import { Popover } from "radix-ui";
import "./styles.css";

export default () => (
	<Popover.Root>
		<Popover.Trigger>…</Popover.Trigger>
		<Popover.Portal>
			<Popover.Content __className__="PopoverContent">…</Popover.Content>
		</Popover.Portal>
	</Popover.Root>
);

/* 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);
	}
}

// index.jsx
import { Popover } from "radix-ui";
import "./styles.css";

export default () => (
	<Popover.Root>
		<Popover.Trigger>…</Popover.Trigger>
		<Popover.Portal>
			<Popover.Content __className__="PopoverContent">…</Popover.Content>
		</Popover.Portal>
	</Popover.Root>
);

/* 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);
	}
}

// index.jsx
import { Popover } from "radix-ui";
import "./styles.css";

export default () => (
	<Popover.Root>
		<Popover.Anchor __asChild__>
			<div className="Row">
				Row as anchor <Popover.Trigger>Trigger</Popover.Trigger>
			</div>
		</Popover.Anchor>

		<Popover.Portal>
			<Popover.Content>…</Popover.Content>
		</Popover.Portal>
	</Popover.Root>
);

/* styles.css */
.Row {
	background-color: gainsboro;
	padding: 20px;
}

import { Popover, PopoverTrigger, PopoverContent } from "./your-popover";

export default () => (
	<Popover>
		<PopoverTrigger>Popover trigger</PopoverTrigger>
		<PopoverContent>Popover content</PopoverContent>
	</Popover>
);

// your-popover.jsx
import * as React from "react";
import { Popover as PopoverPrimitive } from "radix-ui";

export const Popover = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;

export const PopoverContent = React.forwardRef(
	({ children, ...props }, forwardedRef) => (
		<PopoverPrimitive.Portal>
			<PopoverPrimitive.Content sideOffset={5} {...props} ref={forwardedRef}>
				{children}
				<PopoverPrimitive.Arrow />
			</PopoverPrimitive.Content>
		</PopoverPrimitive.Portal>
	),
);