Popover

A floating panel that appears relative to a trigger element.

Dimensions

Set the dimensions for the layer.

Width

Height

align

start

center

end

side

top

bottom

#Installation

bunx --bun barefoot add popover

#Usage

Dimensions

Set the dimensions for the layer.

Width

Max. width

Height

Max. height

1import {2  Popover,3  PopoverTrigger,4  PopoverContent,5  PopoverClose,6} from '@/components/ui/popover'

#Examples

#Basic

About

This is a basic popover with simple text content. It opens on click and closes when you click outside or press ESC.

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  Popover,6  PopoverTrigger,7  PopoverContent,8} from '@/components/ui/popover'910function BasicPopover() {11  const [open, setOpen] = createSignal(false)1213  return (14    <Popover open={open()} onOpenChange={setOpen}>15      <PopoverTrigger>16        <span className="inline-flex items-center rounded-md border px-4 py-2 text-sm">17          Click me18        </span>19      </PopoverTrigger>20      <PopoverContent>21        <div className="space-y-2">22          <h4 className="font-medium leading-none">About</h4>23          <p className="text-sm text-muted-foreground">24            This is a basic popover with simple text content.25          </p>26        </div>27      </PopoverContent>28    </Popover>29  )30}

#Form

Notifications

Configure how you receive notifications.

Frequency

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  Popover,6  PopoverTrigger,7  PopoverContent,8  PopoverClose,9} from '@/components/ui/popover'1011function FormPopover() {12  const [open, setOpen] = createSignal(false)1314  return (15    <Popover open={open()} onOpenChange={setOpen}>16      <PopoverTrigger>17        <span className="inline-flex items-center rounded-md border px-4 py-2 text-sm">18          Settings19        </span>20      </PopoverTrigger>21      <PopoverContent align="start" class="w-80">22        <div className="grid gap-4">23          <div className="space-y-2">24            <h4 className="font-medium leading-none">Notifications</h4>25            <p className="text-sm text-muted-foreground">26              Configure how you receive notifications.27            </p>28          </div>29          <div className="grid gap-3">30            <div className="flex items-center justify-between">31              <label className="text-sm">Email</label>32              <input33                type="email"34                placeholder="you@example.com"35                className="h-8 w-48 rounded-md border px-3 text-sm"36              />37            </div>38          </div>39          <div className="flex justify-between">40            <PopoverClose class="rounded-md border px-3 py-1.5 text-sm">41              Cancel42            </PopoverClose>43            <button className="rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground">44              Save45            </button>46          </div>47        </div>48      </PopoverContent>49    </Popover>50  )51}

#API Reference

Popover

Prop	Type	Default	Description
open	boolean	false	Whether the popover is open.
onOpenChange	(open: boolean) => void	-	Callback when open state should change.

PopoverTrigger

Prop	Type	Default	Description
disabled	boolean	false	Whether the trigger is disabled.
asChild	boolean	false	Render child element as trigger instead of built-in button.

PopoverContent

Prop	Type	Default	Description
align	'start' \| 'center' \| 'end'	'center'	Alignment relative to the trigger element.
side	'top' \| 'bottom'	'bottom'	Which side of the trigger to position the popover.

PopoverClose

Prop	Type	Default	Description
children	Child	-	The button content.