Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Getting started

Implementing a Popover

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

1. Install the primitive

Use the local packed native package; this fork is private and is not published as radix-ui or @radix-solid/primitives on npm. Build and pack packages/primitives, then install its generated tarball:

npm install ./radix-solid-primitives-0.0.0-local.tgz

2. Import the parts

Import and structure the parts.

// index.tsx

import { Popover } from "@radix-solid/primitives";
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;

Each primitive is also available from its own entrypoint. Importing from the subpath can help some bundlers tree-shake more effectively:

import * as Popover from "@radix-solid/primitives/popover";

3. Add your styles

Add styles where desired.

// index.tsx

import { Popover } from "@radix-solid/primitives";
import "./styles.css";
const PopoverDemo = () => <Popover.Root>
		<Popover.Trigger class="PopoverTrigger">Show info</Popover.Trigger>
		<Popover.Portal>
			<Popover.Content class="PopoverContent">
				Some content
				<Popover.Arrow class="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.

import { Popover } from "@radix-solid/primitives";
import "./styles.css";
const PopoverDemo = () => <Popover.Root>
		<Popover.Trigger class="PopoverTrigger">More info</Popover.Trigger>
		<Popover.Portal>
			<Popover.Content class="PopoverContent" sideOffset={5}>
				Some more info…
				<Popover.Arrow class="PopoverArrow" />
			</Popover.Content>
		</Popover.Portal>
	</Popover.Root>;
export default PopoverDemo;

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.