Overlay Components
Popover, Sheet/Drawer, Command Palette, Context Menu
Popover
More Info
This is popover content. It can contain any HTML, links, or actions.
Opens to the right.
User Card
AB
Alice Brown
alice@example.com
Sheet / Drawer
Full-height slide-in panel from the right edge. Server controls open state.
Settings
Sheet content can contain any components. Closes when you click the overlay or ✕ button.
Command Palette
Search-driven command launcher. Server filters results in real-time.
New File
⌘NOpen File
⌘OSave
⌘SSearch
⌘FSettings
⌘,Toggle Theme
⌘TContext Menu
Right-click inside the dashed area to open the context menu.
Right-click anywhere in this area
Native dialog (dj-dialog)
closes #8
Server-controlled HTML <dialog>. djust toggles
showModal() / close() when the
dj-dialog attribute changes — no custom JS, no focus
trap to write, ESC dismiss + backdrop click for free.
Show template
<button dj-click="open_dialog">Open</button>
<dialog dj-dialog="{% if show_dialog %}open{% else %}closed{% endif %}">
<p>Are you sure?</p>
<button dj-click="close_dialog">Cancel</button>
<button dj-click="confirm_dialog">Confirm</button>
</dialog>