Popover
Displays content in a portal relative to the triggering button element.
Installation
npx shadcn@latest add @tetra-ui/popoverUsage
First ensure that you have the PortalHost component in your root layout.
import { PortalHost } from "@/components/ui/portal";
export default function RootLayout() {
return (
<>
<Stack />
<PortalHost />
</>
);
}import { Button, ButtonText } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverOverlay,
PopoverPortal,
PopoverTrigger,
} from "@/components/ui/popover";<Popover>
<PopoverTrigger asChild>
<Button>
<ButtonText>Open</ButtonText>
</Button>
</PopoverTrigger>
<PopoverPortal>
<PopoverOverlay />
<PopoverContent>
<Text>Popover Content</Text>
</PopoverContent>
</PopoverPortal>
</Popover>