Getting started

A quick tutorial to get you up and running with Radix Primitives.

Implementing a Popover

In this quick tutorial, we will install and style the Popover component.

1. Install the primitive

Install the component from your command line.

npm install @radix-ui/react-popover@latest -E

2. Import the parts

Import and structure the parts.

nice code here


  // index.jsx
  import * as React from 'react';
  import * as Popover from '@radix-ui/react-popover';

  const PopoverDemo = () => (
    <Popover.Root>
      <Popover.Trigger>More info</Popover.Trigger>
      <Popover.Portal>
        <Popover.Content>
          Some more info…
          <Popover.Arrow />
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );

  export default PopoverDemo;

then normal code block

// index.jsx
import * as React from 'react';
import * as Popover from '@radix-ui/react-popover';

const PopoverDemo = () => (
  <Popover.Root>
    <Popover.Trigger>More info</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content>
        Some more info…
        <Popover.Arrow />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

export default PopoverDemo;

3. Add your styles

Add styles where desired.

// index.jsx
import * as React from 'react';
import * as Popover from '@radix-ui/react-popover';
import './styles.css';

const PopoverDemo = () => (
  <Popover.Root>
    <Popover.Trigger __className__="PopoverTrigger">Show info</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content __className__="PopoverContent">
        Some content
        <Popover.Arrow __className__="PopoverArrow" />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

export default PopoverDemo;

/* styles.css */
.PopoverTrigger {
  background-color: white;
  border-radius: 4px;
}

.PopoverContent {
  border-radius: 4px;
  padding: 20px;
  width: 260px;
  background-color: white;
}

.PopoverArrow {
  fill: white;
}

Demo

Here's a complete demo.

Summary

The steps above outline briefly what's involved in using a Radix Primitive in your application.

These components are low-level enough to give you control over how you want to wrap them. You're free to introduce your own high-level API to better suit the needs of your team and product.

In a few simple steps, we've implemented a fully accessible Popover component, without having to worry about many of its complexities.

Adheres to WAI-ARIA design pattern.
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.

PreviousIntroduction

NextAccessibility