Overlay

Popover

Floating content panel anchored to a trigger.

Available inreactangular

Preview

Live previewreal component

Install

TerminalBash

$ npx mcp-elements add popover

Usage

popover-example.tsxTSX

import { Popover, Button } from '@mcp-elements/react'

export function Example() {
  return (
    <Popover trigger={<Button variant="outline">Connection info</Button>}>
      <div className="space-y-1">
        <p className="text-sm font-medium">github-mcp</p>
        <p className="text-xs text-muted-foreground">
          Connected over stdio · 14 tools exposed
        </p>
      </div>
    </Popover>
  )
}

Props

Prop	Type	Default	Description
`trigger *`	`React.ReactNode`	—	Element that toggles the popover open when clicked
`children *`	`React.ReactNode`	—	Content rendered inside the popover panel
`className`	`string`	—	Additional classes for the popover content panel