shadcn-htmx — shadcn for htmx v4 + Tailwind v4FrameworkHono JSXJinja2Go templatePhoenixHTML

htmx v4 — early preview→shadcn-style components, for the server.<br>A web-standards component library for htmx v4 + Tailwind v4. One source of truth — five flavours: Hono JSX, Jinja2, Go templates, Phoenix, and raw HTML. Copy what you need, ship in any stack.<br>Get startedStar on GitHub

Web standards first<br>Real , real aria-pressed, real focus management. No reinventing what the platform already ships.

Five flavours, one design<br>Hono JSX, Jinja2, Go templates, Phoenix function components, and a raw HTML snippet — all generated from the same source of truth.

Copy, CLI, or curl<br>Install via npx shadcn add, curl the source file straight into your templates folder, or copy-paste the snippet. Your code, your style.

Tailwind v4 native<br>CSS-first config with @theme, @utility, and the Oxide engine. No legacy tailwind.config.js.

APG-compliant<br>Each component follows the WAI-ARIA Authoring Practices contract — keyboard interaction, focus management, ARIA roles, all checked against the spec source.

htmx v4 attribute set<br>All components type the v4 attribute set — hx-disable, the renamed swap modifiers, the new request lifecycle hooks.

Sponsors<br>Backed by people who build with this.<br>shadcn-htmx is open source and free to use. Sponsorship pays for maintenance time, new components, and keeping the docs current with htmx and Tailwind upstream releases.

Become a sponsor<br>Thank you to everyone supporting the project. Tiers are sized by sponsorship amount.<br>github.com/sponsors/productdevbook →<br>Sponsors updated 2026-06-03.

Components<br>Eighty-two components. Every one, every flavour.<br>Each ships with the same install, live examples, and source view across all five frameworks — Hono JSX, Jinja2, Go templates, Phoenix, and raw HTML.

Forms

Autocomplete<br>Native typeahead — datalist suggestions, htmx-streamed.

Output<br>Live result region for a calculation or server action — native with an implicit aria-live so htmx swaps announce themselves.

Segmented Control<br>{ label: "Segmented Control", href: "/docs/segmented-control", blurb: "Joined radio bar — pick a value, not a panel." },

Rating<br>{ label: "Rating", href: "/docs/rating", blurb: "Star rating as a native radio group — per-star labels, CSS hover preview, submits a real value. Zero JS." },

Color Picker<br>Color Picker — native styled as a shadcn swatch with an optional live hex readout. The browser owns the whole picker UI and validates the CSS color.

Autosize Textarea<br>Autosize Textarea — a that grows and shrinks to fit its content between min/max bounds using one CSS line (field-sizing: content) instead of the classic scrollHeight JS loop. Zero JavaScript; degrades to a plain fixed field where unsupported.

Cascading Select<br>Cascading Select — a pair of dependent native selects where picking the parent reloads the child's options (and an optional detail card) from the server in one request, using htmx's default change trigger plus an hx-swap-oob fragment. No JavaScript.

Form Field<br>Field-row wrapper composing label, control, description, and error — auto-wiring aria-describedby and a native :user-invalid styling hook. Plus a fieldset/legend group variant. Zero JS.

File Upload<br>Drag-and-drop or click to pick files — a native file input with previews and a multipart upload bar.

Date Time Picker<br>Native date, time, datetime-local, month and week fields with min/max/step constraints and normalized values — a web-standards date/time picker with no JS calendar library.

Active Search<br>Debounced live-search box that filters a results list as you type — inline spinner, stale-request cancellation, and a no-JS Enter fallback.

Edit In Place<br>Read-only record that swaps to a pre-filled form; Save PUTs, Cancel re-fetches.

Button<br>Six variants, four sizes, toggle + htmx hooks.

Input<br>Native types, ARIA-invalid, htmx live search.

Textarea<br>Auto-resize via field-sizing, htmx autosave.

Label<br>Click-to-focus, peer-disabled aware.

Checkbox<br>Indeterminate support, peer-checked indicator.

Combobox<br>Native datalist + htmx-filtered listbox.

Switch<br>role=switch pill, save-on-toggle pattern.

Radio Group<br>Arrow-key cycle straight from the platform.

Select<br>Native dropdown, cascading htmx demo.

Slider<br>Native range, full keyboard contract.

Number Input<br>Native number spinbutton with −/+ steppers

Range Slider<br>Two-thumb range from native range inputs

Listbox<br>Scrollable single/multi-select list (APG listbox)

Layout

Exclusive Accordion<br>Native details/summary, exclusive via shared name — zero JS.

Scroll Area<br>Constrained-overflow region with a themed native scrollbar and CSS-only fade masks that hint at more content — zero JavaScript.

Snap List<br>The bare scroll-snapping rail — gallery strip, chip row, media shelf, date rail. Pure CSS scroll-snap, zero JavaScript.

Container Card<br>Container Card — a card that adapts to its own width, not the viewport. The same markup stacks in a sidebar and goes side-by-side in a wide column,...