Basic Card
Standard card with header and body.
Composer strip (does not scroll with the thread)
Standard button variants, sizes, and states.
Square icon-only buttons for toolbars and dense UIs.
Form content above the action bar...
Shimmer, ripple, and pulsing effects for CTAs.
Standard cards with header, body, footer, and icon support.
Standard card with header and body.
Icon + badge in header, vertically centered.
Card with header actions and icon.
Surface chrome for dashboard tiles: set id on the outer <article> (or <a> for link KPIs) so HTMX can swap into it (hx-target="#…"). In Kida, use card(…, attrs_map={"id": "my-widget"}) — same for config_card and metric_card.
Plain HTML preview of the element macros render.
This card body can be collapsed/expanded.
Gradient border and gradient header variants.
Animated gradient border via border_variant="gradient".
Gradient header background via header_variant="gradient".
Gradient border + gradient header together.
Glow, spotlight, and border beam effects.
Mouse-following radial glow.
Accent-colored variant.
Auto-rotating spotlight. Pure CSS.
Rotating conic gradient border.
Green beam variant.
Amber beam variant.
KPI cards with icon badges, trend arrows, and footer links.
CSS @property animated counters — count from 0 on load.
Default table
| Name | Status | Role | Last Active |
|---|---|---|---|
| Alice Chen | Active | Admin | 2 min ago |
| Bob Smith | Away | Editor | 1 hour ago |
| Carol Davis | Offline | Viewer | 3 days ago |
Per-column alignment + column widths
| Service | Status | Requests | Latency (ms) |
|---|---|---|---|
| api-gateway | Healthy | 12,847 | 23 |
| auth-service | Healthy | 8,203 | 41 |
| worker-pool | Degraded | 3,912 | 187 |
Compact + striped + row hover
| Key | Value | TTL |
|---|---|---|
| session:abc123 | {"user":"alice"} | 3600s |
| cache:homepage | {"html":"..."} | 300s |
| rate:10.0.0.1 | {"count":42} | 60s |
| lock:deploy | {"owner":"ci"} | 120s |
Empty state
| Name | Status | Actions |
|---|---|---|
| ◇ No records found | ||
Enhanced with icons, avatars, semantic colors, time column, and hoverable rows.
Horizontal (default term width)
Custom term width (12rem) + right-aligned details
Narrow term width (6rem) + compact
Center-aligned details
Hoverable rows
Divided rows
With icons
Relaxed spacing + divided + hoverable
Pure CSS tooltips with 4 positions. Dark-mode aware.
Size, color variants, and label-inside-track.
macOS-style dock with magnification on hover.
Gradient, mesh, and glass surface variants.
Faceted pill row (not the same as the filter bar form toolbar). Pairs with filter_group + filter_chip in Kida.
Small caps section label inside cards and dense panels.
Use label_overline(..., section=true, tag="h3") for accessible headings.
Mutually exclusive mode switcher (segmented_control radiogroup).
HTMX-safe region that opts out of inherited hx-select / swap rules (safe_region / fragment_island). See docs/DND-FRAGMENT-ISLAND.md.
Inner mutations do not inherit boosted navigation swap settings from the app shell.
Resizable split panel with draggable handle.
App shell pages that should own the viewport (chat, dashboards) use chirpui-app-shell__main--fill on <main>, a chirpui-page-fill root inside #page-content, and chat_layout(..., fill=true) when using the chat layout. Scroll stays on inner regions (e.g. chirpui-chat-layout__messages-body), not on #main. See docs/LAYOUT-VERTICAL.md in the chirp-ui repo.
{% block main_shell_class %}chirpui-app-shell__main--fill{% end %}
{% block content %}
<div class="chirpui-page-fill">
{% from "chirpui/chat_layout.html" import chat_layout %}
{% call chat_layout(fill=true, show_activity=false) %}
{% slot messages %}
<div class="chirpui-chat-layout__messages-body">…</div>
{% end %}
{% slot input %}…{% end %}
{% end %}
</div>
{% end %}A comprehensive CSS-first component library for server-rendered applications using Kida templates, Alpine.js, and htmx.
No. chirp-ui uses no build tools — just CSS, HTML templates, and optional Alpine.js.
Yes. All components use semantic CSS custom properties that adapt via prefers-color-scheme and manual data-theme override.
135 templates. Zero build step. Dark mode included.
All five hero background variants.
background="gradient"
background="mesh" — multi-point radial gradient
background="animated-gradient" — respects prefers-reduced-motion
prefers-reduced-motion automatically.Inline: pip install chirp-ui
from chirp_ui import get_loader, register_filters
app = App(...)
register_filters(app)Try adjusting your search or filters.
Just shipped the new chirp-ui component library! 135 templates, zero build step, and it looks great in dark mode. 🚀
Step-based text reveal with blinking cursor. Pure CSS.
RGB-split distortion with pseudo-element layers.
Layered text-shadow glow with color and animation variants.
Drifting gradient blobs behind content. Great for hero sections.
Gentle drifting gradient blobs
Stronger, less blurred
Retro repeating-gradient line overlay. Pairs well with neon and glitch.
SVG noise texture overlay. Adds analog warmth.
Items rotating around a center point. Pure CSS animation.
Staggered star twinkles wrapping content.
Alpine-triggered celebration burst. Click the button!
Micro-interaction animation utilities. Hover to trigger.
Infinite horizontal scroll. Pauses on hover.
Diagonal streaks for hero sections
Gentle bobbing dots behind content
Matrix-style cascading ASCII characters from the chirp-ui icon map.
Accent-colored cascading symbols
Golden symbol cascade
Divine ascending sparkles in three parallax depth layers with glow pulse.
Ascending sparkles with parallax depth
Silver with enhanced drop-shadow glow
Mystical ASCII symbols drifting in three parallax depth layers.
Purple mystical runes
Cyan ice runes
Orange fire runes
Twinkling ASCII starfield with gentle drift. Configurable density and color.
Gentle twinkling starfield
Golden stars, faster twinkle
Cyan-tinted starfield
Also shown in Effect Cards above. Wraps any content.
This container has an animated accent beam tracing its border.
Box-drawing character frames. Four variants: single, double, rounded, heavy.
Glyph-centered separators using box-drawing characters.
Inline data visualization using Unicode block characters (▁▂▃▄▅▆▇█).
Terminal-style progress bars using block fill (█) and empty (░) characters.
Loading spinners that cycle through Unicode character sets via CSS step animations.
Switch control rendered with box-drawing track and Unicode knobs. Pure CSS transitions.
Default
Color variants
Sizes
Disabled
Vertical flip switch with block characters. Feels like a physical breaker panel.
Default + checked
Sizes
Breaker panel (combine with ascii-border for full effect)
Blinking status LEDs. Mainframe beep-boop energy.
Status lights with labels
Glyph shapes
Square pushbuttons that glow when lit. Toggle them on and off.
Toggle buttons (click to toggle)
Channel selector (4x2 grid)
Rotary dial selector. Click a position to turn the knob.
Pre-composed breaker set with frame, title, status indicators, and optional master switch.
Vertical mixing-board sliders with block-character fill levels.
Horizontal level bars with hot zones. The peak indicator glows red past 75%.
Retro LCD-style readouts with glowing digits. Perfect for dashboards, counters, clocks.
Form controls with Unicode ballot and circle characters. ☐ ☑ ○ ●
Pipeline/wizard progress using box-drawing connectors. [✓]───[●]───[○]
Deploy pipeline (step 3 of 5)
Setup wizard (step 1 of 4)
All complete
Mechanical departure-board characters that flip into place. Like Solari boards at train stations.
Default
Amber departure board
Green terminal variant
Scrolling text banner. Stock ticker / news crawler / alert bar.
Default
Warning (fast)
Success (slow)
Combining switches, tile buttons, indicators, knobs, and progress bars into a retro mainframe console.
Tables rendered with box-drawing character borders. Four line-style variants.
Single (default)
Double
Heavy + striped
Rounded + compact
Inline status labels framed with box-drawing characters.
Centered zero-data moments with personality.
Nothing here
No data to display yet
No results
Try adjusting your search
All clear
No issues to report
Hover and press these glyphs — they scale with spring physics on interaction. Pair with Alpine.js for hollow→filled swaps.
Stylized error states with ASCII art compositions for common HTTP errors.
The page you're looking for doesn't exist.
You don't have permission to view this.
Something went wrong on our end.
Temporarily offline for maintenance.
The server took too long to respond.
Loading placeholders using cycling braille/dot characters instead of shimmer gradients.
Composing ASCII border frames into a bento-style dashboard layout.