Getting Started

The shadcn-htmx CLI

A tiny, dependency-free installer. Unlike the stock shadcn CLI — which copies every flavour's file for a component — shadcn-htmx copies only the file for the framework you chose, to the path that framework expects. It reads the very same registry the site publishes.

Overview

Run it with npx — no install, no runtime dependency, works wherever Node runs (so your Python, Go, or Elixir project doesn't need a JS toolchain). Three commands: init, add, and list.

Set up

Pick your flavour and point the CLI at a registry once. init writes a shadcn-htmx.json so later commands need no flags.

# pick your stack once (jsx | jinja | go | phoenix | html)
npx shadcn-htmx init --flavour jinja --registry https://shadcn-htmx.productdevbook.com/r

Add components

Each name resolves to one file for your flavour, written to its conventional target. For the JSX flavour, registry dependencies (the cn() util) are pulled in automatically; the template flavours pull just their one file. Existing files are skipped unless you pass --overwrite.

# add one or many — only the Jinja2 files land in your project
npx shadcn-htmx add button input dialog

# override the flavour / destination per call
npx shadcn-htmx add table --flavour go --out ./internal/templates

# preview without writing
npx shadcn-htmx add accordion --dry

Flavours & targets

Flavour	Registry file	Written to
`jsx`Hono JSX	`registry/ui/<name>.tsx`	`components/ui/<name>.tsx`
`jinja`Jinja2	`registry/jinja2/<name>.html`	`templates/components/<name>.html`
`go`Go template	`registry/go-templates/<name>.tmpl`	`components/<name>.tmpl`
`phoenix`Phoenix	`registry/phoenix/<name>.ex`	`lib/my_app_web/components/<name>.ex`
`html`Raw HTML	`registry/html/<name>.html`	`snippets/<name>.html`

List what's available

npx shadcn-htmx list
#   button             Button
#   input              Input
#   dialog             Dialog
#   …

Config file

shadcn-htmx.json in your project root sets the defaults for every command. Flags (--flavour, --registry, --out) override it.

shadcn-htmx.json

{
  "$schema": "https://github.com/productdevbook/shadcn-htmx",
  "flavour": "jinja",
  "registry": "https://shadcn-htmx.productdevbook.com/r",
  "out": "."
}

registry is your docs host's /r endpoint (or a local directory). All flags: -f/--flavour, -r/--registry, -o/--out, --cwd, --dry, --overwrite.

vs. the shadcn CLI

The registry items follow the shadcn registry-item schema, so npx shadcn@latest add https://shadcn-htmx.productdevbook.com/r/button.json works too — but it copies all five flavours' files into your project, leaving you to delete the four you don't use. The shadcn-htmx CLI is flavour-aware: it copies exactly one. Use whichever you prefer; both read the same registry.