Popover

Displays rich content in a portal, triggered by a button.

@react.component
let make = () =>
  <Popover>

Installation


npx shadcn@latest add @rescript-shadcn/Popover

Usage

<Popover>
  <Popover.Trigger render={<Button variant=Outline />}>
    {"Open Popover"->React.string}
  </Popover.Trigger>
  <Popover.Content>
    <h4 className="leading-none font-medium"> {"Title"->React.string} </h4>
    <p className="text-muted-foreground text-sm"> {"Description text here."->React.string} </p>
  </Popover.Content>
</Popover>

Examples

Basic

A simple popover with a header, title, and description.

@react.component
let make = () => {
  <Popover>

Align

Use the align prop on PopoverContent to control the horizontal alignment.

@react.component
let make = () => {
  <div className="flex gap-6">

With Form

A popover with form fields inside.

@react.component
let make = () => {
  <Popover>

API Reference

See the Base UI Popover documentation.