Arrow

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.

number

default:"10"

The width of the arrow in pixels.

number

default:"5"

The height of the arrow in pixels.

boolean

default:"false"

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

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.

Overlays

Navigation

Forms

Layout

Data Display

Utilities

Overview

Features

Installation

Anatomy

API Reference

Root

Examples

Basic Usage

Custom Size

With Tooltip

Custom Arrow with asChild

Styling

Use with Popper Components

How It Works

Accessibility

​Overview

​Features

​Installation

​Anatomy

​API Reference

​Root

​Examples

​Basic Usage

​Custom Size

​With Tooltip

​Custom Arrow with asChild

​Styling

​Use with Popper Components

​How It Works

​Accessibility

Overview

Features

Installation

Anatomy

API Reference

Root

Examples

Basic Usage

Custom Size

With Tooltip

Custom Arrow with asChild

Styling

Use with Popper Components

How It Works

Accessibility