Skip to content

Foundations

Popover Panel

A panel anchored to its trigger — grows from it, closes on outside click or Esc, keeps focus inside.

2 variantsMIT

Preview

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/popover-panel.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { Popover, PopoverClose } from "@/components/ui/popover-panel";

<Popover title="Rename chat" showClose trigger={<Button>Rename</Button>}>
  <form onSubmit={save}>
    <TextField name="title" label="Title" defaultValue={title} />
    <PopoverClose asChild>
      <Button type="submit" variant="primary">Save</Button>
    </PopoverClose>
  </form>
</Popover>

Props

PropTypeDefaultDescription
trigger*ReactElement—A button-like element that toggles the panel.
children*ReactNode—Panel content.
titleReactNode—Heading at the top; a string title also names the panel for screen readers.
showClosebooleanfalseAdds a close button to the header.
side / align"top" | "right" | "bottom" | "left" / "start" | "center" | "end""bottom" / "center"Placement; the panel grows from the trigger's side and flips when there's no room.
open / onOpenChangeboolean / (open: boolean) => void—Optional control of the open state.
classNamestring—Classes for the panel, e.g. a different width.