Popover

A glass popover that grows out of its trigger.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/popover

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { Popover } from "@/components/liquikit/popover"

<Popover.Root>
  <Popover.Trigger>Details</Popover.Trigger>
  <Popover.Popup>
    <Popover.Title>Refraction</Popover.Title>
    <Popover.Description>How light bends through glass.</Popover.Description>
  </Popover.Popup>
</Popover.Root>

API Reference#

Prop	Type	Default
`open`	`boolean` Whether the popup is open. Pair it with `onOpenChange` to control it.	—

Also takes every prop of Base UI's popover, plus className and style.

Prop	Type	Default
`side`	`BasePopover.Positioner.Props["side"]` Which side of the trigger the popup opens on.	"bottom"
`align`	`BasePopover.Positioner.Props["align"]` How the popup lines up with its trigger along that side.	"center"
`sideOffset`	`number` Gap between the trigger and the popup, in pixels.	10
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"
`children`	`ReactNode` The content.	—

Also takes every prop of Base UI's popover, plus className and style.

OTP Field Preview Card