47 lines
1.0 KiB
Plaintext
47 lines
1.0 KiB
Plaintext
---
|
|
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.
|