Details popover
import { Popover, PopoverContent, PopoverTrigger } from "@combric/react";
export function Example() {
return <Popover><PopoverTrigger>Details</PopoverTrigger><PopoverContent>Non-modal details</PopoverContent></Popover>;
}Popover
Non-modal portaled anchored content.
@combric/react · v1.1.1 · Current
Import and usage
import { Popover, PopoverTrigger, PopoverContent } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
Examples
Position and alignment
import { Popover, PopoverContent, PopoverTrigger } from "@combric/react";
export function Example() {
return <Popover><PopoverTrigger>Inspect</PopoverTrigger><PopoverContent side="top" align="end">Build is stable.</PopoverContent></Popover>;
}Public API
| Name |
|---|
Popover |
PopoverTrigger |
PopoverContent |
| Property / capability | Published contract |
|---|---|
| Contract | open/defaultOpen |
| Contract | side |
| Contract | align |
Accessibility
Does not trap focus or isolate background content; consumers supply appropriate content semantics.
Keyboard
Escape closes and restores trigger focus; outside pointer interaction dismisses without stealing focus.
CSS and customization
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.