Anchored floating panels for short content.
Add this item from the registry, or import it from the package after installing Default File UI.
Registry path
itsvigneshv/default-file-ui/popoverPackage import
import { Popover, PopoverContent, PopoverTrigger } from "@default-file/ui/components/df-popover"Trigger opens an anchored panel.
Anchored floating panel. Compose Popover, PopoverTrigger, PopoverContent, and optional header parts.
| Prop | Type | Default | Notes |
|---|---|---|---|
| open | boolean | — | Controlled open state. |
| defaultOpen | boolean | — | Uncontrolled initial open state. |
| onOpenChange | (open: boolean) => void | — | Called when open state changes. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| render | ReactElement | — | Host element that toggles the popover. |
| children | ReactNode | — | Trigger content when not using render. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "bottom" | Preferred placement side. |
| align | "start" | "center" | "end" | "center" | Alignment along the side. |
| sideOffset | number | 4 | Gap between trigger and panel. |
| alignOffset | number | 0 | Shift along the alignment axis. |
| className | string | — | Additional styles on the panel. |
| children | ReactNode | — | Panel body. |
Optional semantic wrappers inside PopoverContent.
| Prop | Type | Default | Notes |
|---|---|---|---|
| PopoverHeader | div attrs | — | Header region wrapper. |
| PopoverTitle | h2 attrs | — | Title text. |
| PopoverDescription | p attrs | — | Supporting description. |