Wensity

Popover

Floating panels for menus, inline forms, previews, and controlled state.

popovermenudropdownfloatingoverlayform
Loading preview...

Examples

Practical examples and common states for the same installable component.

Default

Simple informational popover anchored to a trigger.

examples/popover-default.tsx
import { Popover, PopoverContent, PopoverTrigger } from "@/components/wensity/popover";


export function DefaultPopover() {
  return (
    <Popover>
      <PopoverTrigger>Info</PopoverTrigger>
      <PopoverContent>Helpful context about this control.</PopoverContent>
    </Popover>
  );
}

Form

Inline edit fields without opening a full modal.

examples/popover-form.tsx
import { Popover, PopoverContent, PopoverTrigger } from "@/components/wensity/popover";


export function FormPopover() {
  return (
    <Popover>
      <PopoverTrigger>Edit</PopoverTrigger>
      <PopoverContent variant="form">{/* fields */}</PopoverContent>
    </Popover>
  );
}

Menu

Compact action list with separators and destructive items.

examples/popover-menu.tsx
import { Popover, PopoverContent, PopoverMenuItem, PopoverTrigger } from "@/components/wensity/popover";


export function MenuPopover() {
  return (
    <Popover>
      <PopoverTrigger>•••</PopoverTrigger>
      <PopoverContent variant="menu">
        <PopoverMenuItem>Edit</PopoverMenuItem>
      </PopoverContent>
    </Popover>
  );
}

Rich content

Media header with structured title and description.

examples/popover-rich.tsx
import { Popover, PopoverContent, PopoverRichMedia, PopoverTrigger } from "@/components/wensity/popover";


export function RichPopover() {
  return (
    <Popover>
      <PopoverTrigger>Preview</PopoverTrigger>
      <PopoverContent variant="rich">
        <PopoverRichMedia src="/preview.webp" alt="Preview" />
      </PopoverContent>
    </Popover>
  );
}

Controlled

External state owns the open/close lifecycle.

examples/popover-controlled.tsx
"use client";


import { useState } from "react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/wensity/popover";


export function ControlledPopover() {
  const [open, setOpen] = useState(false);
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger>Anchor</PopoverTrigger>
      <PopoverContent>Controlled content</PopoverContent>
    </Popover>
  );
}