UI surfaces that wrap or extend a single route: pick a root shell, layer in accessibility and client-owned interactivity, and register functions as tools for AI agents. If you build with htmx and Alpine, start with Shells (pick one per app) and Islands. New to hypermedia? Read Accessibility and Alpine first.
Semantic markup, ARIA, and WCAG alignment
Build inclusive apps with Chirp.
Local UI state — dropdowns, modals, tabs
Complement htmx with Alpine for client-only interactivity.
The three root layouts — boost, shell, app-shell
Pick exactly one per app. Includes the decision table, thehx-selectdistinction, and what is not a shell.
chirp-ui's app_shell_layout — sidebar, topbar, OOB regions
The shell with persistent chrome. One of three shells.
hx-boost contract, cross-shell redirects, debug warnings
How swaps work, when they redirect, and the tripwires that catch silent failures.
Glossary — app shell, page chrome, surface chrome, OOB ids
One vocabulary for Chirp + chirp-ui layouts andchirp.shell_regions.
Semantic CSS tokens, data-theme, cookie preference
Layered CSS and light/dark/system without a UI runtime or Alpine.
Component library — layout, cards, forms, badges
Kida macros with CSS and themes. htmx-native, themeable.
Framework-agnostic high-state mount roots
Mount isolated high-state widgets while keeping pages server-rendered.
State primitives without bundlers
Use islands + static ES modules for complex UI state while staying server-first.
Register functions as MCP tools for AI agents
Humans use forms, agents use JSON-RPC. Same functions, two interfaces.