UI Components

modal, modal_overlay, confirm_dialog, drawer, dropdown, code, fragment islands, tabs, badge, toast — Interactive elements.

Modal

Settings

Modal body content. Uses native <dialog>. Close with × or Escape.

Modal overlay (Alpine)

Div-based overlay using Alpine $store.modals — alternative when you avoid native <dialog>.

Confirm Dialog

Delete item?

This action cannot be undone.

Destructive actions. variant="danger" for red confirm button.

Drawer

Filters

Slide-out panel content. Use for filters, settings, or secondary nav.

side="left" or side="right". Native <dialog>.

Split Button

Save

Primary action + dropdown. Use primary_submit=true inside a form.

Popover

Filters

Filter by status:

Floating panel for forms, actions. Same HTML as dropdown, different styling.

Dropdown

Options
Home Layout Cards

Dropdown menu (items API)

dropdown_menu(trigger, items=[…]) — Alpine-controlled; dispatches chirpui:dropdown-selected.

Dropdown Select

Comfortable
Comfortable
Compact
Dense

dropdown_select(label, items=[…]) — combobox/listbox anatomy for non-submit selections.

Code

Inline: use_chirp_ui(app) and block with optional copy:

uv pip install -e ".[showcase]"

Keyboard Shortcuts

Open command palette Ctrl K Save draft Ctrl S

Separator

or

Aspect Ratio

16:9 preview frame

Items and Scroll Area

Release notes Latest package changes 3
Component docs Stable macro guidance
API reference Generated module docs
Patterns Composable page recipes
Showcase Live component examples

Fragment island

Safe region for HTMX mutations (see /chrome for more context).

Tabs

Overview content. Tabs use htmx to swap this content without a full page reload.

Click tabs to swap content via htmx. No full page reload.

Badges

Primary Success Warning Error ◇ With icon ◎ Active

Accordion

How do I sign up?
Click the Sign Up button in the top right and follow the registration steps.
How do I reset my password?
Use the Forgot Password link on the login page. We'll email you a reset link.
How do I update my profile?
Go to Settings → Profile to edit your name, email, and preferences.

Native <details> with name — only one open at a time.

Collapse

Click to expand

Hidden content. Single expand/collapse section.

Tooltip

Hover me This is a helpful hint on hover Keyboard shortcut: ⌘K

Pure CSS tooltip. Uses title for accessibility.

Toast

Toast appears via htmx OOB swap. Check top-right after clicking.

Row Actions

Kebab/dots menu for table rows. Supports variant="danger" for destructive actions.

Status Indicator

Active
Away
Offline
Error

Colored dot + label. Use pulse=true for live/active states.

Status with Hint

Deployed Last deploy: 2 hours ago Pending Waiting for approval

Status badge paired with a secondary hint line for extra context.

Empty State

◇

No results found

Clear filters

With action button. Use for zero-result screens, onboarding, or blank slates.

◇

Nothing here yet

Without action — just an icon and a title.

Reveal on Scroll

This content reveals when scrolled into view.

Fade/slide in on scroll using IntersectionObserver. Wrap any content.

Infinite Scroll

Loads the next page automatically when scrolled into view. Shows a loading indicator.