chirp-ui

Gorgeous Chirp components — htmx-native, Kida macros, Alpine.js for interactivity

Get Started Component showcase Components

HTML Over the Wire, Gorgeous by Default

Kida macros. htmx-native. Alpine.js for interactivity.

chirp-ui is an optional companion design system for Chirp. It provides Kida template macros — cards, modals, forms, layouts — that render as HTML. Use them with htmx for swaps, SSE for streaming, and View Transitions for polish. Zero JavaScript for layout.

{% from "chirpui/layout.html" import container, grid, block %}
{% from "chirpui/card.html" import card %}

{% call container() %}
    {% call grid(cols=2) %}
        {% call block() %}{% call card(title="Hello") %}<p>Card one.</p>{% end %}{% end %}
        {% call block() %}{% call card(title="World") %}<p>Card two.</p>{% end %}{% end %}
    {% end %}
{% end %}

What's good about it

Gorgeous by Default

Full visual design out of the box. Override--chirpui-*CSS variables to customize.

htmx-Native

Interactive components use htmx or native HTML. Dropdown, modal, tray, tabs use Alpine.js for declarative behavior.

Composable

{% slot %}for content injection. Components nest freely. No wrapper classes.

Modern CSS

:has(), container queries, fluid typography, prefers-color-schemedark mode.

Quick Install

pip install chirp-ui
# or
uv add chirp-ui

Requires Python 3.14+. When used with Chirp, components are auto-detected — no configuration needed.

The Bengal Ecosystem

A structured reactive stack — every layer written in pure Python for 3.14t free-threading.
ᓚᘏᗢ Bengal Static site generator Docs
∿∿ Purr Content runtime —
⌁⌁ Chirp Web framework Docs
ʘ chirp-ui Component library ← You are here Docs
=^..^= Pounce ASGI server Docs
)彡 Kida Template engine Docs
ฅᨐฅ Patitas Markdown parser Docs
⌾⌾⌾ Rosettes Syntax highlighter Docs

Python-native. Free-threading ready. No npm required.