shadcn-htmx
shadcn-htmx.productdevbook.comFreemanifest served live
shadcn-style UI components for htmx v4 + Tailwind v4 — 82 web-standards components in 5 flavours (Hono JSX, Jinja2, Go, Phoenix, raw HTML), WAI-ARIA accessible, with a flavour-aware CLI.
Items
83
2026-08-03Every entry in its own registry.json, counted last night.Free to install
83
2026-08-03Item endpoints that returned source without credentials.Behind a key
0
2026-08-03Item endpoints that answered 401.Last push
2 months ago
38 stars. Both figures are GitHub's about this repository, not ones this index measured.Components
Search withinFreeits item endpoint answered without a keyPaidits item endpoint answered 401Unverifiedit serves no item endpoint we could ask
| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion | Collapsible stacked sections. Native <details>/<summary> + new HTML name attribute for zero-JS exclusive accordion. APG keyboard nav in site.js. | Components | Free | no deps | |
| Active Searchactive-search | A debounced live-search box (native <form role="search"> + <input type="search">) that filters an external results list/table as you type, with an inline loading indicator and stale-request cancellation. Submits as a normal GET search on Enter with zero JS. | Components | Free | no deps | |
| Alertalert | Boxed informational / success / warning / error message. Five variants + live-region politeness (off / polite / assertive). | Components | Free | no deps | |
| Alert Dialogalert-dialog | A modal that interrupts the user to confirm a consequential action. Native HTML <dialog> opened with showModal() and role="alertdialog"; not light-dismissible — the user must choose Cancel or the confirming action. | Components | Free | no deps | |
| Aspect Ratioaspect-ratio | A ratio-box wrapper that locks a child (image, video, iframe, embed, or chart slot) to a fixed width-to-height ratio while it resizes fluidly, eliminating layout shift. Built on the native CSS aspect-ratio property plus object-fit — one CSS declaration, zero JavaScript. | Components | Free | no deps | |
| Auto Gridauto-grid | A responsive, intrinsically-wrapping grid of equal cells with no breakpoints. Children flow into as many columns as fit at a configurable minimum item width, then grow to share the leftover space — the card-grid recipe, built on CSS Grid's repeat(auto-fit, minmax()) (the RAM pattern). Pure CSS, zero JavaScript. | Components | Free | no deps | |
| Autocompleteautocomplete | Free-text input with native typeahead suggestions: <input list> bound to a <datalist>. The browser owns the dropdown, filtering, and selection; htmx can stream a fresh <option> set in on input. The light native sibling of the APG combobox — it suggests, it does not constrain. | Components | Free | no deps | |
| Autosize Textareaautosize-textarea | Native <textarea> that grows/shrinks to fit its content between min/max bounds via the single CSS rule field-sizing: content — no scrollHeight JS hack. Degrades to a plain fixed field where unsupported; autosize={false} opts out to field-sizing: fixed. htmx autosave demo. | Components | Free | no deps | |
| Avataravatar | Round image with text/icon fallback. Native <img> + inline onerror handler reveals fallback on 404. Group + count subcomponents. | Components | Free | no deps | |
| Badgebadge | Small visual marker — status pill / counter / label. Six variants; renders as span (default) or anchor (with href). | Components | Free | no deps | |
| Breadcrumbbreadcrumb | A native <nav> landmark wrapping an <ol> of links that shows the path to the current page; the current page is a plain <span aria-current="page">, separators are aria-hidden. Zero JS. Ships in five flavours and follows the WAI-ARIA APG breadcrumb pattern. | Components | Free | no deps | |
| Buttonbutton | A native <button> element with shadcn variants, sized for htmx v4. Ships in five flavours: Hono JSX (TypeScript), Jinja2 macro, Go html/template, Phoenix function component, and a raw HTML snippet. Follows the WAI-ARIA APG button pattern. | Components | Free | no deps | |
| Cardcard | Structural container — Header / Title / Description / Action / Content / Footer slots. Pure layout primitive; pair with htmx for content swaps. | Components | Free | no deps | |
| Carouselcarousel | A slideshow built on native CSS scroll-snap (snap-x mandatory; each slide snap-center). WAI-ARIA carousel/slide roles, real <button> prev/next that scroll by one slide; touch, trackpad and keyboard scrolling are the platform's. | Components | Free | no deps | |
| Cascading Selectcascading-select | Two dependent native <select>s: choosing the parent reloads the child's <option>s — and an optional detail panel — from the server via an hx-swap-oob fragment. Cascade rides htmx's default `change` trigger on <select>; zero custom JS. | Components | Free | no deps | |
| Checkboxcheckbox | Native <input type="checkbox"> with shadcn polish — peer-checked SVG indicator, indeterminate support, htmx-ready. | Components | Free | no deps | |
| Collapsiblecollapsible | A single show/hide disclosure built on native <details>/<summary> — click, Space, or Enter toggle and the browser mirrors aria-expanded, all with zero JavaScript. A standalone disclosure, distinct from the grouped Accordion. | Components | Free | no deps | |
| Color Pickercolor-picker | A native <input type="color"> styled as a shadcn swatch, with an optional live hex readout. The browser supplies the entire picker UI and guarantees a valid CSS color value — we only restyle the swatch and never parse colors ourselves. | Components | Free | no deps | |
| Comboboxcombobox | Autocomplete text input. Native <datalist> variant (zero JS) + APG role=combobox + htmx-filtered listbox variant. | Components | Free | no deps | |
| Container Cardcontainer-card | A self-adapting card that restyles based on its own inline width, not the viewport. The same markup stacks media above text in a narrow column or sidebar and lays them side-by-side in a wide column or grid cell — built on CSS container queries (container-type: inline-size + @container). Pure CSS, zero JavaScript. | Components | Free | no deps | |
| Copy Buttoncopy-button | A native <button> that writes an associated string (snippet, API key, URL) to the clipboard with the Async Clipboard API, then flips to a transient aria-live "Copied" state. Progressive-enhancement fallback for non-secure contexts. Ships in five flavours: Hono JSX (TypeScript), Jinja2 macro, Go html/template, Phoenix function component, and a raw HTML snippet. Follows the WAI-ARIA APG button pattern. | Components | Free | no deps | |
| Date Time Pickerdate-time-picker | Native <input type="date|time|datetime-local|month|week"> family styled like Input, with min/max/step constraints and normalized machine-readable values. The browser supplies the calendar/clock picker, segment editing, locale-aware display and constraint validation — no JS calendar library. Ships in five flavours. | Components | Free | no deps | |
| Delete Rowdelete-row | A row/item delete affordance that confirms, sends DELETE, then fades out in place. One inherited declaration on the list host (hx-confirm:inherited / hx-target:inherited / hx-swap:inherited) covers every row, so each Delete button only needs hx-delete — no per-row wiring and no client-side list state. The server replies 200 with an empty body and the row simply disappears after a CSS opacity fade. Zero custom JS. | Components | Free | no deps | |
| Dialogdialog | Native <dialog> + 30-line script. Focus trap, ESC, accessible modal — all from the platform. Backdrop click to close, X button, htmx-rendered variants. | Components | Free | no deps | |
| Dropdown Menudropdown-menu | Menu of actions from a button. Native Popover API + APG menu keyboard contract (arrows, Home/End, type-to-find). | Components | Free | no deps | |
| Edit In Placeedit-in-place | A read-only record view with an Edit affordance that swaps in a pre-filled form. Save issues a PUT and the server returns the updated view; Cancel re-fetches the view. The canonical htmx editable primitive — built entirely on outerHTML swaps over REST, no modal, no custom JS. | Components | Free | no deps | |
| Exclusive Accordionexclusive-accordion | Scriptless single-open accordion: multiple native <details> elements share one `name` attribute so opening one auto-closes the others — the pure-HTML exclusive variant of the APG-scripted accordion. Zero JavaScript; the exclusivity survives with JS disabled. Ships in five flavours: Hono JSX (TypeScript), Jinja2 macros, Go html/template, Phoenix function component, and a raw HTML snippet. | Components | Free | no deps | |
| Feedfeed | A role="feed" container of <article> items that loads more as the user scrolls (htmx infinite scroll via hx-trigger="revealed"), following the WAI-ARIA APG Feed pattern. A structure, not a widget — screen readers stay in reading mode. | Components | Free | no deps | |
| Figurefigure | Self-contained, referenced content — an image, diagram, code block, or quotation — wrapped in a native <figure> whose <figcaption> supplies its accessible name. Distinct from a Card's generic surface: a figure stands apart from the main flow and can be moved without breaking it, and its caption is semantically tied to the content. Built on native <figure> + <figcaption>, zero JavaScript. | Components | Free | no deps | |
| File Uploadfile-upload | Styled label-wrapped native <input type="file"> with drag-and-drop, a filename/preview list, and a native <progress> bar. Submits via standard multipart POST. Ships in five flavours. | Components | Free | no deps | |
| Form Fieldform-field | Field-row wrapper composing label + control slot + description + error, auto-wiring aria-describedby and aria-invalid, with a native :user-invalid styling hook. Includes a fieldset/legend group variant. Ships in five flavours; zero JS. | Components | Free | no deps | |
| Gridgrid | An interactive data grid built on a real <table role="grid">: a single tab stop with 2-D arrow-key cell navigation (roving tabindex), Home/End to row ends, and Ctrl+Home/End to the grid corners. | Components | Free | no deps | |
| Highlighthighlight | Semantic marker that wraps the words matching a search query in a native <mark>, the HTML element for text relevant to the user's current activity. Rendered entirely on the server, styled with theme tokens, zero client JS — drop it inside the fragment htmx swaps into a results list. | Components | Free | no deps | |
| Hover Cardhover-card | A rich interactive preview surface revealed when the user shows interest in a trigger (hover, keyboard focus, or long-press) — the interactive-content primitive Tooltip explicitly defers to. Built entirely on the native Popover API interest-invoker mechanism: the trigger carries interestfor and the card is popover="hint", so the browser owns hover/focus reveal, ESC dismissal, and implicit-anchor positioning with zero JavaScript. Progressive enhancement: in browsers without interest invokers the trigger stays a working link/button and the card (falling back to popover="manual") simply doesn't a | Components | Free | no deps | |
| Inputinput | Native <input> with shadcn styling, sized for htmx live-validation patterns. Ships in five flavours. | Components | Free | no deps | |
| Kbdkbd | Inline keyboard-key badge — renders a native <kbd> for a single key, or nests one <kbd> per key inside an outer one for a shortcut like Ctrl + Shift + R. Zero JavaScript. | Components | Free | no deps | |
| Labellabel | Native <label> with shadcn polish — peer-disabled-aware, click-to-focus from the platform. | Components | Free | no deps | |
| Landmarkslandmarks | An accessible page-shell from the native HTML landmark elements (header, nav, search, main, aside, section, footer). Thin semantic wrappers that expose the matching ARIA landmark role, with aria-label/aria-labelledby where the APG Landmarks practice requires a unique name. Zero JS. | Components | Free | no deps | |
| Lazy Loadlazy-load | A deferred-content container that fetches its own contents after the page paints (hx-trigger="load") and swaps them in, with a reserved-space placeholder to prevent layout shift (CLS). Pairs with Skeleton for slow dashboard panels and per-tab content. Zero JS of its own — htmx owns the request and the IntersectionObserver. | Components | Free | no deps | |
| Linklink | A native <a href> with shadcn styling — default (underlined), muted, and hover-underline variants, plus an external treatment that opens a new tab, sets rel="noopener noreferrer", and announces "(opens in new tab)". | Components | Free | no deps | |
| Listboxlistbox | A scrollable single- or multi-select list built on role="listbox" with role="option" children, following the WAI-ARIA APG keyboard contract. A hidden input mirrors the selection so it submits like a normal form field. | Components | Free | no deps | |
| Load Moreload-more | A self-replacing pagination trigger. Click a button or scroll a sentinel into view; htmx appends the next page and swaps in a fresh trigger via hx-swap="outerHTML". When the server omits the trigger, the chain ends. The click mode is a real <button> so it works without JavaScript. | Components | Free | no deps | |
| Media Playermedia-player | A styled native <video controls> / <audio controls> with multiple <source> formats, <track> captions, a poster, and aspect-ratio framing. The browser ships the entire accessible playback UI — play, scrub, volume, captions, fullscreen, Picture-in-Picture — so there are no custom controls and zero JavaScript. | Components | Free | no deps | |
| Menubarmenubar | A visually-persistent, app-style horizontal bar of menus built on the native Popover API and the WAI-ARIA menu/menubar keyboard contract (roving tabindex, arrow navigation, type-ahead, ESC). | Components | Free | no deps | |
| Metermeter | The native <meter> element (ARIA role="meter") — a gauge of a value within a known range with low/high/optimum zoning. Cross-browser fill colors via the meter pseudo-elements; includes an htmx live-gauge demo. | Components | Free | no deps | |
| Number Inputnumber-input | Native <input type="number"> styled like Input, with optional −/+ stepper buttons that call stepUp()/stepDown(). role=spinbutton, aria-valuenow/min/max, arrow-key stepping and value clamping all come from the platform. Ships in five flavours. | Components | Free | no deps | |
| Optimistic Toggleoptimistic-toggle | A server-backed action toggle (like, star, follow, pin) that flips appearance instantly via a native <template> of the toggled state, then reconciles with the server's HTML response — rolling back automatically on error. Built on a real <button> with aria-pressed and the htmx v4 hx-optimistic extension. Ships in five flavours: Hono JSX (TypeScript), Jinja2 macro, Go html/template, Phoenix function component, and a raw HTML snippet. Follows the WAI-ARIA APG button (toggle) pattern. | Components | Free | no deps | |
| Outputoutput | Live result region for the outcome of a calculation or server action. Renders the native <output> element (implicit role="status", an aria-live="polite" + aria-atomic="true" region), tied to its inputs via the for attribute. htmx innerHTML swaps of its content are announced by assistive tech automatically — zero JS. | Components | Free | no deps |
Utilities
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| cn() utilityutils | Minimal class-name joiner. Drop-in replacement for clsx in the small surface this library uses. JSX projects only. | Utilities | Free | no deps |
