Popover

<Popover>  <PopoverTrigger asChild>    <Button variant="outline">Open popover</Button>  </PopoverTrigger>  <PopoverContent className="w-80">    <PopoverHeader>      <PopoverTitle>Dimensions</PopoverTitle>      <PopoverDescription>        Set the width and height for the layer.      </PopoverDescription>    </PopoverHeader>    <Text size="sm">      Additional controls or metadata can sit below the header.    </Text>  </PopoverContent></Popover>

Usage

import {
  Popover,
  PopoverAnchor,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@reva/ui";

PopoverContent uses the same translucent surface treatment as DropdownMenuContent (bg-popover/70, backdrop blur, shadow-md, and ring-border-default) so floating panels read consistently across overlay patterns.

Composition

Use the following composition to build a Popover:

Popover
├── PopoverTrigger
└── PopoverContent
    ├── PopoverHeader
    │   ├── PopoverTitle
    │   └── PopoverDescription
    └── (content)

Optional: PopoverAnchor customises the anchor element when you need positioning separate from the trigger.

Examples

Basic

<Popover>  <PopoverTrigger asChild>    <Button variant="outline">Open popover</Button>  </PopoverTrigger>  <PopoverContent className="w-80">    <PopoverHeader>      <PopoverTitle>Dimensions</PopoverTitle>      <PopoverDescription>        Set the width and height for the layer.      </PopoverDescription>    </PopoverHeader>    <Text size="sm">      Additional controls or metadata can sit below the header.    </Text>  </PopoverContent></Popover>

Align

Use the align prop on PopoverContent to line up the panel with the start, center, or end edge of the trigger.

<HStack className="w-full max-w-3xl" justify="between">  <Popover>    <PopoverTrigger asChild>      <Button variant="outline">Start</Button>    </PopoverTrigger>    <PopoverContent align="start" className="w-60">      <Text size="sm">Aligned to start</Text>    </PopoverContent>  </Popover>  <Popover>    <PopoverTrigger asChild>      <Button variant="outline">Center</Button>    </PopoverTrigger>    <PopoverContent align="center" className="w-60">      <Text size="sm">Aligned to center</Text>    </PopoverContent>  </Popover>  <Popover>    <PopoverTrigger asChild>      <Button variant="outline">End</Button>    </PopoverTrigger>    <PopoverContent align="end" className="w-60">      <Text size="sm">Aligned to end</Text>    </PopoverContent>  </Popover></HStack>

With form

Use Field and Input inside PopoverContent for lightweight settings or metadata edits without a full dialog.

<Popover>  <PopoverTrigger asChild>    <Button variant="outline">Open popover</Button>  </PopoverTrigger>  <PopoverContent className="w-80">    <VStack gap={4}>      <PopoverHeader>        <PopoverTitle>Dimensions</PopoverTitle>        <PopoverDescription>          Set the dimensions for the layer.        </PopoverDescription>      </PopoverHeader>      <VStack gap={3}>        <Field orientation="horizontal">          <FieldLabel htmlFor="popover-dim-w" className="min-w-14 shrink-0">            Width          </FieldLabel>          <Input id="popover-dim-w" size="sm" className="w-40" defaultValue="100%" />        </Field>        <Field orientation="horizontal">          <FieldLabel htmlFor="popover-dim-h" className="min-w-14 shrink-0">            Height          </FieldLabel>          <Input id="popover-dim-h" size="sm" className="w-40" defaultValue="25px" />        </Field>      </VStack>    </VStack>  </PopoverContent></Popover>

Props

Component	Prop	Type	Default	Description
Popover	`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
Popover	`open`	`boolean`	—	Controlled open state.
Popover	`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes.
Popover	`modal`	`boolean`	—	When true, interaction outside is blocked while open.
PopoverContent	`align`	`"start" \| "center" \| "end"`	`center`	Popover alignment vs trigger.
PopoverContent	`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred side; Radix may flip.
PopoverContent	`sideOffset`	`number`	`4`	Distance from the anchor.
PopoverContent	`className`	`string`	—	Merged onto the content surface.

Radix passthrough props on each part are supported; see the Popover primitives overview.