Component
Popover
Floating content triggered by click, like a mini dialog.
tsx
import { Popover, HoverCard } from 'wss3-forge'Usage
•
Use for interactive floating content
•
HoverCard for hover-triggered content
•
Closes on outside click and Escape
•
Position and align control placement
Examples
User Profile Popover
tsx
1<Popover2 trigger={<Button variant="secondary">View Profile</Button>}3 content={4 <VStack gap="sm" style={{ minWidth: 200 }}>5 <HStack gap="sm">6 <div style={{ width: 40, height: 40, borderRadius: 'var(--radius-full)', background: 'var(--brand-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 600 }}>JD</div>7 <VStack gap="xs">8 <Text weight="medium">John Doe</Text>9 <Text size="sm" color="muted">john@example.com</Text>10 </VStack>11 </HStack>12 <Divider />13 <Button size="sm" fullWidth variant="secondary">View Full Profile</Button>14 </VStack>15 }16/>Previous
Modal
Next
Sheet
Last updated: December 2025