UI Kit — 114 Components
New in v2.11–v2.15Total Pool
$161,107
Available
$98,432
Claimed
$62,675
Active Reps
85
Recent Contributions
| Invoice # | Rep | Customer | Amount | Source | Status | Campaign |
|---|---|---|---|---|---|---|
| INV-20260312 |
Kevin Fischer Iowa |
Midwest Grain Co | $4,218.50 | Price Page | Available | Q2 2026 Incentive |
| INV-20260309 |
Randy Symes North |
Northern Steel Works | $7,892.00 | Job Contract | Claimed | Q2 2026 Incentive |
| INV-20260305 |
Mark Beaver West |
Pacific Hydraulics | $2,105.75 | Kit/Prod | Available | Q2 2026 Incentive |
| INV-20260228 |
Todd Townsend South |
Gulf Coast Mfg | $11,340.00 | BTS | Claimed | Q1 2026 Payout |
| INV-20260225 |
Eric Striegel VP |
Heartland Equipment | $15,600.25 | Price Page | Available | Q2 2026 Incentive |
| INV-20260220 |
Greg Ervin Iowa |
Prairie Valley Feed | $3,475.00 | Job Contract | Available | Q2 2026 Incentive |
| INV-20260215 |
Jake Morrison West |
Summit Precision Inc | $8,920.50 | Kit/Prod | Claimed | Q1 2026 Payout |
| INV-20260210 |
Dan Larsen North |
Tri-State Fabrication | $5,310.00 | BTS | Available | Q2 2026 Incentive |
Form Elements
Buttons
Status Badges
Campaign Cards
Q2 2026 Incentive Pool
Apr 1, 2026 - Jun 30, 2026
Q3 2026 Performance Bonus
Jul 1, 2026 - Sep 30, 2026
Q1 2026 Payout
Jan 1, 2026 - Mar 31, 2026
Category Editor Preview
Category Settings
Targets
Scoring Ranges
| Min % | Max % | Payout % | Label |
|---|---|---|---|
| 0 | 50 | 0% | Below Threshold |
| 50 | 80 | 50% | Developing |
| 80 | 100 | 80% | On Track |
| 100 | 120 | 100% | Target Met |
| 120 | 999 | 150% | Exceeds (Capped) |
Description List
Skeleton Loaders
Text
Card
Avatar
Stat Card
Slide-Over / Drawer
Order Details
Radio Group
Sortable Table
| Status | |||
|---|---|---|---|
| Jane Cooper | Iowa | 92.4% | Active |
| Bob Wilson | North | 87.1% | Active |
| Alice Park | West | 76.8% | Probation |
Dividers
Simple horizontal divider:
Divider with label:
Vertical divider (inline):
Button Group
View Toggle
Period Filter (sm)
Timeline / Activity Feed
Order shipped to customer
Tracking number: 1Z999AA10123456784
Payment approved
Authorized $4,285.00 via PO-20241031
Order modified by admin
Quantity changed from 10 to 12 on line item #3
Order created
Accordion / Collapsible
Flat (single open)
Nested (with children)
File Upload
Click to upload or drag and drop
PDF, XLSX, CSV · Max 10MB
With uploaded files
-
Q4-2024-Sales-Report.xlsx 2.4 MB
-
territory-map.pdf 856 KB
Chip / Tag Input
Notification Counter & Copy Button
Notification Badge
Copy to Clipboard
ORD-2024-00142
SSE Connection Status
Interactive demo — toggle:
Stepper / Wizard
Popover
Positions: bottom-start (default), bottom-center, bottom-end, top-*, left, right
Left-aligned
Panel's left edge aligns with trigger's left edge. No centering, no flicker.
Centered
Panel centers on trigger. Use when trigger is wide enough that centering looks natural.
Right-aligned
Panel's right edge aligns with trigger's right edge. Good for right-side nav items.
Top Nav with Slide-Down Panels
Click the bell or search icons to see slide-down panels. Dashboard and Settings are simple links.
Document Viewer Modal
Draggable, resizable modal with zoom controls for PDF and HTML documents.
Log Console
Standalone mode — embedded in page. Has level filters, search, pause/resume, copy line, auto-scroll.
Health Indicators, Status Dots & Environment Badges
Health Indicators (pulsing)
Status Dots (match/fail indicators)
Match Method Badges
Environment Badges
Validation Scores
Comparison Table
| Field | Invoice | ERP System | |
|---|---|---|---|
| PO Number | PO-2024-00847 | PO-2024-00847 | |
| Quantity | 12 | 10 | |
| Unit Price | $42.50 | $42.50 | |
| Ship-To | 123 Industrial Pkwy | – | 123 Industrial Parkway |
Bordered Cards, Service Health & Pipeline Flow
Order Acknowledgment
23
847
Accounts Payable
8
312
Receiving (muted)
0
156
Task Orchestrator
v2.4.1Processes
3
SSE Clients
12
Data Workers
v1.8.0Active
4/6
Queue
23
API Gateway
v1.2.3Uptime
0%
Last Seen
2h ago
Pipeline Flow
Async Select & Editable Fields
Loading State
Loaded State
Error Fallback
Could not load options — enter value manually
Editable Field Toggle
Freight
$ $Tax
$ $PO Number
Invoice Date
Search with Results
Simple Layout (label + description)
Multi-Column Layout (orders/invoices)
Form Group, Validation, Date Range, Time, Kbd
Keyboard Shortcuts
Inline Confirm
Truncate with Expand
This is a long block of text that demonstrates the truncation component. It contains multiple sentences that will be cut off after two lines with a "Show more" button below. When expanded, the full text is visible including this final sentence about territory assignments in the North Central region.
Page Footer & Sidebar User Block
Error Reference, Loading Overlay & Blocking Modals
Error Reference IDs
4-char Base34 code. Short enough to read over the phone. Click to copy.
Loading Overlay
Content underneath...
Loading scorecard...
Blocking Modals
Toast Notifications
Toasts stack top-right. Click buttons to trigger live demos. Sticky toasts stay until dismissed.
Authentication Modals
Sign In
API Authentication
Charts (Plotly.js)
Requires plotly-2.35.0.min.js in your template. If not loaded, a styled error appears instead.
Bar Chart — Regional Sales by Quarter
Line Chart — Revenue vs Target
Donut — Sales by Region
Gauge — KPI Score
Sparklines (pure SVG — no Plotly)
No Plotly needed. Use preserveAspectRatio="none" to fill container width.
Stat Cards with Sparklines
Revenue
$145.2K
+12.4%Orders
847
+3.1%Avg Score
87.3%
+2.1%Errors
3
-2Chart Card (with time range selector)
Revenue by Region
Grouped quarterly comparison
Live Chart (SSE-driven)
Live Metrics — auto-updating every 2s
StreamingData Table — Sortable, Filterable, Paginated
Config-driven: column definitions control sort, filter type (text/select), cell rendering (text/badge/currency/date). Built-in search, pagination, row selection.
| No rows match filters | ||||||
Score Badges
Goal Progress
Revenue — exceeding goal
Revenue — below target
Margin % — percent format
Error Rate — inverse (lower is better)
Compact mode (for table cells)
Accordion Table
|
|
|||||
| Total |
Target Rows
Form Sizing
Small
Medium (default)
Large
Expandable Record
Lines
Amount
Dynamic Badges
Click to cycle status:
Alpine x-for badges:
Slider / Range Input
Single Slider
Volume:
Brightness (step 5):
Range Slider (dual handle)
Price range: $ — $
OTP / Verification Code Input
6-digit numeric
Entered:
4-character alphanumeric (large)
Entered:
Scroll Area
Vertical scroll (auto-hide)
Horizontal scroll
Context Menu
Carousel
Resizable Panels
Left Panel
Drag the divider to resize. This panel shows a navigation or filter area.
Right Panel
Main content area. Resizes proportionally as you drag the handle.
Calendar
Single date selection
Selected:
Date range selection
Range: to
Column Filters
Filter toolbar with column filters
Sources: | Date: | Status:
Scorecard Components
Score Hero
Blended Payout Score
Score Gauge
Revenue Target
112% of goal
Pass / Fail Badges
Category Card (ranged)
Gross Profit Revenue
Weight: 40%
Category Card (pass/fail)
CRM Compliance
Weight: 10%
Container queries (v2.0)
v2 cards opt into Tailwind v4 container queries via the @container utility.
When a parent declares @container, descendant
@sm: / @md: /
@max-xs: variants react to the parent's width
rather than the viewport. Drop the same card into a sidebar or split-pane and it auto-collapses to a single column.
Note: the visual demo below uses raw
container-type: inline-size
CSS rather than Tailwind's @container utility so the snippet
stays self-contained and easy to paste into arbitrary markup. The canonical reference using real macros + Tailwind v4 utility classes lives at
examples/container_queries.html —
it renders the same stat_card_spark macros under
Tailwind v4 in two parents of different widths and is the source of truth
for how production code should opt in.
Wide host (≥ 480px container)
Total
$161K
Available
$98K
Pending
42
Active Reps
23
4-up grid, sparklines visible.
Narrow host (< 480px container, e.g. sidebar)
Total
$161K
Available
$98K
Pending
42
Active Reps
23
Same cards collapse to single column; sparklines hidden — driven by container width, not viewport.
Production usage (Tailwind v4 / v3 + container-queries plugin):
{# Parent opts into container queries — cards inside react to its width. #}
<div class="@container max-w-md">
{{ '{{' }} stat_card_spark("Total", "$161K", data=trend) {{ '}}' }}
{{ '{{' }} stat_card_spark("Avg", "$ 98K", data=trend) {{ '}}' }}
</div>
{# stat_card_spark already wraps itself in @container, so the sparkline
auto-hides at @max-xs and the badge wraps cleanly without any extra
props on the macro — purely structural opt-in. #}v2.11–v2.15 Additions
Components and store additions shipped after v2.10. Each block below is a live demo — toggle dark mode in the header to see both palettes. The full parameter schema for every macro lives in docs/REFERENCE.md.
count_badge v2.12
Inline numeric badge with overflow rendering — count=250, max=99 renders "99+".
$store.ui viewport + route state v2.13
Reactive breakpoint, isMobile, matchBreakpoint(), and currentRoute from core-stores.js. Resize the window — the readout updates live (rAF-throttled).
validation_strip v2.14 · #356
Attachable pass/warn/fail/neutral segmented bar for card headers. Colors match validation_score; role="meter" + aria-valuetext.
status_page with polling v2.14 · #355
Live health board — simulated fetch every 4s. Banner + pill colors derive from overall status. Polling pauses while the tab is hidden (try switching tabs).
alpine_dropdown_portal v2.14
Menu teleports to <body> so overflow-hidden ancestors can't clip it. Escape + click-outside both dismiss.
(Demo inlines the panel instead of teleporting — the macro uses x-teleport="body" to escape clipping parents.)
alpine_debounced_input v2.14
Input with x-model.debounce.Nms baked in. Type fast — the "debounced value" only updates 300ms after you stop.
alpine_x_init_boundary v2.14
Captures parent-scope expressions into local reactive properties via x-effect with a _lastValue guard. Canonical fix shape for the method-body scope trap (#245/#247).
reactive_list v2.14
x-for with keyed children, enter/leave transitions, and drag-to-reorder. Drag rows to reorder — the debug readout shows the current order.
progress_bar(value_var=, max_var=) v2.20 · #406
Reactive width + label + auto-color for streaming progress. Click Tick to advance; with color="auto" the bar changes color as it crosses thresholds (red<50 → amber<75 → blue<100 → green=100).
card(clickable=, on_click=, aria_label_var=) v2.20 · #405
Cards as button-role selection tiles: role="button", tabindex="0", click + enter + space all fire on_click, plus a keyboard focus ring. Try Tab through the tiles and press Enter or Space.
rows
Selected:
card(x_style_var=) v2.20 · #402
Alpine :style on the outer wrapper. Use for user-resizable dashboard tiles where grid-column: span N comes from state.
card(collapsible=, open_var=) v2.20 · #401
Sectioned-variant header becomes a toggle: chevron rotates, body wraps in x-show + x-collapse. The header_right slot is wrapped in @click.stop so nested buttons don't toggle the card.
Tables Used by This Process
Click the header or press Space/Enter to toggle
expandable_record(on_expand=) v2.20 · #403
Fires only on the expand transition (not collapse) — the toggle-then-guard pattern prevents lazy-load calls from double-firing on rapid re-toggle. Click a row to simulate a detail fetch; watch the "expands" counter tick only on open.
Lazy-loaded detail for — fetched once per expansion.
service_health_card(status_var=) + pipeline_flow(steps_var=) v2.20 · #399
Reactive variants for polled Alpine status. Click the buttons to simulate a suite health change — border, dot, label, and pipeline connectors all re-paint from the shared Alpine state without a page reload.
Ingest Pipeline
status:Both macros still accept their static Jinja inputs (status= / steps=) as a pre-hydration server render; the vars shown here are the additive reactive path.
pipeline_flow(variant="metrics") v2.21 · #409
Boxed-tile layout with count + label + success_rate per stage. Tile color is derived from success_rate against the thresholds param (default [95, 80]): ≥95 green, ≥80 amber, >0 red, else gray. Both variants — status (v2.20) and metrics (v2.21) — are rendered below from the same Alpine dataset.
Static steps= works identically — same thresholds, same palette. The thresholds=[99, 95] param tightens the green band for SLA-strict pipelines.
backup_list v2.24 · #417
Rolling list of DB backup files with state-dependent restore actions. Each row is in one of three states (live / staged / archived) and only the actions valid for that state render. busy_var globally locks the table while an operation is in flight; consumer-owned confirm_modal wires through shared Alpine scope.
The demo handler simulates a 900ms operation — note that every action button across the table disables while busy is true. In a real app, load_live and promote would flip a confirm_modal rather than firing immediately.
alpine_json_island v2.19 · #350
Server payload in a <script type="application/json"> tag, parsed at the x-data boundary. _safe_json escapes <, >, & in string values so </script> inside the payload cannot break out.
The note contains a literal </script> sequence — view source to confirm the payload escaped it to so the browser didn't terminate the tag early.
alpine_shortcut_binding v2.19 · #350
Window-scoped keyboard shortcut with an optional when= guard. Focus this demo (or click into it) then press the shortcuts below.
alpine_polling_timer v2.19 · #350
setInterval with Alpine lifecycle — automatic teardown, pause on tab hidden, immediate tick on resume, reactive active_var. Toggle the checkbox or switch tabs to see pause/resume.
Switch to another tab and come back — the counter pauses while hidden and fires an immediate tick on return (no up-to-intervalms wait for fresh data).
modal(size=...) v2.15.0 · #368
Modals now accept a size param mapping to Tailwind's max-w-* scale. Click any button to open its corresponding size.
Size:
Master-detail and data-heavy modals fit here without bypassing the macro (and losing $store.ui.modalStack + a11y wiring).
Reactive placeholder + event modifiers v2.15.0 · #357 #369
placeholder_var binds a live expression; on_input_modifiers="debounce.300ms" restores the .debounce.Nms Alpine modifier that pre-macro inline HTML had. Type fast and watch the ticker stall.
slide_over + document_viewer modal stacking v2.15.1 · #374
Both register with $store.ui.modalStack so Escape closes only the top one. Open several layers and press Esc repeatedly — they unstack one at a time.
core-stores.js; the mechanics are tested in tests/test_js.py::TestCoreStoresV214ModalStack and verified in tests/test_macros.py::TestModalStackIntegration.
v2.28 — Composable slots (Phase 1 of #420)
Two macros — data_table and stat_card — accept a {% raw %}{% call(slot) macro(...) %}{% endraw %} wrapper that lets the consumer compose any markup (including nested macros) into named cell regions. Backwards-compatible: every existing call site renders exactly as in v2.27. Full convention in docs/CONVENTION.md. Closes consumer issue #437.
data_table — per-column slot, dispatched by column key v2.28 · #437
Replicates COE's extraction-models reference table: model name with conditional Recommended badge + sub-text description, provider/status/tier badges in adjacent cells. Each column with "slot": true delegates rendering to the consumer's {% raw %}{% call(slot) %}{% endraw %} body, which dispatches on slot (the column key). Inside the body, row and ri are Alpine identifiers — bind reactively per row.
| Model | Provider | Tier | Status | Added |
|---|---|---|---|---|
|
Recommended
|
Four columns slot in rich content composed via badge + health_indicator nested macro calls; the Added column has no slot flag and falls through to the macro's existing default cell rendering. The 80-line hand-rolled equivalent in ifp_coe/templates/partials/tabs/settings_tab.html:454 can now be replaced.
stat_card — fixed-name slots (icon, value, trend) v2.28 · #420
Wrap with {% raw %}{% call(slot) stat_card(label="…") %}{% endraw %} to take over the icon, value, and trend cells. Use this when the existing value_html escape hatch isn't ergonomic — e.g. composing a sparkline in the trend slot or a multi-color value with prefix/suffix.
Revenue (MTD)
Revenue (MTD)
$1,234.56
Margin
Left: all three slots filled (composed icon + multi-color value + sparkline). Middle: no {% raw %}{% call %}{% endraw %} wrapper, default rendering. Right: only the value slot filled — icon and trend keep their defaults because per-slot fallback kicks in when the caller emits empty for a given slot. Wrapping the macro doesn't cost you the chrome defaults you didn't override.