uix-uiPopover
Anchored floating panel. 2 placements.
import { Button } from "@/components/ui/button";
import { Popover } from "@/components/ui/popover";
export default function Example() {
return (
<Popover
trigger={<Button variant="outline">Delivery details</Button>}
title="Delivery to Dhanmondi"
actions={<Button size="sm">Change address</Button>}
>
Arrives Thursday between 10 am and 1 pm.
</Popover>
);
}
Installation
$ npx uix-ui@latest add popoverThis copies the file into components/ui/popover.tsx in your project. npx shadcn@latest add @uix/popover works too.
Usage
import { Popover } from "@/components/ui/popover";
<Popover
trigger={<Button variant="outline">Delivery details</Button>}
title="Delivery to Dhanmondi"
actions={<Button size="sm">Change address</Button>}
>
Arrives Thursday between 10 am and 1 pm.
</Popover>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
placement | bottom | top | "bottom" | |
trigger | React.ReactElement | – | The element that opens the panel (a Button): it gets the popovertarget attribute. |
title | React.ReactNode | – | |
actions | React.ReactNode | – | Buttons at the end of the panel. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts