Installation
Live Demos HubInstallation
Interactive production-grade hypermedia component for HTMXUI.
Interactive Preview
Installation & Quickstart
Set up the hyperreactive HTMXUI suite in your project in under 2 minutes. Zero NPM build step required.
Prerequisites
Tailwind CSS
v3 or v4 with standard design token variables
Any Backend
Python, Go, Rust, PHP, Bun, Node, Ruby, Java
Zero Node Modules
No React runtime, no JSX, no webpack bundler
Step 1 — Include Core Scripts
Add HTMX and the HTMXUI engines to your base HTML layout. htmx-bolt.js is the only required extension for signals and reactivity.
<!-- 1. HTMX Core --> <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- 2. Signal-Based Reactive Engine (~8KB) --> <script src="/htmx-bolt.js"></script> <!-- Optional: In-Memory Fuzzy Search & Multi-Filter Engine --> <script src="/htmx-flash.js"></script> <!-- Optional: Form Validation & Optimistic UI Engine --> <script src="/htmx-form.js"></script> <!-- Optional: FLIP Vibe & Layout Animation Engine --> <script src="/htmx-vibe.js"></script> <!-- Optional: Focus Trap & Roving Tabindex Engine --> <script src="/htmx-a11y.js"></script> <!-- Optional: Visual Spatial Node Canvas Engine --> <script src="/htmx-canvas.js"></script>
Step 2 — Configure CSS Design Tokens
HTMXUI components use CSS custom properties for instant dark mode and theme switching. Add these variables to your stylesheet:
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.5rem;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
}
}
Step 3 — Reactive Grammar & Directives
Bolt provides a complete signal-based declarative grammar directly inside HTML attributes:
| Directive | Description | Example |
|---|---|---|
| hx-state | Defines local reactive component context | hx-state="{ count: 0, items: [] }" |
| hx-computed | Derived memoized properties | hx-computed="{ total: price * qty }" |
| hx-model | Two-way data binding with modifiers | hx-model.number="qty" |
| hx-for | Structural list rendering on template | <template hx-for="item in items"> |
| hx-if | Structural conditional DOM mounting | <template hx-if="user.isLoggedIn"> |
| hx-on:event | Event handlers with modifiers (.prevent, .debounce) | hx-on:click.prevent="count++" |
| hx-transition | Smooth enter/leave CSS transitions | hx-transition="fade" |
| hx-validate | Declarative input validation rules | hx-validate="required|email|min:5" |
Step 4 — Complete Example
<!-- Reactive Shopping Cart with Signals, Computed Total, and hx-for list -->
<div hx-state='{
newItem: "",
items: [
{ id: 1, name: "Mechanical Keyboard", price: 120, qty: 1 },
{ id: 2, name: "Wireless Mouse", price: 60, qty: 2 }
]
}'
hx-computed='{
totalPrice: items.reduce((sum, i) => sum + (i.price * i.qty), 0)
}' class="p-6 border border-border rounded-xl bg-card space-y-4">
<h3 class="text-lg font-bold">Hyperreactive Shopping Cart</h3>
<!-- Two-way input binding -->
<div class="flex gap-2">
<input type="text" hx-model="newItem" placeholder="Add item name..." class="px-3 py-2 border rounded-md text-sm flex-1">
<button hx-on:click='if(newItem.trim()) { items.push({ id: Date.now(), name: newItem, price: 40, qty: 1 }); newItem = ""; }' class="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm font-medium">Add</button>
</div>
<!-- List rendering with hx-for -->
<div class="divide-y border rounded-md overflow-hidden">
<template hx-for="(item, idx) in items">
<div class="p-3 flex items-center justify-between bg-background">
<span hx-text="item.name" class="font-medium text-sm"></span>
<div class="flex items-center gap-3">
<span class="text-sm text-muted-foreground">$<span hx-text="item.price"></span></span>
<input type="number" hx-model.number="item.qty" min="1" class="w-16 px-2 py-1 border rounded text-xs">
<button hx-on:click="items.splice(idx, 1)" class="text-destructive text-xs hover:underline">Remove</button>
</div>
</div>
</template>
</div>
<!-- Computed reactive total -->
<div class="flex justify-between items-center pt-2 font-bold text-base">
<span>Total Amount:</span>
<span class="text-primary">$<span hx-text="totalPrice">0</span></span>
</div>
</div>
HTML Source
<div class="space-y-10 max-w-4xl py-6">
<!-- Title & Subtitle -->
<div class="space-y-3">
<h1 class="text-4xl font-extrabold tracking-tight text-foreground">Installation & Quickstart</h1>
<p class="text-lg text-muted-foreground leading-relaxed font-medium">
Set up the hyperreactive HTMXUI suite in your project in under 2 minutes. Zero NPM build step required.
</p>
</div>
<!-- Section: Prerequisites -->
<div class="space-y-4">
<h2 class="text-2xl font-bold tracking-tight text-foreground border-b border-border pb-2">Prerequisites</h2>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
<div class="font-semibold text-sm mb-1 text-foreground">Tailwind CSS</div>
<div class="text-xs text-muted-foreground">v3 or v4 with standard design token variables</div>
</div>
<div class="p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
<div class="font-semibold text-sm mb-1 text-foreground">Any Backend</div>
<div class="text-xs text-muted-foreground">Python, Go, Rust, PHP, Bun, Node, Ruby, Java</div>
</div>
<div class="p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
<div class="font-semibold text-sm mb-1 text-foreground">Zero Node Modules</div>
<div class="text-xs text-muted-foreground">No React runtime, no JSX, no webpack bundler</div>
</div>
</div>
</div>
<!-- Section: Step 1 — Include Core Scripts -->
<div class="space-y-4">
<h2 class="text-2xl font-bold tracking-tight text-foreground border-b border-border pb-2">Step 1 — Include Core Scripts</h2>
<p class="text-sm text-muted-foreground leading-relaxed">
Add HTMX and the HTMXUI engines to your base HTML layout. <code class="bg-muted px-1.5 py-0.5 rounded text-xs font-mono">htmx-bolt.js</code> is the only required extension for signals and reactivity.
</p>
<div class="bg-[#1e293b] text-[#e2e8f0] rounded-xl p-4 font-mono text-xs overflow-x-auto leading-relaxed shadow-sm">
<pre><!-- 1. HTMX Core -->
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<!-- 2. Signal-Based Reactive Engine (~8KB) -->
<script src="/htmx-bolt.js"></script>
<!-- Optional: In-Memory Fuzzy Search & Multi-Filter Engine -->
<script src="/htmx-flash.js"></script>
<!-- Optional: Form Validation & Optimistic UI Engine -->
<script src="/htmx-form.js"></script>
<!-- Optional: FLIP Vibe & Layout Animation Engine -->
<script src="/htmx-vibe.js"></script>
<!-- Optional: Focus Trap & Roving Tabindex Engine -->
<script src="/htmx-a11y.js"></script>
<!-- Optional: Visual Spatial Node Canvas Engine -->
<script src="/htmx-canvas.js"></script></pre>
</div>
</div>
<!-- Section: Step 2 — Setup Tailwind CSS Variables -->
<div class="space-y-4">
<h2 class="text-2xl font-bold tracking-tight text-foreground border-b border-border pb-2">Step 2 — Configure CSS Design Tokens</h2>
<p class="text-sm text-muted-foreground leading-relaxed">
HTMXUI components use CSS custom properties for instant dark mode and theme switching. Add these variables to your stylesheet:
</p>
<div class="bg-[#1e293b] text-[#e2e8f0] rounded-xl p-4 font-mono text-xs overflow-x-auto leading-relaxed shadow-sm">
<pre>@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.5rem;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
}
}</pre>
</div>
</div>
<!-- Section: Step 3 — Reactive Directives Cheat Sheet -->
<div class="space-y-4">
<h2 class="text-2xl font-bold tracking-tight text-foreground border-b border-border pb-2">Step 3 — Reactive Grammar & Directives</h2>
<p class="text-sm text-muted-foreground leading-relaxed">
Bolt provides a complete signal-based declarative grammar directly inside HTML attributes:
</p>
<div class="overflow-x-auto rounded-xl border border-border bg-card shadow-sm">
<table class="w-full text-left text-sm border-collapse">
<thead class="bg-muted/50 border-b border-border text-foreground font-semibold">
<tr>
<th class="py-3 px-4">Directive</th>
<th class="py-3 px-4">Description</th>
<th class="py-3 px-4">Example</th>
</tr>
</thead>
<tbody class="divide-y divide-border text-muted-foreground text-xs font-mono">
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-state</td>
<td class="font-sans text-muted-foreground">Defines local reactive component context</td>
<td>hx-state="{ count: 0, items: [] }"</td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-computed</td>
<td class="font-sans text-muted-foreground">Derived memoized properties</td>
<td>hx-computed="{ total: price * qty }"</td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-model</td>
<td class="font-sans text-muted-foreground">Two-way data binding with modifiers</td>
<td>hx-model.number="qty"</td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-for</td>
<td class="font-sans text-muted-foreground">Structural list rendering on template</td>
<td><template hx-for="item in items"></td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-if</td>
<td class="font-sans text-muted-foreground">Structural conditional DOM mounting</td>
<td><template hx-if="user.isLoggedIn"></td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-on:event</td>
<td class="font-sans text-muted-foreground">Event handlers with modifiers (.prevent, .debounce)</td>
<td>hx-on:click.prevent="count++"</td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-transition</td>
<td class="font-sans text-muted-foreground">Smooth enter/leave CSS transitions</td>
<td>hx-transition="fade"</td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-validate</td>
<td class="font-sans text-muted-foreground">Declarative input validation rules</td>
<td>hx-validate="required|email|min:5"</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Section: Step 4 — Complete Working Example -->
<div class="space-y-4">
<h2 class="text-2xl font-bold tracking-tight text-foreground border-b border-border pb-2">Step 4 — Complete Example</h2>
<div class="bg-[#1e293b] text-[#e2e8f0] rounded-xl p-4 font-mono text-xs overflow-x-auto leading-relaxed shadow-sm">
<pre><!-- Reactive Shopping Cart with Signals, Computed Total, and hx-for list -->
<div hx-state='{
newItem: "",
items: [
{ id: 1, name: "Mechanical Keyboard", price: 120, qty: 1 },
{ id: 2, name: "Wireless Mouse", price: 60, qty: 2 }
]
}'
hx-computed='{
totalPrice: items.reduce((sum, i) => sum + (i.price * i.qty), 0)
}' class="p-6 border border-border rounded-xl bg-card space-y-4">
<h3 class="text-lg font-bold">Hyperreactive Shopping Cart</h3>
<!-- Two-way input binding -->
<div class="flex gap-2">
<input type="text" hx-model="newItem" placeholder="Add item name..." class="px-3 py-2 border rounded-md text-sm flex-1">
<button hx-on:click='if(newItem.trim()) { items.push({ id: Date.now(), name: newItem, price: 40, qty: 1 }); newItem = ""; }' class="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm font-medium">Add</button>
</div>
<!-- List rendering with hx-for -->
<div class="divide-y border rounded-md overflow-hidden">
<template hx-for="(item, idx) in items">
<div class="p-3 flex items-center justify-between bg-background">
<span hx-text="item.name" class="font-medium text-sm"></span>
<div class="flex items-center gap-3">
<span class="text-sm text-muted-foreground">$<span hx-text="item.price"></span></span>
<input type="number" hx-model.number="item.qty" min="1" class="w-16 px-2 py-1 border rounded text-xs">
<button hx-on:click="items.splice(idx, 1)" class="text-destructive text-xs hover:underline">Remove</button>
</div>
</div>
</template>
</div>
<!-- Computed reactive total -->
<div class="flex justify-between items-center pt-2 font-bold text-base">
<span>Total Amount:</span>
<span class="text-primary">$<span hx-text="totalPrice">0</span></span>
</div>
</div></pre>
</div>
</div>
<!-- CTA -->
<div class="pt-4 flex gap-4">
<a href="/docs/components/button" class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90">
Browse Components →
</a>
</div>
</div>