Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Popover with Footer for React

An Open button that shows the title Title, the line Content goes here, and Cancel and Confirm, which both close the panel.

Open shows a title that reads Title and the line Content goes here. Cancel and Confirm sit at the end of the panel. Both close it.

Use it for a quick confirm tied to one control. A decision that cannot be undone belongs in an Alert Dialog. In React, Base UI does not perform the confirm.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Popover anatomy: trigger, title, positioner, arrow, description, content

Usage

<Popover onOpenChange={setOpen} open={open}>
  <PopoverTrigger render={<Button variant="outline" />}>
    Open
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Title</PopoverTitle>
      <PopoverDescription>Content goes here.</PopoverDescription>
    </PopoverHeader>
    <div className="flex justify-end gap-2">
      <Button onClick={handleClose} size="sm" variant="outline">
        Cancel
      </Button>
      <Button onClick={handleClose} size="sm">
        Confirm
      </Button>
    </div>
  </PopoverContent>
</Popover>

FAQ

How does this panel dismiss?

Escape closes the panel and returns focus to the trigger. A click outside closes it too. The panel sits beside the button, and the rest of the page stays usable.

API Reference

Popover

Sets onOpenChange={setOpen} and open={open}. The rest is on the Popover page.

Button

Sets variant="outline", onClick={handleClose} and size="sm". The rest is on the Button page.

All 15 popover examples