Overlays
Dialog, Sheet, Popover, Dropdown, Tooltip, ContextMenu, Tabs, Accordion and Collapsible, all positioned by @floating-ui/dom and driven by the in-tree behaviors.
Every overlay takes a trigger snippet and renders its content from children; open state is a bindable open prop.
Dialog(title="Delete note" description="This cannot be undone.")
+snippet('trigger')
Btn(variant="danger" size="sm") Delete
p Are you sure?
+snippet('actions')
Btn(variant="danger" onclick!="{confirm}") Delete
Popover(side="bottom" align="start")
+snippet('trigger')
Btn(variant="secondary") Filters
.p-2 filter controls here
Tooltip(content="Save (⌘S)")
+snippet('trigger')
Btn(icon="lucide:save")
Dropdown(items!="{items}")
+snippet('trigger')
Btn(variant="ghost" icon="lucide:more-horizontal")| Component | Notes |
|---|---|
Dialog |
modal with title, description, actions snippet, dismissable (overlay click and Escape, default true), hideClose |
Sheet |
side panel; side defaults to 'right', pass 'left' for the old Drawer behaviour |
Popover |
side, align, sideOffset |
Dropdown |
menu from items ({ label, icon, separator, disabled, onSelect }) or custom children |
Tooltip |
content string, delay, rich for wider multiline styling; trigger can be a link |
ContextMenu |
right-click menu from items; nested submenus are accepted but ignored since 0.0.6 |
Tabs |
items with panel snippets, value bindable |
Accordion |
items with content snippets, multiple |
Collapsible |
title or trigger, open, onopenchange |
All of them use the behaviors module underneath: portal into body, focus trap and scroll lock for modals, click-outside and Escape to dismiss, roving tabindex inside menus. Reuse the same actions in your own components so interactions stay consistent.