HTMX UI
Esc

    Type to search pages and sections.
    You're viewing the docs for v0.1.
    The latest version is next. Go to this page in next.

    Project

    v0.1.0

    First release: design tokens, light and dark themes, twenty components including forms, toggles and loading states, syntax highlighting, versioned and agent-ready docs; plus htmx-ui-engine (dev server and builds on Bun or Node) and create-htmx-ui.

    View .md
    All releases Latest

    Added#

    Components#

    • Accordion: built on <details>: one or several open, disabled items, bordered and separated styles, lazy-loaded content with htmx.
    • Alert: neutral, info, success, warning and danger, with an optional dismiss button.
    • Badge: solid, outline and soft status variants, plus a status dot.
    • Button: primary, secondary, outline, ghost, danger and link variants; extra small to large sizes; icon, rounded, disabled and loading states.
    • Button group: joins buttons, inputs, dropdowns and popovers: vertical, sized, separated, nested toolbars and split buttons.
    • Card: header, title, description, action, content and footer parts; edge-to-edge images, horizontal layout, scrolling content, compact size and clickable cards.
    • Code block: build-time syntax highlighting, copy button, file tabs and npm/pnpm/yarn/bun command tabs.
    • Dropdown: accessible menu with keyboard navigation; powers the docs version switcher.
    • Field: labels, descriptions and error, warning and success messages; an automatic required asterisk; inline, responsive and grid form layouts; fieldsets and separators.
    • Icon: SVG files inlined at build time, or linked as images.
    • Input: text inputs, textareas, selects and file inputs, with sizes and disabled, error, warning and success states.
    • Input group: icons, text, badges, buttons, dropdowns and spinners inside an input, at the inline start or end, above or below.
    • Popover: a floating panel of rich content or a small form that opens from a button.
    • Sidebar: sticky on desktop, off-canvas with a backdrop on mobile.
    • Spinner: any icon or a pure-CSS ring, in four sizes; works in buttons, badges, button groups and input groups, and as an htmx request indicator.
    • Table: bordered wrapper, muted header and hover rows.
    • Tabs: accessible tab groups that can sync with each other and remember the reader's choice.
    • Text: @tailwindcss/typography (.prose) mapped onto the design tokens, plus heading, lead, muted, link, inline code and kbd helpers.
    • Toggle: any button becomes an on/off toggle with aria-pressed.
    • Toggle group: pick one, at most one, or many; arrow-key navigation; spaced or joined.

    Theming and dark mode#

    • Design tokens as CSS variables, exposed as Tailwind colours with @theme inline. See Theming.
    • Thin, theme-tinted scrollbars everywhere (--scrollbar-thumb). See Theming.
    • Class-based dark mode with a theme switcher that follows the OS until the user picks. See Dark mode.

    Templates and data#

    • Component behaviours initialise inside swapped content via htmx:after:process, including when the swapped element is the component itself.
    • Optional Nunjucks macros for alerts, code blocks, command tabs, icons and spinners.
    • json(), svg() and glob() template functions. See Templates & data.

    Docs#

    • Versioned docs: a version switcher, frozen snapshots of older versions under /docs/v<version>, and /docs/versions.json. See Versions.
    • Site search (Ctrl / ⌘ + K): fuzzy-finds pages and sections in the docs version you're reading, and opens the exact section.

    Package#

    • ES modules with TypeScript types for htmx-ui and htmx-ui/theme; CSS, icons and macros ship as source.
    • htmx.org 4 and tailwindcss 4 are peer dependencies; @tailwindcss/typography is installed with the package.
    • Nunjucks macros for alerts, code blocks, command tabs, icons and spinners, resolved by name in engine sites.

    Engine and project starter#

    • htmx-ui-engine: htmx-ui dev, build and preview for sites made of Nunjucks pages, with file-based routing, Tailwind, hot reload (including layouts, partials and data) and mock htmx endpoints. Runs on Bun (Bun.serve, Bun.build) or Node (Vite), picked from whatever started it. See Engine.
    • A Bun plugin (htmx-ui-engine/bun) and a Vite plugin (htmx-ui-engine/vite) for existing build setups.
    • create-htmx-ui: npm create htmx-ui, pnpm create htmx-ui, yarn create htmx-ui or bun create htmx-ui scaffolds a site with pages, a layout, a theme toggle and an htmx demo.

    For AI agents#

    • Every docs page as Markdown at <url>.md, plus /llms.txt, /llms-full.txt, /sitemap.json (with section text for search, and per-version sitemaps) and /sitemap.xml. See AI agents.
    • Every docs heading has a # link, so sections can be shared and opened directly.
    • Prompt examples and a ready-made agent skill that point at /llms.txt.