Popover

Popover shows a floating panel when a trigger is clicked. Unlike a tooltip (hover-only), a popover responds to clicks and can contain interactive content like forms, pickers, or menus.

Interactive example#

Popover · Live example

Studio foundations

Edit the project in place and save to update its visible name.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Import#

TSX

import { Popover, PopoverTrigger, PopoverContent } from '@clidey/ux';

TSX

<Popover>
  <PopoverTrigger>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p className="text-sm">This is the popover content.</p>
  </PopoverContent>
</Popover>

TSX

<Popover>
  <PopoverTrigger>
    <Button variant="outline">
      <CalendarIcon className="size-4 mr-2" />
      Pick a date
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0">
    <Calendar />
  </PopoverContent>
</Popover>

TSX

const colors = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#8b5cf6'];

<Popover>
  <PopoverTrigger>
    <Button variant="outline" size="icon">
      <div className="size-4 rounded-full bg-blue-500" />
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-40">
    <div className="grid grid-cols-3 gap-1">
      {colors.map((color) => (
        <button
          key={color}
          className="size-8 rounded-full border-2 border-transparent hover:border-ring"
          style={{ backgroundColor: color }}
          onClick={() => setColor(color)}
        />
      ))}
    </div>
  </PopoverContent>
</Popover>

Positioning#

TSX

<PopoverContent side="right" align="start" sideOffset={8}>
  Content here
</PopoverContent>

Controlled#

TSX

const [open, setOpen] = useState(false);

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger>
    <Button onClick={() => setOpen(true)}>Open</Button>
  </PopoverTrigger>
  <PopoverContent>
    <button onClick={() => setOpen(false)}>Close</button>
  </PopoverContent>
</Popover>

Sub-components#

Component	Description
`Popover`	Root component. Manages open state.
`PopoverTrigger`	Toggles the popover on click. Renders as its child automatically for ux components (`Button`, `Badge`, ...) and intrinsic elements, so no `asChild` is needed; pass `asChild` only for other ref-forwarding elements. See Triggers and asChild.
`PopoverContent`	Floating panel content.

PopoverContent Props

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Preferred side to display.
`sideOffset`	`number`	`4`	Gap between trigger and popover in pixels.
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to the trigger.
`className`	`string`	—	Additional CSS classes.

Was this page helpful?