Getting started

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

In this quick tutorial, we will install, style, and export a Popover component. This example uses Stitches, but any styling solution is compatible.

1. Install the primitive

Install the component from your command line.

npm install @radix-ui/react-popover

npm install @radix-ui/react-popover

2. Style each part

Import and export the parts. Add styles where desired.

// Popover.tsx
import { styled } from 'path-to/stitches.config';
import * as PopoverPrimitive from '@radix-ui/react-popover';

export const Popover = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;
export const PopoverContent = styled(PopoverPrimitive.Content, {
  backgroundColor: 'white',
  borderRadius: 6,
  boxShadow: '0px 10px 38px -10px hsla(206,22%,7%,.35)',
  overflow: 'hidden',
  '&:focus': {
    outline: 'none',
    boxShadow: '0 0 0 3px hsl(272,100%,96%)',
  },
});

// Popover.tsx
import { styled } from 'path-to/stitches.config';
import * as PopoverPrimitive from '@radix-ui/react-popover';
export const Popover = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;
export const PopoverContent = styled(PopoverPrimitive.Content, {
  backgroundColor: 'white',
  borderRadius: 6,
  boxShadow: '0px 10px 38px -10px hsla(206,22%,7%,.35)',
  overflow: 'hidden',
  '&:focus': {
    outline: 'none',
    boxShadow: '0 0 0 3px hsl(272,100%,96%)',
  },
});

3. Use it

Import each of the component parts into your app, then assemble your Popover.

// App.tsx
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from 'your-components/Popover';

function App() {
  return (
    <Popover>
      <PopoverTrigger>...</PopoverTrigger>
      <PopoverContent>...</PopoverContent>
    </Popover>
  );
}

// App.tsx
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from 'your-components/Popover';
function App() {
  return (
    <Popover>
      <PopoverTrigger>...</PopoverTrigger>
      <PopoverContent>...</PopoverContent>
    </Popover>
  );
}

Demo

import { styled } from 'path-to/stitches.config';
import * as PopoverPrimitive from '@radix-ui/react-popover';

const Popover = PopoverPrimitive.Root;
const PopoverTrigger = PopoverPrimitive.Trigger;
const PopoverContent = styled(PopoverPrimitive.Content, {
  backgroundColor: 'white',
  borderRadius: 6,
  boxShadow: '0px 10px 38px -10px hsla(206,22%,7%,.35)',
  overflow: 'hidden',

  '&:focus': {
    outline: 'none',
    boxShadow: '0 0 0 3px hsl(272,100%,96%)',
  },
});

// Other components in your App
const Box = styled('div', {});
const Text = styled('div', {
  fontSize: 16,
});
const Button = styled('button', {
  appearance: 'none',
  border: 'none',
  backgroundColor: 'transparent',
  border: '1px solid hsl(272,68%,70%)',
  color: 'hsl(272,62%,44%)',
  padding: '5px 15px',
  borderRadius: 4,

  '&:focus': {
    outline: 'none',
    boxShadow: '0 0 0 3px hsl(272,100%,96%)',
  },
});

export default () => (
  <Popover>
    <PopoverTrigger>Trigger</PopoverTrigger>
    <PopoverContent sideOffset={3}>
      <Box css={{ width: 320 }}>
        <img src="https://images.unsplash.com/photo-1596420667316-cb2b4f67fc6d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" />
        <Box css={{ padding: 20 }}>
          <Text css={{ fontWeight: 500 }}>Brian Lundquist</Text>
          <Text
            css={{
              margin: '5px 0 15px',
              color: 'slategray',
              fontSize: 14,
            }}
          >
            @bwl667
          </Text>
          <Button css={{ width: '100%' }}>Download</Button>
        </Box>
      </Box>
    </PopoverContent>
  </Popover>
);

import { styled } from 'path-to/stitches.config';
import * as PopoverPrimitive from '@radix-ui/react-popover';
const Popover = PopoverPrimitive.Root;
const PopoverTrigger = PopoverPrimitive.Trigger;
const PopoverContent = styled(PopoverPrimitive.Content, {
  backgroundColor: 'white',
  borderRadius: 6,
  boxShadow: '0px 10px 38px -10px hsla(206,22%,7%,.35)',
  overflow: 'hidden',
  '&:focus': {
    outline: 'none',
    boxShadow: '0 0 0 3px hsl(272,100%,96%)',
  },
});
// Other components in your App
const Box = styled('div', {});
const Text = styled('div', {
  fontSize: 16,
});
const Button = styled('button', {
  appearance: 'none',
  border: 'none',
  backgroundColor: 'transparent',
  border: '1px solid hsl(272,68%,70%)',
  color: 'hsl(272,62%,44%)',
  padding: '5px 15px',
  borderRadius: 4,
  '&:focus': {
    outline: 'none',
    boxShadow: '0 0 0 3px hsl(272,100%,96%)',
  },
});
export default () => (
  <Popover>
    <PopoverTrigger>Trigger</PopoverTrigger>
    <PopoverContent sideOffset={3}>
      <Box css={{ width: 320 }}>
        <img src="https://images.unsplash.com/photo-1596420667316-cb2b4f67fc6d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" />
        <Box css={{ padding: 20 }}>
          <Text css={{ fontWeight: 500 }}>Brian Lundquist</Text>
          <Text
            css={{
              margin: '5px 0 15px',
              color: 'slategray',
              fontSize: 14,
            }}
          >
            @bwl667
          </Text>
          <Button css={{ width: '100%' }}>Download</Button>
        </Box>
      </Box>
    </PopoverContent>
  </Popover>
);

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.
Customise side, alignment, offsets, collision handling.
Optionally render a pointing arrow.
Focus is fully managed and customizable.
Dismissing and layering behavior is highly customizable.

Implementing a Popover

1. Install the primitive

2. Style each part

3. Use it

Demo

Summary