# UI and Extensions

URL: /chirp/docs/build-apps/ui-extensions/
Section: ui-extensions
Tags: guides, best-practices, accessibility, shells, extensions

--------------------------------------------------------------------------------

Use this section for UI surfaces that sit around or beyond a single route: shells, accessibility, client-owned islands, ChirpUI, and tool registration. User Accessibility Semantic markup, ARIA, and WCAG alignment Build inclusive apps with Chirp. Alpine.js Local UI state — dropdowns, modals, tabs Complement htmx with Alpine for client-only interactivity. Shells The three root layouts — boost, shell, app-shell Pick exactly one per app. Includes the decision table, the hx-select distinction, and what is not a shell. App Shells chirp-ui's app_shell_layout — sidebar, topbar, OOB regions The opinionated shell with persistent chrome. One of three shells; see Shells for the others. Boosted Navigation hx-boost contract, cross-shell redirects, debug warnings How swaps work, when they redirect, and the tripwires that catch silent failures. UI layers & shell regions Glossary — app shell, page chrome, surface chrome, OOB ids One vocabulary for Chirp + chirp-ui layouts and chirp.shell_regions. Palette chirp-ui Component library — layout, cards, forms, badges Kida macros with CSS and themes. htmx-native, gorgeous by default. Puzzle Islands Contract Framework-agnostic high-state mount roots Mount isolated high-state widgets while keeping pages server-rendered. Lightning No-Build High-State State primitives without bundlers Use islands + static ES modules for complex UI state while staying server-first. Wrench Tools & MCP Register functions as MCP tools for AI agents Humans use forms, agents use JSON-RPC. Same functions, two interfaces.

--------------------------------------------------------------------------------

Metadata:
- Word Count: 222
- Reading Time: 1 minutes