Overlays
Modal
Dialog modal with overlay, FocusTrap, Escape/overlay-click to close. 4 sizes, composable header/body/footer slots.
<z-modal id="demo-modal">
<h3 slot="header">Confirm Action</h3>
<p>Are you sure?</p>
<div slot="footer">
<z-button variant="outline">Cancel</z-button>
<z-button variant="primary">Confirm</z-button>
</div>
</z-modal>Confirm Action
Are you sure you want to proceed? This action cannot be undone.
Tooltip
Hover/focus-triggered floating tooltip. Configurable placement and delay. Uses FloatingPosition primitive.
<z-tooltip content="Helpful tip" placement="top">
<z-button>Hover me</z-button>
</z-tooltip>Popover
Interactive floating card triggered by click or hover. Uses FloatingPosition + document click-outside detection.
Popover Title
Interactive popover content. Click outside to close.
Hover over the trigger to show this popover. Moving away hides it.
<z-popover>
<z-button slot="trigger">Click</z-button>
<div>Content</div>
</z-popover>Datepicker
Calendar date picker with single and range modes, min/max constraints, locale-aware month and weekday names, and full keyboard navigation.
<z-datepicker mode="range" min="2026-01-01" max="2026-12-31">
<z-button slot="trigger">Pick a range</z-button>
</z-datepicker>