Popover

since 1.0

Popover is a floating container that displays 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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Popover
PopoverTrigger
PopoverContent
PopoverAnchor

Props

All components accept standard HTML attributes and React props.

Pagination Progress

On This Page

Example Install Components Props