---
title: Popover
description: Displays rich content in a portal, triggered by a button.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="radix-popover-demo" />

## Installation

<ComponentInstallation name="radix-popover" />

## Usage

```tsx
<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverContent>Popover Content</PopoverContent>
</Popover>
```

## Examples

### Date Picker Example

<ComponentPreview name="radix-popover-datepicker-demo" />

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink
    href="https://www.radix-ui.com/primitives/docs/components/popover"
    text="Docs"
  />
  <ExternalLink
    href="https://www.radix-ui.com/primitives/docs/components/popover#api-reference"
    text="API Reference"
  />
</div>

## Credits

- We use [Radix UI](https://www.radix-ui.com/primitives/docs/components/popover) for the popover component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/popover) for the popover style.