🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Popover

A floating panel that displays rich content anchored to a trigger element.

Popovers are versatile overlay components that display additional content or actions without navigating away from the current page. Unlike tooltips which show simple text on hover, popovers can contain complex interactive content like forms, menus, or rich media. They're commonly used for contextual help, additional options, filters, or detailed information that doesn't warrant a full modal dialog.

Built on top of Radix UI's Popover primitive with full keyboard navigation (Escape to close), focus management, collision detection for optimal positioning, and accessibility support including proper ARIA attributes.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@strongtie/design-system/popover"

export function PopoverDefault() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="leading-none font-medium">Dimensions</h4>
            <p className="text-muted-foreground text-sm">
              Set the dimensions for the layer.
            </p>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}

Installation


npm install @strongtie/design-system

import { Popover } from "@strongtie/design-system/popover"

Components

This module exports the following components:

Popover
PopoverTrigger
PopoverContent

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@strongtie/design-system/popover"

export function PopoverDefault() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="leading-none font-medium">Dimensions</h4>
            <p className="text-muted-foreground text-sm">
              Set the dimensions for the layer.
            </p>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Component Slots

The following data attributes are used to identify component parts:

popover
popover-trigger

Additional Classes

Other CSS classes used by this component:

popover-content

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI popover Documentation

Pagination Progress

On This Page

Example Installation Components Props Example Styling Component Slots Additional Classes Accessibility Resources

Contribute

Popover

A floating panel that displays rich content anchored to a trigger element.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@strongtie/design-system/popover"

export function PopoverDefault() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="leading-none font-medium">Dimensions</h4>
            <p className="text-muted-foreground text-sm">
              Set the dimensions for the layer.
            </p>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}

Installation


npm install @strongtie/design-system

import { Popover } from "@strongtie/design-system/popover"

Components

This module exports the following components:

Popover
PopoverTrigger
PopoverContent

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@strongtie/design-system/popover"

export function PopoverDefault() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="leading-none font-medium">Dimensions</h4>
            <p className="text-muted-foreground text-sm">
              Set the dimensions for the layer.
            </p>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}