Your friendly neighborhood open source maintainers. Creators of Skeleton.
800 Followers
120 Following
100 Posts
);
}
```
Breaking convention in Skeleton, this component is provided "headless". Meaning no default styles are applied out of the box. This ensures you retain full control of all styling for maximum flexibility.
## Anchor
Use the `Anchor` component to position the popover contents relative to an element other than the trigger.
```tsx
import { Avatar, Popover, Portal } from '@skeletonlabs/skeleton-react';
import { XIcon } from 'lucide-react';
export default function Anchor() {
return (
Your friendly neighborhood open source maintainers. Creators of Skeleton.
800 Followers
120 Following
100 Posts
);
}
```
## Arrow
Visually connects the popover content to the trigger element. Will automatically align based on the selected side.
```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';
export default function Arrow() {
return (
TriggerThis example will have a small arrow.
);
}
```
## Z-Index
By default Skeleton does not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the `Positioner` component.
```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';
export default function ZIndex() {
return (
Default (auto)This example will be below the sibling.Above (20)This example will be above the sibling.
Sibling (10)
);
}
```
## Provider Pattern
Use the [Provider Pattern](/docs/\[framework]/get-started/fundamentals#provider-pattern) to gain access to the inner component APIs.
```tsx
import { Popover, Portal, usePopover } from '@skeletonlabs/skeleton-react';
export default function Default() {
const popover = usePopover({
closeOnInteractOutside: false,
});
function showAndHide() {
popover.setOpen(true);
setTimeout(() => {
popover.setOpen(false);
}, 3000);
}
return (
AnchorThis popover will appear, stay open for three seconds, then close on it's own.
);
}
```
## Direction
Set the text direction (`ltr` or `rtl`) using the `dir` prop.
```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
TriggerTitle
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
nesciunt enim.
Close
);
}
```
## Anatomy
Here's an overview of how the Popover component is structured in code:
```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference