Popover

A generic floating panel anchored to a trigger - put any content inside. Origin-aware open animation, closes on outside click or Escape. Controlled or uncontrolled.

Installation

npx stepwise-ui add popover

Default

import { Popover } from '@/components/stepwise/popover'

<Popover trigger={<Button>Open popover</Button>}>
  <div className="flex flex-col gap-3">
    <Input label="" aria-label="Project name" placeholder="stepwise-ui" />
    <Button size="sm" fullWidth>Save</Button>
  </div>
</Popover>

Side & align

Props

PropTypeDescription

trigger

ReactNode

Element that toggles the panel.

children

ReactNode

Panel content.

side

'bottom' | 'top'

Which side to open on. Default bottom.

align

'start' | 'center' | 'end'

Horizontal alignment. Default center.

open

boolean

Controlled open state.

onOpenChange

(open: boolean) => void

Fires on open/close.

className

string

Merged onto the wrapper.