Popover — logic2b/ui

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

export default function PopoverDemo() {
  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 className="grid gap-2">
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="popover-width">Width</Label>
              <Input
                id="popover-width"
                defaultValue="100%"
                className="col-span-2 h-8"
              />
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="popover-height">Height</Label>
              <Input
                id="popover-height"
                defaultValue="25px"
                className="col-span-2 h-8"
              />
            </div>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}

Installation

npx logic2b@latest add popover

Working with an AI assistant? Copy this prompt into Claude Code, Cursor or Copilot — it carries the install steps, a no-CLI fallback and a verification checklist.

Add the "popover" item from the logic2b ui registry (https://ui.logic2b.com) to this project. Follow every step and verify at the end.

## Steps

1. If the project has no `components.json` yet, set up logic2b ui first:

   ```bash
   npx logic2b@latest init
   ```

2. Install the item (the CLI resolves registry dependencies automatically):

   ```bash
   npx logic2b@latest add popover
   ```

3. Install any npm dependencies the command prints.

## If the CLI is not available

Do it manually from the registry payload:

1. Fetch https://ui.logic2b.com/r/popover.json.
2. Write every entry in `files[]` to its mapped project path (see below).
3. Repeat (recursively) for each name in `registryDependencies`.
4. Install every package listed in `dependencies` across those payloads.

## Registry reference

- Index of every item: https://ui.logic2b.com/r/index.json
- Item payload (full source): https://ui.logic2b.com/r/<name>.json
- Usage examples per item: https://ui.logic2b.com/r/demos/index.json → https://ui.logic2b.com/r/demos/<demo>.json
- Docs index for agents: https://ui.logic2b.com/llms.txt (full docs: https://ui.logic2b.com/llms-full.txt)
- Every docs page is Markdown when you append `.md` to its URL.

Registry file paths map to project paths like this:
- `ui/*` → `@/components/ui/*`
- `blocks/<name>/*` → `@/components/*`
- `charts/*` → `@/components/charts/*`
- `hooks/*` → `@/hooks/*`
- `lib/utils.ts` → `@/lib/utils.ts`
- `theme.css` → next to the project's Tailwind entry stylesheet

## Conventions (do not break these)

- Tailwind CSS v4 (CSS-first config; no tailwind.config.js needed) and React 19.
- All colors go through semantic tokens (`bg-primary`, `text-muted-foreground`,
  `border-border`, …). Never hardcode hex/oklch values in components.
- Dark mode is class-based: toggle `.dark` on `<html>`.
- Icons come from lucide-react.

## Verify before finishing

1. The dev server starts and the app renders without console errors.
2. TypeScript compiles (`tsc --noEmit` or the framework's check).
3. Components use the theme: a `<Button>` shows the primary token color,
   and toggling `.dark` on `<html>` switches the palette.

Install the dependencies:

npm install radix-ui

Copy into ui/popover.tsx:

"use client"

import * as React from "react"
import { Popover as PopoverPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}

function PopoverContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
          className
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
}

function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}

export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

Usage

import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>

API

Prop	Type	Default
`align` (PopoverContent)	`start \| center \| end`	`center`
`sideOffset` (PopoverContent)	`number`	`4`
`side` (PopoverContent)	`top \| right \| bottom \| left`	`bottom`

Examples

Form content

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export default function PopoverFormDemo() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Filter</Button>
      </PopoverTrigger>
      <PopoverContent className="w-60">
        <div className="grid gap-3">
          <p className="text-sm font-medium">Sort by</p>
          <RadioGroup defaultValue="recent" className="gap-2">
            <div className="flex items-center gap-3">
              <RadioGroupItem value="recent" id="popover-recent" />
              <Label htmlFor="popover-recent">Most recent</Label>
            </div>
            <div className="flex items-center gap-3">
              <RadioGroupItem value="popular" id="popover-popular" />
              <Label htmlFor="popover-popular">Most popular</Label>
            </div>
          </RadioGroup>
        </div>
      </PopoverContent>
    </Popover>
  )
}

Side and alignment

import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

export default function PopoverAlignDemo() {
  return (
    <div className="flex gap-2">
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline">Top</Button>
        </PopoverTrigger>
        <PopoverContent side="top" className="w-40 text-sm">
          Opens above the trigger.
        </PopoverContent>
      </Popover>
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline">End</Button>
        </PopoverTrigger>
        <PopoverContent align="end" className="w-40 text-sm">
          Aligned to the end edge.
        </PopoverContent>
      </Popover>
    </div>
  )
}

Accessibility

Built on Radix Popover.

The trigger toggles the popover on click and manages aria-expanded and aria-controls for you.
Focus moves into the popover when it opens and returns to the trigger on close.
Esc or an outside click dismisses the popover.
Use PopoverAnchor to position the content relative to a different element than the trigger.