Popover

Floating content panel that appears near a trigger element. Built on Radix UI Popover primitive.

Installation

# Install @opencosmos/ui to use Popover
pnpm add @opencosmos/ui

Preview

Loading preview...

Usage

Import

import { Popover } from '@opencosmos/ui';

Example

<Popover>
  Content
</Popover>

Eject

Copy this component into your project for full customization

Code Examples

Basic Usage

Popover with custom content

import { Popover, PopoverContent, PopoverTrigger } from "@opencosmos/ui"
import { Button } from "@opencosmos/ui"

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="grid gap-4">
      <h4 className="font-medium">Popover Title</h4>
      <p className="text-sm text-muted-foreground">
        Popover content goes here.
      </p>
    </div>
  </PopoverContent>
</Popover>