# HTMX UI > Tailwind CSS components for htmx apps. Plain HTML, themeable with CSS variables, dark mode built in. Every docs page is available as Markdown by adding `.md` to its URL. All pages in one file: https://susonwaiba.github.io/htmx-ui/llms-full.txt. Machine-readable index with section text: https://susonwaiba.github.io/htmx-ui/sitemap.json. Older docs versions: https://susonwaiba.github.io/htmx-ui/docs/versions.json (each version has its own /sitemap.json and .md pages). ## Getting started - [Introduction](https://susonwaiba.github.io/htmx-ui/docs.md): HTMX UI is a set of Tailwind CSS components for apps where the server renders HTML and htmx swaps it into the page. - [Installation](https://susonwaiba.github.io/htmx-ui/docs/installation.md): Start a new HTMX UI site with one command, or add the components to an app that already uses Tailwind CSS v4 and htmx. - [Engine](https://susonwaiba.github.io/htmx-ui/docs/engine.md): htmx-ui-engine builds a site from Nunjucks pages: file-based routing, Tailwind, a dev server with hot reload and mock htmx endpoints, and static builds, on Bun or Node. ## Customization - [Theming](https://susonwaiba.github.io/htmx-ui/docs/theming.md): Every colour and corner in HTMX UI comes from a CSS variable. Built-in themes restyle the library in one import; override the variables to go further, and scope them to restyle part of a page. - [Themes](https://susonwaiba.github.io/htmx-ui/docs/themes.md): The six built-in themes of HTMX UI — aurora, ember, lagoon, dusk, jade and onyx — with live previews, the exact values each file sets and a one-click apply for this site. - [Dark mode](https://susonwaiba.github.io/htmx-ui/docs/dark-mode.md): Light and dark are two sets of token values, switched by a .dark class on . The theme switcher follows the OS until the user picks, and never flashes the wrong theme. ## Guides - [Templates & data](https://susonwaiba.github.io/htmx-ui/docs/templates.md): Pages are Nunjucks templates rendered at build time. They can read JSON files, inline SVGs and list files, so most content needs no API server. - [Scroll position](https://susonwaiba.github.io/htmx-ui/docs/preserve-scroll.md): Two htmx extensions: preserve-scroll keeps the scroll position of marked containers when htmx swaps them, and sidebar-active-scroll also keeps a sidebar's current page in view, on a fresh page load too. - [AI agents](https://susonwaiba.github.io/htmx-ui/docs/ai-agents.md): Every docs page is published as Markdown, with an llms.txt index and JSON sitemaps, so coding agents can read the docs as specs. ## Plugins - [Plugins](https://susonwaiba.github.io/htmx-ui/docs/plugins.md): Optional features on top of htmx-ui-engine: install a plugin, list it in your config, and its templates, routes, build output and commands join your site. - [Docs plugin](https://susonwaiba.github.io/htmx-ui/docs/plugins/docs.md): htmx-ui-plugin-docs: a docs section people and AI agents can both read. Heading anchors, Markdown for every page, llms.txt, sitemaps, navigation and page macros. - [Versions plugin](https://susonwaiba.github.io/htmx-ui/docs/plugins/versions.md): htmx-ui-plugin-versions: keep every release's docs online as a frozen build, with a version switcher, an old-version banner and commands to name and archive versions. - [Search plugin](https://susonwaiba.github.io/htmx-ui/docs/plugins/search.md): htmx-ui-plugin-search: a Ctrl/⌘K command palette that fuzzy-searches every page and section, with no server or search service. - [Writing a plugin](https://susonwaiba.github.io/htmx-ui/docs/plugins/writing.md): Build an htmx-ui plugin: the hooks, templates, page edits with editHtml(), routes and build output, CLI commands, browser code, testing and publishing. ## Servers - [Server frameworks](https://susonwaiba.github.io/htmx-ui/docs/servers.md): Serve a built htmx-ui site from your own backend: Elysia, Fastify, Koa, Express, Hono, Bun.serve, Deno, or a backend in another language. - [Pages & fragments](https://susonwaiba.github.io/htmx-ui/docs/servers/rendering.md): Render the per-user part of a page as an htmx fragment from your server, render whole pages per request, and handle forms, htmx headers and errors. - [Deploying](https://susonwaiba.github.io/htmx-ui/docs/servers/deploying.md): Ship an htmx-ui site with your server: what to copy, NODE_ENV, keeping mock routes out of production, cache headers, Docker and reverse proxies. - [createSite() API](https://susonwaiba.github.io/htmx-ui/docs/servers/api.md): Reference for createSite(), the Site it returns and the options every server adapter takes. - [Elysia](https://susonwaiba.github.io/htmx-ui/docs/servers/elysia.md): Mount a built htmx-ui site as an Elysia plugin (the recommended adapter), and render pages and fragments from your handlers. - [Fastify](https://susonwaiba.github.io/htmx-ui/docs/servers/fastify.md): Serve a built htmx-ui site as Fastify's not-found handler, and render pages and fragments from your routes. - [Koa](https://susonwaiba.github.io/htmx-ui/docs/servers/koa.md): Serve a built htmx-ui site as Koa middleware that answers only what nothing else did, and render pages and fragments from your routes. - [Express](https://susonwaiba.github.io/htmx-ui/docs/servers/express.md): Mount a built htmx-ui site as Express middleware, and render pages and fragments from your routes. - [Hono](https://susonwaiba.github.io/htmx-ui/docs/servers/hono.md): Mount a built htmx-ui site as Hono middleware, and render pages and fragments from your handlers. - [Bun.serve](https://susonwaiba.github.io/htmx-ui/docs/servers/bun.md): Serve a built htmx-ui site from Bun.serve with no framework: your routes in routes, the site in fetch. - [Other JavaScript servers](https://susonwaiba.github.io/htmx-ui/docs/servers/other.md): Serve a built htmx-ui site from Deno.serve, node:http, h3 and Nitro, or NestJS, with createSite() or an existing adapter. - [Django, Rails, Go and others](https://susonwaiba.github.io/htmx-ui/docs/servers/any-backend.md): Use htmx-ui with a backend in any language: serve the built site as static files and render fragments with your own templates, or run htmx-ui next to it. ## Components - [Components](https://susonwaiba.github.io/htmx-ui/docs/components.md): Every component, grouped by what it is for: forms, actions, navigation, overlays, feedback, layout, data, typography and chat. Each is a set of CSS classes, plus a small behaviour where one is needed. - [Checkbox](https://susonwaiba.github.io/htmx-ui/docs/components/checkbox.md): A box that toggles between checked and not checked, with sizes, states and every field feature. - [Combobox](https://susonwaiba.github.io/htmx-ui/docs/components/combobox.md): An input with a list of suggestions that filters as you type: groups, multiple picks as chips, a clear button and server-side search. - [Field](https://susonwaiba.github.io/htmx-ui/docs/components/field.md): Labels, descriptions, help and error messages for form controls, and layouts for whole forms: stacked, inline, responsive and grid. - [Input](https://susonwaiba.github.io/htmx-ui/docs/components/input.md): Text inputs, textareas, selects and file pickers, with focus, disabled, error, warning and success states. - [Input group](https://susonwaiba.github.io/htmx-ui/docs/components/input-group.md): Icons, text, buttons, menus and spinners inside an input's border, on either side, above or below. - [Input OTP](https://susonwaiba.github.io/htmx-ui/docs/components/input-otp.md): An accessible one-time password input: a row of slots over one real input, so typing, pasting and SMS autofill just work. - [Label](https://susonwaiba.github.io/htmx-ui/docs/components/label.md): An accessible label for a control: beside it, around a checkbox or radio, or as a whole choice card. - [Password input](https://susonwaiba.github.io/htmx-ui/docs/components/password-input.md): A password field with a button that shows and hides what was typed, built on input group. - [Radio group](https://susonwaiba.github.io/htmx-ui/docs/components/radio-group.md): A set of radio buttons: pick one option of a few, on a card or inline, submitting with the form. - [Select](https://susonwaiba.github.io/htmx-ui/docs/components/select.md): A list of options in a popup, opened from a button: searchable, keyboard driven, and styled like an input. - [Slider](https://susonwaiba.github.io/htmx-ui/docs/components/slider.md): Pick a value, a range or several values on a track: native range inputs, horizontal or vertical, with every form state. - [Switch](https://susonwaiba.github.io/htmx-ui/docs/components/switch.md): An on/off setting that takes effect at once: a sliding track on a real checkbox, so it submits with the form and needs no JavaScript. - [Textarea](https://susonwaiba.github.io/htmx-ui/docs/components/textarea.md): Multi-line text that grows with what's typed: field labels and messages, a character count, every form state, and submitting with Ctrl/⌘+Enter. - [Button](https://susonwaiba.github.io/htmx-ui/docs/components/button.md): Triggers an action or an htmx request. Works on