Introduction

Overview

Most component libraries assume React. shadcn-htmx assumes the platform: a real <button>, a real <dialog>, real aria-*, a real <input type="date">. Behaviour the browser already ships is never re-implemented in JavaScript.

There's no runtime to install. You copy a component's source into your project and own it — like shadcn/ui, but for server-rendered stacks. No bundler step, no hydration, no version lock-in.

What makes it different

• 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 snippet.
• Server-rendered & htmx-native. Wired for the htmx v4 attribute set: live search, infinite scroll, inline edit, optimistic toggles.
• Accessible by construction. Keyboard, focus, and ARIA roles checked against the spec — and against an axe-core + APG test suite.
• Your code, your repo. Copy a component in and it's yours. No runtime dependency.

Five flavours

The Hono JSX file is the canonical source; the other four mirror its semantics exactly — same elements, roles, ARIA, and Tailwind classes. Only the templating syntax differs.

How it works

registry.json is the manifest — one entry per component, listing its five flavour files. A build step emits public/r/<name>.json (the shadcn registry-item schema, with each file's contents inlined) plus an index.json. The docs site serves /r/*, so the CLI — or any HTTP client — pulls items straight over the wire. The CLI reads that same JSON and writes only the file for your chosen flavour.

Accessibility

Interactive components implement the matching WAI-ARIA Authoring Practices pattern — keyboard interaction, focus management, and ARIA roles checked against the spec. The repo ships a Playwright suite that enforces it: axe-core on every page, APG keyboard contracts, overlay geometry, and a console-error sweep.

Install

The fastest path is the flavour-aware CLI. Pick your stack once, then add components — only your framework's file lands in your project.

# pick your stack once (jsx | jinja | go | phoenix | html)
npx shadcn-htmx init --flavour jinja

# add one or many — only your flavour's file lands in your project
npx shadcn-htmx add button dialog combobox

# browse everything available
npx shadcn-htmx list

Prefer the stock shadcn CLI, a raw curl, or plain copy-paste? See the CLI page for every install path.