shadcn-htmx
shadcn-style UI components for htmx v4 + Tailwind CSS v4 — built on web standards, not hacks.
📖 Documentation & live previews → shadcn-htmx.productdevbook.com
One design. 82 components. Five backends — Hono JSX, Jinja2, Go templates, Phoenix, and raw HTML — generated from a single source of truth. Copy what you need, ship it in any stack.
This is the first public release of shadcn-htmx 🎉 — a component library for people who render HTML on the server and reach for htmx, not a SPA framework.
✨ Why it's different
Most component libraries assume React. shadcn-htmx assumes the platform: a real <button>, a real <dialog>, real aria-*, real <input type="date">. Behaviour the browser already ships is never re-implemented in JavaScript.
- 🌐 Web standards first — every component is justified against the WAI-ARIA APG, MDN, the htmx v4 source, and the Tailwind v4 source before it ships. No polyfills, no emulation.
- 🎨 Five flavours, one design — the same accessible markup as a typed Hono JSX component, a Jinja2 macro, a Go
html/template, a Phoenix function component, or a copy-paste HTML snippet. - ⚡ Server-rendered + htmx-native — wired for the htmx v4 attribute set: live search, infinite scroll, inline edit, optimistic toggles.
- ♿ Accessible by construction — keyboard interaction, focus management, and ARIA roles checked against the spec, enforced by an axe-core + APG Playwright suite.
- 📋 Your code, your repo — copy a component in and it's yours. No runtime dependency, no version lock-in.
🎨 Five flavours, one source of truth
| Flavour | Language / engine | What you copy |
|---|---|---|
| Hono JSX | TypeScript (.tsx) |
A typed component you import |
| Jinja2 | Python templates (.html) |
A {% macro %} you call |
| Go | html/template (.tmpl) |
A {{ define }} template |
| Phoenix | Elixir (.ex) |
A ~H function component |
| HTML | Raw markup (.html) |
A copy-paste snippet |
The Hono JSX file is canonical; the other four mirror its semantics exactly — same elements, roles, ARIA, and Tailwind classes. Only the templating syntax differs.
🚀 Quick start
The fastest path is the flavour-aware CLI. Pick your stack once, then add components — only your framework's file lands in your project.
npx shadcn-htmx init --flavour jinja # jsx | jinja | go | phoenix | html
npx shadcn-htmx add button dialog combobox # writes only the Jinja2 files
npx shadcn-htmx list # browse every componentPrefer the stock shadcn CLI? The registry follows the shadcn registry-item schema:
npx shadcn@latest add https://shadcn-htmx.productdevbook.com/r/button.json🧩 82 components, six categories
Forms · Layout · Display · Feedback · Overlays · Navigation — every interactive one mapped to its WAI-ARIA APG pattern, every other to a native HTML element, Web API, or modern CSS feature. Dialog, Combobox, Listbox, Menubar, Tree, Date Time Picker, Carousel, Toast, Active Search, Edit In Place, Optimistic Toggle, and 70+ more.
👉 Browse them all with live previews →
🔗 Links
- 📖 Docs & live previews: https://shadcn-htmx.productdevbook.com
- 📦 Registry endpoint: https://shadcn-htmx.productdevbook.com/r
- 💻 Source: https://github.com/productdevbook/shadcn-htmx
- 💖 Sponsor: https://github.com/sponsors/productdevbook
💖 Support shadcn-htmx
If shadcn-htmx saves you time, consider sponsoring on GitHub — it funds new components, the CLI, and keeping the docs current with htmx + Tailwind upstream.