Use Popover to show richer content anchored to a trigger.
import { Popover, PopoverTrigger, PopoverContent } from '@tile-ui/react';
export default function PopoverDemo() {
return (
<Popover>
<PopoverTrigger className="component-preview__action">Open popover</PopoverTrigger>
Registry install
pnpm dlx shadcn@latest add @tile-ui/popover
Package usage
import { Popover, PopoverTrigger, PopoverContent } from '@tile-ui/react';
<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent>Rich content here.</PopoverContent>
</Popover>
Highlights
- Trigger and content
- Side, align, and offset
- Controlled and uncontrolled
Registry dependencies
| Item | Purpose |
|---|
popover | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
Popover
| Prop | Type | Default |
|---|
open | boolean | — |
defaultOpen | boolean | — |
onOpenChange | (open: boolean) => void | — |
PopoverTrigger
| Prop | Type | Default |
|---|
asChild | boolean | — |
PopoverContent
| Prop | Type | Default |
|---|
side | 'top' | 'right' | 'bottom' | 'left' | — |
align | 'start' | 'center' | 'end' | — |
sideOffset | number | — |