Overview
Arrow renders an SVG arrow element that can be used to point to referenced content in popovers, tooltips, and other floating elements. It’s typically positioned automatically by popper-based components.
Features
- Renders as an SVG element
- Customizable dimensions
- Works with Radix Popper-based components
- Can be replaced with custom content using
asChild
Installation
npm install @radix-ui/react-arrow
Anatomy
import * as Arrow from '@radix-ui/react-arrow';
export default () => <Arrow.Root />
API Reference
Root
The arrow component.
The width of the arrow in pixels.
The height of the arrow in pixels.
Change the default rendered element for the one passed as a child, merging their props and behavior.
Examples
Basic Usage
import * as Arrow from '@radix-ui/react-arrow';
import * as Popover from '@radix-ui/react-popover';
export default () => (
<Popover.Root>
<Popover.Trigger>Open</Popover.Trigger>
<Popover.Portal>
<Popover.Content>
<Popover.Arrow asChild>
<Arrow.Root />
</Popover.Arrow>
Popover content
</Popover.Content>
</Popover.Portal>
</Popover.Root>
);
Custom Size
import * as Arrow from '@radix-ui/react-arrow';
export default () => (
<Arrow.Root width={20} height={10} />
);
With Tooltip
import * as Arrow from '@radix-ui/react-arrow';
import * as Tooltip from '@radix-ui/react-tooltip';
export default () => (
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger>Hover me</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
style={{
backgroundColor: 'black',
color: 'white',
padding: 10,
borderRadius: 4,
}}
>
<Arrow.Root style={{ fill: 'black' }} />
Tooltip content
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);
Custom Arrow with asChild
import * as Arrow from '@radix-ui/react-arrow';
export default () => (
<Arrow.Root asChild>
<div
style={{
width: 0,
height: 0,
borderLeft: '10px solid transparent',
borderRight: '10px solid transparent',
borderBottom: '10px solid black',
}}
/>
</Arrow.Root>
);
Styling
The default arrow is an SVG with a simple triangle shape. You can style it using CSS:
/* Target the SVG */
[data-radix-arrow] {
fill: white;
}
/* Or style the polygon */
[data-radix-arrow] polygon {
fill: white;
}
Use with Popper Components
Arrow is designed to work with Radix’s Popper-based components:
- Popover
- Tooltip
- Dropdown Menu
- Context Menu
- Hover Card
These components automatically position the arrow to point at the trigger element.
How It Works
The Arrow component:
- Renders an SVG element with a triangle polygon by default
- Uses
preserveAspectRatio="none" to allow stretching
- Can be replaced entirely using the
asChild prop
- Is positioned by parent Popper components using CSS transforms
Accessibility
The arrow is purely decorative and doesn’t affect accessibility. It’s automatically hidden from screen readers.