Homepage
Homepage
HomeHomePrimitivesPrimitivesVisualizesVisualizesHooksHooks

Getting started

A quick tutorial to get you up and running with 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 @tealess/popover@latest -E

2. Import the parts

Import and structure the parts.

// index.jsx

import * as React from "react";

import * as Popover from "@tealess/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 "@tealess/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;

}

Summary

The steps above outline briefly what's involved in using a Tealess Element 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
Edit this page on GitHub.