Popover
Popover sits on the same overlay primitives as Menu and Tooltip, making it suitable for interactive content like forms, lists, and quick action menus while keeping focus management predictable.
Source
LLM docs
Package
Examples
4
Properties
62
Playground
Basics
Popover targets wrap an interactive element and render dropdown content within
Popover.Dropdown.Loading demo…
import { Block, Button, Popover, Text } from '@plocks/ui';
export function Demo() {
return (
<Popover>
<Popover.Target>
<Button>
Toggle popover
</Button>
</Popover.Target>
<Popover.Dropdown>
<Block p="sm">
<Text fw="semibold">Quick actions</Text>
<Button size="xs" variant="ghost">
Create new entry
</Button>
<Button size="xs" variant="ghost">
View documentation
</Button>
</Block>
</Popover.Dropdown>
</Popover>
);
}Hover Trigger
Set
trigger="hover" to open the popover when the user hovers over the target element. This is useful for mouse users who want quick access to additional content without clicking.Loading demo…
import { Block, Button, Popover, Text } from '@plocks/ui';
export function Demo() {
return (
<Popover trigger="hover">
<Popover.Target>
<Button>
Hover over me
</Button>
</Popover.Target>
<Popover.Dropdown>
<Block p="sm">
<Text fw="semibold">Hover popover</Text>
</Block>
</Popover.Dropdown>
</Popover>
);
}Controlled State
Control the
opened prop and respond to onChange when the popover needs to sync with surrounding form state.Loading demo…
import { useState } from 'react';
import { Block, Button, Checkbox, Input, Popover, Text } from '@plocks/ui';
export function Demo() {
const [opened, setOpened] = useState(false);
return (
<Block>
<Checkbox
label="Show popover"
checked={opened}
onChange={setOpened}
/>
<Popover opened={opened} onChange={setOpened}>
<Popover.Target>
<Button>
Invite teammate
</Button>
</Popover.Target>
<Popover.Dropdown>
<Block p="sm">
<Text fw="semibold">Invite team member</Text>
<Input
label="Email"
placeholder="name@example.com"
size="sm"
fullWidth
/>
<Button size="xs" onPress={() => setOpened(false)}>
Send invite
</Button>
</Block>
</Popover.Dropdown>
</Popover>
</Block>
);
}Placement Options
Set the
position prop to control where the dropdown renders relative to its trigger.Loading demo…
import { Button, Block, Popover, Text } from '@plocks/ui';
const OPTIONS = [
{ label: 'Top', position: 'top' },
{ label: 'Right', position: 'right' },
{ label: 'Bottom', position: 'bottom' },
{ label: 'Left', position: 'left' },
] as const;
export function Demo() {
return (
<Block direction="row">
{OPTIONS.map(({ label, position }) => (
<Popover key={position} position={position} withArrow>
<Popover.Target>
<Button>
{label}
</Button>
</Popover.Target>
<Popover.Dropdown>
<Block p="sm">
<Text fw="semibold">{label} placement</Text>
</Block>
</Popover.Dropdown>
</Popover>
))}
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources