{ "name": "HTMX UI", "description": "Tailwind CSS components for htmx apps. Plain HTML, themeable with CSS variables, dark mode built in.", "url": "https://susonwaiba.github.io/htmx-ui", "version": "0.1", "pages": [ { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1.md", "title": "Introduction", "description": "HTMX UI is a set of Tailwind CSS components for apps where the server renders HTML and htmx swaps it into the page.", "section": "Getting started", "headings": [ { "level": 2, "id": "what", "text": "What it is" }, { "level": 2, "id": "example", "text": "A quick look" }, { "level": 2, "id": "htmx", "text": "Working with htmx" }, { "level": 2, "id": "stack", "text": "What it's built on" } ], "sections": [ { "id": "", "title": "", "text": "Installation Add the package to a new or existing Bun project. Theming Override design tokens or build a custom theme. Dark mode How dark mode works and how to add a switcher. Components Browse every component with live examples." }, { "id": "what", "title": "What it is", "text": "Most component libraries assume a JavaScript framework owns the page. HTMX UI assumes the opposite: your server returns HTML, htmx swaps it in, and components need to look right and keep working when they arrive inside a fragment. So every component is: Markup and classes. A button is " }, { "id": "htmx", "title": "Working with htmx", "text": "The entry script calls initComponents(document) once the page loads, and again with each newly inserted element on the htmx:after:process event. Each initialiser only touches elements it hasn't seen yet (it marks them with data-init), so a fragment's components come alive without anything running twice. app.ts import \"htmx.org\"; import { initComponents } from \"htmx-ui\"; document.addEventListener(\"DOMContentLoaded\", () => initComponents(document)); document.addEventListener(\"htmx:after:process\", (e) => initComponents(e.target ?? document)); Why not htmx:after:swap? In htmx 4, htmx:after:swap is dispatched on the element that made the request, so its target is not the new content. htmx:after:process fires on each element htmx inserts, which is exactly what needs initialising." }, { "id": "stack", "title": "What it's built on", "text": "htmx 4 for requests and swaps. Tailwind CSS v4 for styling and tokens. Bun for bundling, the dev server and tests. Nunjucks macros (optional) for less repetitive markup." } ] }, { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/installation", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/installation", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/installation.md", "title": "Installation", "description": "Start a new HTMX UI site with one command, or add the components to an app that already uses Tailwind CSS v4 and htmx.", "section": "Getting started", "headings": [ { "level": 2, "id": "packages", "text": "Packages" }, { "level": 2, "id": "requirements", "text": "Requirements" }, { "level": 2, "id": "new-project", "text": "New project" }, { "level": 2, "id": "engine-by-hand", "text": "Add the engine to a project" }, { "level": 3, "id": "1-install", "text": "1. Install" }, { "level": 3, "id": "2-add-the-scripts", "text": "2. Add the scripts" }, { "level": 3, "id": "3-import-the-styles", "text": "3. Import the styles" }, { "level": 3, "id": "4-initialise-components", "text": "4. Initialise components" }, { "level": 3, "id": "5-add-a-layout-and-a-page", "text": "5. Add a layout and a page" }, { "level": 2, "id": "existing-project", "text": "Existing project" }, { "level": 3, "id": "already-using-the-dark-variant", "text": "Already using the dark: variant?" }, { "level": 2, "id": "exports", "text": "What the package exports" } ], "sections": [ { "id": "", "title": "", "text": "Commands are shown for bun, npm, pnpm and yarn. Pick yours once; every command block on the site remembers the choice." }, { "id": "packages", "title": "Packages", "text": "Package What it is htmx-ui The components: CSS classes, design tokens, dark mode and small behaviours. Works with any bundler. htmx-ui-engine Builds a site from Nunjucks pages: htmx-ui dev, build and preview, on Bun or Node. See Engine. create-htmx-ui Scaffolds a new site that uses both." }, { "id": "requirements", "title": "Requirements", "text": "Dependency Version Why Tailwind CSS 4.x Component styles use @apply and @theme. htmx 4.x Fragment swaps; components initialise inside new content. Bun or Node Bun 1.2.3+ / Node 22.12+ For the engine. With your own bundler, any that handles TypeScript and CSS imports works." }, { "id": "new-project", "title": "New project", "text": "Create a site, install it and start the dev server: bun create htmx-ui my-site cd my-site bun install bun run dev npm create htmx-ui my-site cd my-site npm install npm run dev pnpm create htmx-ui my-site cd my-site pnpm install pnpm run dev yarn create htmx-ui my-site cd my-site yarn install yarn run dev You get pages/ (one file per route), a layout with a theme toggle, Tailwind with the library's styles, an htmx button talking to a mock endpoint, and dev, build and preview scripts. A site created with bun runs on Bun; with npm, pnpm or yarn it runs on Node, with Vite. Open http://localhost:3000 and edit pages/index.html." }, { "id": "engine-by-hand", "title": "Add the engine to a project", "text": "" }, { "id": "1-install", "title": "1. Install", "text": "bun add htmx-ui htmx.org bun add -d htmx-ui-engine tailwindcss npm install htmx-ui htmx.org npm install -D htmx-ui-engine tailwindcss pnpm add htmx-ui htmx.org pnpm add -D htmx-ui-engine tailwindcss yarn add htmx-ui htmx.org yarn add -D htmx-ui-engine tailwindcss Then the Tailwind integration for the runtime you'll build with. On Bun: Terminal bun add -d bun-plugin-tailwind On Node (npm, pnpm or yarn), Vite and its Tailwind plugin: bun add -d vite @tailwindcss/vite npm install -D vite @tailwindcss/vite pnpm add -D vite @tailwindcss/vite yarn add -D vite @tailwindcss/vite" }, { "id": "2-add-the-scripts", "title": "2. Add the scripts", "text": "package.json { \"scripts\": { \"dev\": \"htmx-ui dev\", \"build\": \"htmx-ui build\", \"preview\": \"htmx-ui preview\" } }" }, { "id": "3-import-the-styles", "title": "3. Import the styles", "text": "Import Tailwind first, then the library. The @source line tells Tailwind where your own markup lives. styles.css @import \"tailwindcss\"; @import \"htmx-ui/styles.css\"; @source \"./\";" }, { "id": "4-initialise-components", "title": "4. Initialise components", "text": "app.ts import \"htmx.org\"; import \"./styles.css\"; import { initComponents } from \"htmx-ui\"; import { initTheme } from \"htmx-ui/theme\"; document.addEventListener(\"DOMContentLoaded\", () => { initTheme(); initComponents(document); }); // htmx 4 fires htmx:after:process on each newly inserted element document.addEventListener(\"htmx:after:process\", (e) => { initComponents((e.target as ParentNode) ?? document); });" }, { "id": "5-add-a-layout-and-a-page", "title": "5. Add a layout and a page", "text": "asset() makes the script path relative to whichever page is rendering, so the bundler finds it from any depth. layouts/base.html {% block title %}My site{% endblock %} {% block content %}{% endblock %} pages/index.html {% extends \"layouts/base.html\" %} {% block content %}{% endblock %} bun run dev npm run dev pnpm run dev yarn run dev" }, { "id": "existing-project", "title": "Existing project", "text": "If the app already has Tailwind v4, htmx and a bundler, it only needs the components: bun add htmx-ui npm install htmx-ui pnpm add htmx-ui yarn add htmx-ui Add @import \"htmx-ui/styles.css\"; directly after @import \"tailwindcss\";. Call initComponents() on load and on htmx:after:process, as in step 4 above. Clashing variable names The library defines CSS variables such as --primary, --border and --radius on :root, and Tailwind colours with the same names. If your app already defines these, the definition loaded last wins. Rename yours, or set them to the values you want (see Theming)." }, { "id": "already-using-the-dark-variant", "title": "Already using the dark: variant?", "text": "The library switches Tailwind's dark: variant from the OS media query to a .dark class on . If your app relies on the media-query behaviour, read Dark mode before upgrading." }, { "id": "exports", "title": "What the package exports", "text": "JavaScript ships as ES modules with TypeScript types. htmx.org and tailwindcss are peer dependencies, so your app controls their versions. Import Contents htmx-ui initComponents(root): wires up every component's behaviour under root. htmx-ui/styles.css Design tokens, the dark variant, .prose (Tailwind Typography, installed with the package), syntax-highlighting colours and every component's styles. htmx-ui/theme initTheme() and getTheme() for the light/dark switcher. htmx-ui/icons/.svg The SVG icons, for your own templates or tags. htmx-ui/components//.html Nunjucks macros (icon, code, alert, spinner). The engine resolves them by name: {% from \"components/icon/icon.html\" import icon %}." } ] }, { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/engine", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/engine", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/engine.md", "title": "Engine", "description": "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.", "section": "Getting started", "headings": [ { "level": 2, "id": "cli", "text": "Commands" }, { "level": 2, "id": "layout", "text": "Project layout" }, { "level": 2, "id": "config", "text": "Configuration" }, { "level": 2, "id": "mock-endpoints", "text": "Mock htmx endpoints" }, { "level": 2, "id": "plugins", "text": "Use the plugins directly" } ], "sections": [ { "id": "", "title": "", "text": "htmx-ui-engine is the build tool behind npm create htmx-ui and this website. It turns a folder of HTML pages into a static site: each page is rendered with Nunjucks, then bundled (scripts and styles hashed and minified, Tailwind compiled from every class the page uses). The same engine runs on two runtimes: Runtime Dev server Build Tailwind Bun Bun.serve with HMR Bun.build bun-plugin-tailwind Node Vite with HMR Vite @tailwindcss/vite Both render pages with the same code, so a site builds the same way on either." }, { "id": "cli", "title": "Commands", "text": "package.json { \"scripts\": { \"dev\": \"htmx-ui dev\", \"build\": \"htmx-ui build\", \"preview\": \"htmx-ui preview\" } } Command / option Description htmx-ui dev Dev server at http://localhost:3000 with hot reload: scripts and styles update in place; pages reload when a layout, partial, macro or data file changes. htmx-ui build Builds every page into dist/ (same paths as pages/), with scripts, styles and images in dist/assets/, content-hashed and shared by every page that uses them. Copies public/ next to it. htmx-ui preview Serves dist/ with the same clean URLs (/about for about.html). --port Port for dev and preview. $PORT works too. --root Project root, if not the current directory. --bun, --node Pick the runtime (also HTMX_UI_RUNTIME=bun|node). The runtime follows whatever started the command: bun run dev and bunx htmx-ui run on Bun; npm run, pnpm, yarn and npx run on Node. Install the Tailwind integration for the one you use: bun add -d htmx-ui-engine tailwindcss bun-plugin-tailwind npm install -D htmx-ui-engine tailwindcss vite @tailwindcss/vite" }, { "id": "layout", "title": "Project layout", "text": "my-site/ pages/index.html -> / pages/about.html -> /about pages/docs/index.html -> /docs pages/docs/setup.html -> /docs/setup layouts/ partials/ shared templates data/*.json read from templates with json() public/ served at / and copied to dist/ as-is app.ts styles.css client entry and stylesheet htmx-ui.config.ts optional Pages, layouts and partials are covered in Templates & data. With htmx-ui installed, its macros and icons resolve by name, after your own files: {% from \"components/icon/icon.html\" import icon %}. Link files in public/ with a root-absolute URL (href=\"/favicon.svg\"); they keep their names. Link everything else with asset(), so the bundler can hash it." }, { "id": "config", "title": "Configuration", "text": "Every option is optional, and a project without htmx-ui.config.ts uses the defaults. htmx-ui.config.ts import { defineConfig } from \"htmx-ui-engine\"; export default defineConfig({ pages: \"pages\", templates: [\".\"], outDir: \"dist\", publicDir: \"public\", url: \"https://example.com\", port: 3000, }); Option Description pages Routes directory. Default \"pages\". templates Template roots, searched in order. Default [\".\"]; htmx-ui's src/ is added last (ui: false turns that off). outDir Build output. Default \"dist\". publicDir Copied as-is. Default \"public\"; false to disable. url Public site URL, the origin template global. $SITE_URL overrides it. port Dev and preview port. Default 3000; $PORT overrides it. globals, filters Extra Nunjucks globals and filters. transform(html, page) Post-process every rendered page, in dev and build. routes Dev-only request handlers (see below). fetch(req) Dev-only fallback for anything else; return null for a 404. build.minify, build.sourcemap, build.define Production bundling options. build.done(ctx) Runs after a build with { outDir, pages }, e.g. to write a sitemap. vite Node only: extra Vite config, merged over the engine's." }, { "id": "mock-endpoints", "title": "Mock htmx endpoints", "text": "While you build the front end, routes answers hx-get and hx-post with HTML fragments, so no backend is needed. Handlers take a web Request and return a Response, with Bun.serve's route syntax, on either runtime: htmx-ui.config.ts import { defineConfig } from \"htmx-ui-engine\"; const html = (body: string) => new Response(body, { headers: { \"Content-Type\": \"text/html\" } }); export default defineConfig({ routes: { \"/api/users/:id\": (req) => html(`

User ${req.params.id}

`), \"/api/search\": async (req) => { const q = new URL(req.url).searchParams.get(\"q\") ?? \"\"; return html(`
  • Results for ${q}
    • `); }, }, }); Dev server only The build is static, so these routes don't exist in production. Point the same URLs at your real backend there." }, { "id": "plugins", "title": "Use the plugins directly", "text": "Already have a build script or a Vite config? Use the engine's plugin and skip the CLI: import { htmxUi } from \"htmx-ui-engine/bun\"; import tailwind from \"bun-plugin-tailwind\"; await Bun.build({ entrypoints: [\"./pages/index.html\", \"./pages/about.html\"], root: \"./pages\", outdir: \"./dist\", plugins: [await htmxUi(), tailwind], // htmx-ui first, so Tailwind sees rendered markup }); import { htmxUi } from \"htmx-ui-engine/vite\"; import tailwindcss from \"@tailwindcss/vite\"; export default { plugins: [htmxUi(), tailwindcss()], }; The package root, htmx-ui-engine, exports the runtime-independent core for your own tooling: defineConfig, loadConfig, render, renderPage, findPages, routeFor and highlight." } ] }, { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/theming", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/theming", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/theming.md", "title": "Theming", "description": "Every colour and corner in HTMX UI comes from a CSS variable. Override the variables to restyle the whole library; scope them to restyle part of a page.", "section": "Customization", "headings": [ { "level": 2, "id": "how-it-works", "text": "How it works" }, { "level": 2, "id": "tokens", "text": "Tokens" }, { "level": 2, "id": "override", "text": "Overriding tokens" }, { "level": 2, "id": "custom-themes", "text": "Custom themes" }, { "level": 2, "id": "scrollbars", "text": "Scrollbars" }, { "level": 2, "id": "new-tokens", "text": "Adding your own tokens" }, { "level": 2, "id": "components", "text": "Customising components" }, { "level": 2, "id": "in-your-markup", "text": "Using tokens in your own markup" } ], "sections": [ { "id": "how-it-works", "title": "How it works", "text": "Theming happens in two layers, both in htmx-ui/styles.css: Variables. Plain custom properties on :root hold the actual values, with a second set under :root.dark. Tailwind colours. A @theme inline block maps each variable to a Tailwind colour, so --primary becomes bg-primary, text-primary, border-primary/30 and so on. htmx-ui/styles.css (excerpt) :root { --radius: 0.5rem; --primary: var(--color-indigo-600); --primary-foreground: var(--color-white); /* … */ } :root.dark { --primary: var(--color-indigo-500); /* … */ } @theme inline { --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); /* … */ } Because the mapping is inline, the generated utilities read the variable at runtime: .bg-primary compiles to background-color: var(--primary). Change the variable anywhere (globally, under .dark, or on one element) and everything using it updates. No rebuild needed." }, { "id": "tokens", "title": "Tokens", "text": "Components only use these tokens. Swatches show the current theme; toggle dark mode in the header to compare. Variable Utility Used for Light Dark --background bg-background Page background white zinc-950 --foreground text-foreground Default text zinc-950 zinc-50 --surface bg-surface Cards, alerts, raised panels white zinc-900 --muted bg-muted Subtle fills: code, table heads zinc-100 zinc-800 --muted-foreground text-muted-foreground Secondary text zinc-500 zinc-400 --accent bg-accent Hover and selected backgrounds zinc-100 zinc-800 --accent-foreground text-accent-foreground Text on accent zinc-900 zinc-50 --border border-border Borders and dividers (the default border colour) zinc-200 zinc-800 --ring outline-ring Focus rings indigo-500 indigo-400 --primary bg-primary Brand colour: primary buttons, links indigo-600 indigo-500 --primary-foreground text-primary-foreground Text on primary white white --secondary bg-secondary Secondary buttons and badges zinc-100 zinc-800 --secondary-foreground text-secondary-foreground Text on secondary zinc-900 zinc-50 --info text-info Info alerts and badges sky-600 sky-400 --success text-success Success alerts and badges emerald-600 emerald-400 --warning text-warning Warning alerts and badges amber-600 amber-400 --danger bg-danger Destructive buttons, error alerts red-600 red-500 --danger-foreground text-danger-foreground Text on danger white white --scrollbar-thumb (scrollbars) Scrollbar thumb; every scrollbar is thin with a transparent track foreground at 16% foreground at 16% --scrollbar-thumb-hover (scrollbars) Scrollbar thumb while hovering the scroll area foreground at 32% foreground at 32% --radius rounded-(--radius) Corner radius for buttons, inputs, alerts; cards add 4px 0.5rem 0.5rem Values are Tailwind palette colours, for example var(--color-indigo-600). Any CSS colour works: hex, rgb(), oklch()." }, { "id": "override", "title": "Overriding tokens", "text": "Redefine variables after importing the library. Set both the light and dark values for anything that should differ between them. src/styles.css @import \"tailwindcss\"; @import \"htmx-ui/styles.css\"; :root { --primary: oklch(0.6 0.2 30); /* coral */ --primary-foreground: white; --radius: 0.75rem; } :root.dark { --primary: oklch(0.7 0.17 30); } Selector specificity The library declares its tokens on :root and :root.dark inside @layer base. Unlayered CSS beats layered CSS, so overrides written outside any layer (as above) always win, whatever the import order." }, { "id": "custom-themes", "title": "Custom themes", "text": "A theme is just a selector that redefines tokens. Scope one to an attribute and you can apply it to a whole page or a single section. These previews use the same markup, with a different data-theme on each wrapper: default Pro Same markup, different tokens. Upgrade Later rose Pro Same markup, different tokens. Upgrade Later emerald Pro Same markup, different tokens. Upgrade Later src/styles.css [data-theme=\"rose\"] { --primary: var(--color-rose-600); --ring: var(--color-rose-500); --radius: 1rem; } .dark [data-theme=\"rose\"] { --primary: var(--color-rose-500); } html
    …
    " }, { "id": "scrollbars", "title": "Scrollbars", "text": "The library styles every scrollbar to match: thin, with a transparent track and a thumb tinted from --foreground, so it blends into any theme and follows dark mode. Browsers without scrollbar-color (Safari) get the same look through ::-webkit-scrollbar. src/styles.css :root { --scrollbar-thumb: color-mix(in oklab, var(--primary) 30%, transparent); } /* Native scrollbars for one element */ .native-scrollbars { scrollbar-color: auto; scrollbar-width: auto; }" }, { "id": "new-tokens", "title": "Adding your own tokens", "text": "Follow the same two steps to add a colour that Tailwind utilities can use: src/styles.css :root { --brand-gradient-from: var(--color-fuchsia-500); } :root.dark { --brand-gradient-from: var(--color-fuchsia-400); } @theme inline { --color-brand-from: var(--brand-gradient-from); } Now from-brand-from, text-brand-from and the rest are available, and they follow dark mode." }, { "id": "components", "title": "Customising components", "text": "Component classes live in @layer components, which sits below utilities. You can restyle them two ways: One element: add utilities. When clicked, initTheme() from htmx-ui/theme: flips the .dark class on , saves the choice to localStorage under the key theme, sets aria-pressed=\"true\" on every toggle while dark is active, and writes the current theme (light or dark) into any [data-theme-label] inside a toggle. src/app.ts import { initTheme } from \"htmx-ui/theme\"; document.addEventListener(\"DOMContentLoaded\", () => initTheme());" }, { "id": "following-the-os", "title": "Following the OS", "text": "Until the user clicks a toggle, the theme follows prefers-color-scheme and updates live when the OS changes. After a click, the stored choice wins. To go back to following the OS, clear it: ts localStorage.removeItem(\"theme\");" }, { "id": "no-flash", "title": "Avoiding a flash of the wrong theme", "text": "Module scripts run after the first paint, so on a dark-mode visit the page would briefly render light. Put this tiny inline script in , before your stylesheet and app script, so the class is set before anything is drawn: Keep it in sync This script repeats the logic in initTheme(). If you change the storage key or the class name, change both." }, { "id": "dark-variant", "title": "Writing dark styles", "text": "Prefer tokens: bg-surface and text-muted-foreground already adapt. For one-off tweaks, use the dark: variant as usual: html
    Amber in light, a soft glow in dark.
    " }, { "id": "force", "title": "Forcing a theme", "text": "To keep part of the page dark (a code sample, a hero) whatever the global theme, add the dark class to that element. Everything inside picks up the dark variant. Note that :root.dark tokens only apply at the root, so set the tokens you need on the element too: css .force-dark { --background: var(--color-zinc-950); --foreground: var(--color-zinc-50); --border: var(--color-zinc-800); color-scheme: dark; } html
    …
    " }, { "id": "custom-switcher", "title": "Building your own switcher", "text": "getTheme() returns the active theme. A light/dark/system menu, for example, only needs to set or remove the stored value and toggle the class: ts import { getTheme } from \"htmx-ui/theme\"; function setTheme(choice: \"light\" | \"dark\" | \"system\") { if (choice === \"system\") localStorage.removeItem(\"theme\"); else localStorage.setItem(\"theme\", choice); const dark = choice === \"system\" ? matchMedia(\"(prefers-color-scheme: dark)\").matches : choice === \"dark\"; document.documentElement.classList.toggle(\"dark\", dark); } console.log(getTheme()); // \"light\" | \"dark\"" } ] }, { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/templates", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/templates", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/templates.md", "title": "Templates & data", "description": "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.", "section": "Guides", "headings": [ { "level": 2, "id": "pages", "text": "Pages and layouts" }, { "level": 2, "id": "json", "text": "JSON data" }, { "level": 3, "id": "json-in-the-browser-too", "text": "JSON in the browser too" }, { "level": 2, "id": "svg", "text": "SVG and icons" }, { "level": 2, "id": "glob", "text": "Listing files" }, { "level": 2, "id": "reference", "text": "Reference" } ], "sections": [ { "id": "", "title": "", "text": "Optional The components are plain HTML and CSS, and work with any server or template language. This page covers the Nunjucks templates of htmx-ui-engine, which this site is built with too. Macros are new The package's Nunjucks macros (htmx-ui/components/*.html) need the engine's template helpers (svg(), json(), | dedent, | highlight). Their parameters may still change in a minor release before 1.0; each change is listed in the changelog." }, { "id": "pages", "title": "Pages and layouts", "text": "Every .html file in pages/ is a route (docs/theming.html is /docs/theming). The engine renders it with Nunjucks before the bundler (Bun's or Vite) sees it, so pages can extend layouts, include partials and call macros. Template names resolve from the project root, then from the htmx-ui package (its components/ and icons/): pages/pricing.html {% extends \"layouts/site.html\" %} {% from \"components/alert/alert.html\" import alert %} {% block title %}Pricing · HTMX UI{% endblock %} {% block content %} {% call alert(\"Launch offer\", variant=\"success\") %}20% off the first year.{% endcall %} {% endblock %}" }, { "id": "json", "title": "JSON data", "text": "json(path) reads a JSON file at build time. Keep repeated content (navigation, pricing tiers, team members, release notes) in one file and render it anywhere, with no API and no client-side fetching. {% set releases = json(\"data/changelog.json\").releases %} { \"releases\": [ { \"version\": \"0.1.0\", \"date\": \"2026-10-02\", \"summary\": \"First release…\" } ] } That template, live, reading this site's real file: v0.1.0, 2026-10-02 This site's data files: File (under site/) Description data/site.json Site name, description and URL (used for sitemaps). data/docs-nav.json Docs navigation: sidebar, prev/next, components index, page order for agents. data/changelog.json Releases, newest first. data/versions.json Docs versions; the latest is rendered live, older ones are archived." }, { "id": "json-in-the-browser-too", "title": "JSON in the browser too", "text": "The same files can be imported by client code. Bun and Vite bundle them as plain objects: ts import nav from \"./data/docs-nav.json\"; console.log(nav.sections.length);" }, { "id": "svg", "title": "SVG and icons", "text": "svg(path, attrs) inlines an SVG file and sets attributes on its root, and the icon macro builds on it. Inlined SVG inherits colour and costs no extra requests. jinja {{ svg(\"icons/sun.svg\", { class: \"size-5 text-primary\", \"aria-hidden\": \"true\" }) }}" }, { "id": "glob", "title": "Listing files", "text": "glob(pattern) returns matching paths across the template roots, sorted. The icon gallery is generated this way, from the package's icons/: jinja {% for path in glob(\"icons/*.svg\") %}…{% endfor %}" }, { "id": "reference", "title": "Reference", "text": "Function / filter Description json(path) Parsed JSON file. Paths are relative to a template root (the project, then htmx-ui); first match wins. svg(path, attrs) Inline SVG with attributes set on the root . glob(pattern) Sorted list of root-relative paths matching the pattern. asset(path) Root-relative path rewritten relative to the current page (for New ```" }, { "id": "indexes", "title": "Indexes", "text": "Each opens in a new tab. URL Contents /llms.txt llms.txt index (llmstxt.org): every docs page as a Markdown link with its description, grouped by section. Start here. /llms-full.txt Every docs page's Markdown in one file, for loading the whole library into context. /sitemap.json Every page with URL, Markdown URL, title, description, section, heading outline and section text, plus the list of docs versions. The index for site search. /docs/sitemap.json The same for the latest docs only. Each older version has its own, e.g. /docs/v0.1/sitemap.json. /docs/versions.json Every docs version with its URL prefix, its sitemap and the pages it contains. /sitemap.xml Standard XML sitemap for search engines. /robots.txt Allows crawling and points at the sitemap. /sitemap.json (excerpt) { \"name\": \"HTMX UI\", \"url\": \"https://example.com\", \"version\": \"0.1\", \"versions\": [ { \"id\": \"0.1\", \"label\": \"v0.1\", \"path\": \"/docs\", \"latest\": true, \"sitemap\": \"/docs/sitemap.json\" } ], \"pages\": [ { \"url\": \"/docs/components/tabs\", \"markdown\": \"/docs/components/tabs.md\", \"title\": \"Tabs\", \"section\": \"Components\", \"headings\": [{ \"level\": 2, \"id\": \"markup\", \"text\": \"Markup\" }], \"sections\": [{ \"id\": \"markup\", \"title\": \"Markup\", \"text\": \"Each [data-tab] button shows the [data-tab-panel]…\" }] } ] } Every sections[].id is a heading anchor, so url + \"#\" + id opens that exact section. This site's own search (Ctrl K) works this way, and an MCP server can list pages from these files and link straight to the right place." }, { "id": "prompts", "title": "Prompts", "text": "These work with any agent that can fetch URLs (Claude, ChatGPT, Cursor, Copilot and others). Copy, then replace the task." }, { "id": "prompt-llms-txt", "title": "Use the docs for one task", "text": "Prompt Read https://susonwaiba.github.io/htmx-ui/llms.txt. It indexes the htmx-ui docs; every link is a Markdown page. Fetch the pages relevant to the task below and follow their markup and class names exactly. Use htmx-ui's design tokens (bg-primary, text-muted-foreground, border-border) instead of raw colours. Task: build a settings page with tabs for Profile and Billing, and a danger-zone card with a delete button." }, { "id": "prompt-specific-pages", "title": "Point at specific pages", "text": "Prompt Build a settings page using htmx-ui. Follow these specs exactly: https://susonwaiba.github.io/htmx-ui/docs/components/card.md https://susonwaiba.github.io/htmx-ui/docs/components/tabs.md" }, { "id": "skill", "title": "Make it a skill", "text": "Save the lookup steps as a skill so your agent uses the docs automatically, every time you work on UI, without pasting URLs again. Ask your agent to create it: Prompt Create a skill named \"htmx-ui\" for this project (for Claude Code: .claude/skills/htmx-ui/SKILL.md). It should trigger whenever I build or change UI with htmx-ui components, classes, theming or dark mode. The skill must tell you to: 1. Fetch https://susonwaiba.github.io/htmx-ui/llms.txt to find the relevant docs pages. 2. Fetch those pages as Markdown (https://susonwaiba.github.io/htmx-ui/docs/.md) and follow their markup exactly. 3. Check the htmx-ui version in package.json; if it's older than the latest docs, read https://susonwaiba.github.io/htmx-ui/docs/versions.json and use that version's pages instead. 4. Prefer design tokens over raw Tailwind colours, and call initComponents() for new htmx content. Keep the skill short and link to the docs rather than copying them. Or create the file yourself: .claude/skills/htmx-ui/SKILL.md --- name: htmx-ui description: Build UI with the htmx-ui component library (Tailwind CSS v4 + htmx). Use when adding or changing buttons, cards, alerts, tabs, dropdowns, tables, prose, theming or dark mode in this project. --- # htmx-ui The docs are written for agents. Don't guess class names; look them up. 1. Fetch the index: https://susonwaiba.github.io/htmx-ui/llms.txt 2. Fetch the pages you need as Markdown, e.g. https://susonwaiba.github.io/htmx-ui/docs/components/tabs.md 3. Match the docs to the installed version: read \"htmx-ui\" in package.json. If it's older than the latest docs, use the matching version from https://susonwaiba.github.io/htmx-ui/docs/versions.json (pages live under its \"path\"). 4. Search for a topic in https://susonwaiba.github.io/htmx-ui/sitemap.json: `pages[].sections[]` hold the text of every section. Rules: - Copy markup and class names from the docs exactly. - Use design tokens (bg-primary, text-muted-foreground, border-border), not raw pale" }, { "id": "how", "title": "How it's generated", "text": "Nothing is written by hand. At build time the site's engine config (site/htmx-ui.config.ts) renders every page, converts the article body to Markdown (site/lib/markdown.ts), and writes the indexes (site/lib/site.ts). The dev server generates the same files on request. Page order follows the docs navigation in site/data/docs-nav.json. Absolute URLs (and the URLs in the prompts above) use the SITE_URL environment variable, falling back to url in site/data/site.json. Every docs heading gets an id and a # link, so sections can be linked directly. Add data-md-skip to an element to leave it out of the Markdown and the search text (purely visual blocks). Terminal SITE_URL=https://htmx-ui.example bun run build Write for both readers Agents read exactly what people read, so a clear page works for both. Show the full markup in every example, say what each class does in the reference table, and describe behaviour in words, not just in a live demo." } ] }, { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components.md", "title": "Components", "description": "Every component is a set of CSS classes, plus a small behaviour where one is needed. Pick one to see live examples and the full class reference.", "section": "Components", "headings": [ { "level": 2, "id": "anatomy", "text": "Anatomy of a component" } ], "sections": [ { "id": "", "title": "", "text": "Accordion Stacked headings that reveal sections; one or many open, no JavaScript. Alert Callouts for info, success, warnings and errors. Badge Small status labels and counters. Button Actions in every variant, size and state, including loading. Button group Join buttons, inputs and menus: split buttons, toolbars, vertical groups. Card Header, content and footer, with media, an action slot and scrolling content. Code block Highlighted source with a copy button and package-manager tabs. Dropdown A menu of links or actions that opens from a button. Field Labels, help text and messages for controls; inline, responsive and grid forms. Icon SVG icons inlined at build time, or linked as images. Input Text inputs, textareas, selects and file pickers with every state. Input group Icons, text, buttons, menus and spinners inside an input's border. Popover A floating panel of rich content that opens from a button. Sidebar Responsive navigation column with off-canvas mode. Spinner Loading indicator from any icon or pure CSS; works in buttons, badges and inputs. Table Readable data tables with optional hover rows. Tabs Switch between panels; optionally synced and remembered. Text Long-form content with .prose (Tailwind Typography), plus helpers for single elements. Toggle A two-state button, on or off, in any button style. Toggle group A set of toggle buttons: pick one, at most one, or many." }, { "id": "anatomy", "title": "Anatomy of a component", "text": "Each component has its own directory, htmx-ui/components// (packages/ui/src/components// in the repository), holding: .css: classes in @layer components, built from token utilities with @apply. .ts (optional): an init(root) function that wires up [data-] elements once each, with .test.ts beside it. .html (optional): a Nunjucks macro for markup that is tedious to write by hand." } ] }, { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/accordion", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/accordion", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/accordion.md", "title": "Accordion", "description": "A vertically stacked set of headings that each reveal a section of content. Built on
    , so it works without JavaScript.", "section": "Components", "headings": [ { "level": 2, "id": "markup", "text": "Markup" }, { "level": 2, "id": "single", "text": "One open at a time" }, { "level": 2, "id": "multiple", "text": "Multiple open" }, { "level": 2, "id": "disabled", "text": "Disabled" }, { "level": 2, "id": "borders", "text": "Borders" }, { "level": 2, "id": "htmx", "text": "Loading content with htmx" }, { "level": 2, "id": "reference", "text": "Reference" } ], "sections": [ { "id": "", "title": "", "text": "html
    Is it accessible?

    Yes. It's a native <details> element, so keyboards and screen readers handle it out of the box.

    Does it need JavaScript?

    No. Opening, closing and \"one at a time\" are all done by the browser. An optional behaviour fully locks disabled items.

    Can it load content from the server?

    Yes, with htmx. See the example further down.

    " }, { "id": "markup", "title": "Markup", "text": "Each item is a
    with a heading and a .accordion-content body. Wrap the items in .accordion. Add open to an item to show it expanded on load. On older browsers that can't animate to height: auto, items open instantly instead of sliding." }, { "id": "single", "title": "One open at a time", "text": "Give every item the same name. Opening one closes the others, as in the example above. Use a different name for each accordion on the page." }, { "id": "multiple", "title": "Multiple open", "text": "Leave name out, and each item opens and closes on its own. html
    Shipping

    Orders ship within two business days.

    Returns

    Return anything within 30 days for a full refund.

    Warranty

    Two years on every product, parts and labour.

    " }, { "id": "disabled", "title": "Disabled", "text": "Add aria-disabled=\"true\" and tabindex=\"-1\" to the summary: it fades, ignores pointer clicks and drops out of the tab order. Screen readers and scripts can still activate a , so also put data-accordion on the wrapper. Its one-line behaviour stops a disabled summary from opening its item. html
    Available

    This one opens.

    Locked until you upgrade

    Hidden content.

    Also available

    So does this one.

    " }, { "id": "borders", "title": "Borders", "text": ".accordion-bordered draws a box around the accordion. .accordion-separated gives each item its own box. html
    Billing

    Invoices go out on the first of each month.

    Security

    All data is encrypted at rest and in transit.

    Integrations

    Connect over webhooks or the REST API.

    Separated item

    Each item is its own box.

    Another item

    With space between them.

    " }, { "id": "htmx", "title": "Loading content with htmx", "text": "
    fires a toggle event when it opens. hx-trigger=\"toggle once\" fetches the body the first time the item is opened. html
    Server message

    Loading…

    " }, { "id": "reference", "title": "Reference", "text": "Class Description .accordion Wrapper around the items. Add data-accordion when any item is disabled. .accordion-item On
    . Same name on several items: only one open at a time. .accordion-trigger On . Draws the chevron. aria-disabled=\"true\" + tabindex=\"-1\" disables it. .accordion-content The revealed body. .accordion-bordered Box around the whole accordion, with padded rows. .accordion-separated Each item in its own box." } ] }, { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/alert", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/alert", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/alert.md", "title": "Alert", "description": "A callout for information the reader should notice: tips, confirmations, warnings and errors.", "section": "Components", "headings": [ { "level": 2, "id": "variants", "text": "Variants with icons" }, { "level": 2, "id": "dismissible", "text": "Dismissible" }, { "level": 2, "id": "macro", "text": "Nunjucks macro" }, { "level": 2, "id": "accessibility", "text": "Accessibility" }, { "level": 2, "id": "reference", "text": "Reference" } ], "sections": [ { "id": "", "title": "", "text": "html
    Heads up
    You can add components to your app using the CLI.
    " }, { "id": "variants", "title": "Variants with icons", "text": "Put an first and the text lines up beside it. Variant classes tint the border, background, icon and title. html
    New version available
    v0.1.0 adds dark mode and five new components.
    Payment received
    A receipt is on its way to your inbox.
    Your trial ends in 3 days
    Add a payment method to keep your projects online.
    Deploy failed
    The build e" }, { "id": "dismissible", "title": "Dismissible", "text": "Add data-dismissible to the alert and data-dismiss to a button inside it. Clicking the button removes the alert. This also works for alerts that arrive in htmx fragments. html
    Cookies
    We only use essential cookies.
    " }, { "id": "macro", "title": "Nunjucks macro", "text": "If your templates use Nunjucks, the alert macro picks the icon and ARIA role for you: page.html {% from \"components/alert/alert.html\" import alert %} {% call alert(\"Deploy failed\", variant=\"danger\", dismissible=true) %} The build exited with code 1. {% endcall %}" }, { "id": "accessibility", "title": "Accessibility", "text": "Use role=\"alert\" for urgent, time-sensitive messages (screen readers announce it right away), and role=\"status\" for everything else. Give icon-only close buttons an aria-label." }, { "id": "reference", "title": "Reference", "text": "Class Description .alert Container. A leading becomes the icon column. .alert-title Bold first line. .alert-description Body text in the muted colour. .alert-info / -success / -warning / -danger Status tint for border, background, icon and title. .alert-close Top-right close button. Pair with data-dismiss. [data-dismissible] + [data-dismiss] Behaviour: clicking [data-dismiss] removes the [data-dismissible] element." } ] }, { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/badge", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/badge", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/badge.md", "title": "Badge", "description": "A small label for status, counts or categories.", "section": "Components", "headings": [ { "level": 2, "id": "variants", "text": "Variants" }, { "level": 2, "id": "status", "text": "Status" }, { "level": 2, "id": "dot", "text": "With a dot or icon" }, { "level": 2, "id": "in-context", "text": "In context" }, { "level": 2, "id": "reference", "text": "Reference" } ], "sections": [ { "id": "", "title": "", "text": "html New" }, { "id": "variants", "title": "Variants", "text": "html Primary Secondary Outline" }, { "id": "status", "title": "Status", "text": "Soft, tinted variants for status. They use the --info, --success, --warning and --danger tokens. html Info Success Warning Danger" }, { "id": "dot", "title": "With a dot or icon", "text": "html Operational Degraded Verified" }, { "id": "in-context", "title": "In context", "text": "html

    Billing Beta

    " }, { "id": "reference", "title": "Reference", "text": "Class Description .badge Base class. .badge-primary / -secondary / -outline Neutral and brand styles. .badge-info / -success / -warning / -danger Soft status colours. .badge-dot Adds a leading dot in the badge's text colour." } ] }, { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/button", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/button", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/button.md", "title": "Button", "description": "Triggers an action or an htmx request. Works on " }, { "id": "variants", "title": "Variants", "text": "Combine .btn with one variant class. html " }, { "id": "sizes", "title": "Sizes", "text": "html " }, { "id": "icon", "title": "Icon", "text": ".btn-icon makes a square button for a single icon. It combines with every size. Give it an aria-label, since there's no visible text. html " }, { "id": "with-icon", "title": "With icon", "text": "Inline SVGs next to the text are sized to match the button (16px, 12px for .btn-xs). html " }, { "id": "rounded", "title": "Rounded", "text": ".btn-rounded gives fully rounded ends; an icon button becomes a circle. html " }, { "id": "links", "title": "As a link", "text": "html Read the guide" }, { "id": "disabled", "title": "Disabled", "text": "Use the disabled attribute on buttons, or aria-disabled=\"true\" on links. html Disabled link" }, { "id": "loading", "title": "Loading", "text": "Put a spinner in the button. aria-busy=\"true\" blocks clicks while keeping full colour; disabled blocks them and fades the button. html " }, { "id": "loading-htmx", "title": "While an htmx request runs", "text": "Give the spinner .htmx-indicator. htmx adds .htmx-request to the button during the request, which reveals it; until then it takes no space. hx-disable=\"this\" prevents double submits. html The /api/slow endpoint is a mock that only exists under bun run dev." }, { "id": "more", "title": "Groups and toggles", "text": "Join buttons with a button group, make one switch on and off with toggle, or pick between options with a toggle group." }, { "id": "reference", "title": "Reference", "text": "Class Description .btn Base class. Required on every button. .btn-primary Solid brand colour, for the main action. .btn-secondary Muted fill, for secondary actions. .btn-outline Bordered, transparent background. .btn-ghost No border or fill until hovered. .btn-danger Destructive actions. .btn-link Looks like a text link, keeps button semantics. .btn-xs / .btn-sm / .btn-lg 24px, 32px or 44px tall instead of the default 36px. .btn-icon Square button for a single icon. Combine with a size. .btn-rounded Fully rounded ends; a circle with .btn-icon. aria-busy=\"true\" Loading: ignores clicks without fading." } ] }, { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/button-group", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/button-group", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/button-group.md", "title": "Button group", "description": "A container that joins related buttons, inputs and menus into one unit with shared borders.", "section": "Components", "headings": [ { "level": 2, "id": "accessibility", "text": "Accessibility" }, { "level": 2, "id": "orientation", "text": "Orientation" }, { "level": 2, "id": "size", "text": "Size" }, { "level": 2, "id": "icons", "text": "Icons" }, { "level": 2, "id": "separator", "text": "Separator" }, { "level": 2, "id": "nested", "text": "Nested" }, { "level": 2, "id": "input", "text": "With an input" }, { "level": 3, "id": "input-group", "text": "With an input group" }, { "level": 2, "id": "split", "text": "Split button" }, { "level": 2, "id": "popover", "text": "Popover" }, { "level": 2, "id": "reference", "text": "Reference" } ], "sections": [ { "id": "", "title": "", "text": "html
    Use a button group for buttons that perform actions. For buttons that switch a state on and off (bold, italic, text alignment), use a toggle group." }, { "id": "accessibility", "title": "Accessibility", "text": "Give the container role=\"group\" and an aria-label so assistive technology announces the buttons as a set. For a group of groups, use role=\"toolbar\" on the outer one." }, { "id": "orientation", "title": "Orientation", "text": "Add .btn-group-vertical to stack the buttons. html
    " }, { "id": "size", "title": "Size", "text": ".btn-group-sm and .btn-group-lg resize every button, input and text in the group, so you don't size them one by one. html
    " }, { "id": "icons", "title": "Icons", "text": "html
    " }, { "id": "separator", "title": "Separator", "text": "Buttons without a border of their own (secondary, primary) run into each other. Put a .btn-group-separator between them. html
    " }, { "id": "nested", "title": "Nested", "text": "Groups inside a group are spaced apart instead of joined: a toolbar. html
    " }, { "id": "input", "title": "With an input", "text": "Inputs and selects join the group and fill the space left by the buttons. html
    https://
    " }, { "id": "input-group", "title": "With an input group", "text": "An input group can sit in a button group too, with addons of its own. html
    " }, { "id": "split", "title": "Split button", "text": "A main action plus a dropdown of related ones. The .dropdown wrapper joins the group like a button. html
    " }, { "id": "popover", "title": "Popover", "text": "A popover trigger works the same way, for content that isn't a menu. html
    " }, { "id": "reference", "title": "Reference", "text": "Class Description .btn-group Joins its children: inner corners squared, shared borders overlapped. Groups inside it are spaced instead. .btn-group-vertical Stacks the children. .btn-group-sm / -lg Resizes every button, input and text in the group. .btn-group-text Static label styled to sit in a group, like https://. .btn-group-separator 1px divider between buttons that have no border." } ] }, { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/card", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/card", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/card.md", "title": "Card", "description": "Displays a card with a header, content and footer, plus optional media, a header action and scrolling content.", "section": "Components", "headings": [ { "level": 2, "id": "parts", "text": "Parts" }, { "level": 2, "id": "image", "text": "Image" }, { "level": 3, "id": "horizontal", "text": "Horizontal" }, { "level": 2, "id": "scroll", "text": "Scrolling content" }, { "level": 2, "id": "size", "text": "Size" }, { "level": 2, "id": "link", "text": "Clickable card" }, { "level": 2, "id": "htmx", "text": "Loading content with htmx" }, { "level": 2, "id": "reference", "text": "Reference" } ], "sections": [ { "id": "", "title": "", "text": "html

    Log in to your account

    Enter your email below to log in.

    Sign up
    " }, { "id": "parts", "title": "Parts", "text": "Every part is optional. .card itself has no padding; the header, content and footer each pad themselves, so media, tables and lists can run edge to edge. .card-header holds .card-title and .card-description. .card-action, inside the header, sits in its top-right corner beside the title and description. .card-content is the body. .card-footer is a row for actions, pinned to the bottom of tall cards. html

    Notifications

    You have 3 unread messages.

    Your call has been confirmed. Your subscription is expiring soon.

    " }, { "id": "image", "title": "Image", "text": ".card-image on an (or video, or any media block) runs it edge to edge. As the first or last child, its outer corners follow the card's. html
    \"Mountains

    Weekend in the mountains

    Two nights, guided hikes, all meals.

    New

    Image at the bottom

    Last child, so the bottom corners round.

    \"Mountains
    " }, { "id": "horizontal", "title": "Horizontal", "text": ".card-horizontal puts the media beside the text from the sm breakpoint. Wrap the other parts in .card-body. html
    \"Mountains

    Alpine route

    12 km, 800 m of climbing.

    A full-day loop past three lakes. Start early.

    " }, { "id": "scroll", "title": "Scrolling content", "text": "Add .card-scroll to .card-content to give long content its own scrollbar while the header and footer stay put. Limit the height on the card (h-80, max-h-96…) or on the content (max-h-48). html

    Terms of service

    Last updated October 2026.

    By using the service you agree to these terms. Please read them carefully.

    You are responsible for the content you publish and for keeping your account secure.

    We may change the service at any time. We'll tell you about significant changes in advance.

    We can suspend accounts that break these terms, after warning you where we reasonably can.

    The service is provided as is, without warranties of any kind.

    These terms are governed by the laws of the place where we are registered.

    " }, { "id": "size", "title": "Size", "text": ".card-sm uses tighter padding. html

    Small card

    16px padding instead of 24px.

    Good for dense dashboards.

    " }, { "id": "link", "title": "Clickable card", "text": "Make the whole card an and add .card-link for a hover state. html

    All components

    Browse every component in the library.

    " }, { "id": "htmx", "title": "Loading content with htmx", "text": "Cards make good swap targets. This one fetches its body from the server: html

    Server message

    Fetched with hx-get.

    " }, { "id": "reference", "title": "Reference", "text": "Class Description .card Container: border, surface colour, radius and shadow. .card-header Top section, padded on three sides. .card-title Heading text. .card-description Muted supporting text. .card-action Inside the header: top-right slot beside the title and description. .card-content Main body, padded on all sides. .card-scroll On .card-content: scrolls on its own when the card or content has a height limit. .card-footer Bottom row for actions; pinned to the bottom of tall cards. .card-image Edge-to-edge media; outer corners follow the card's. .card-horizontal Media beside the content from the sm breakpoint. Wrap the parts in .card-body. .card-sm Tighter padding. .card-link Hover style for cards that are links." } ] }, { "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/code-block", "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/code-block", "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/code-block.md", "title": "Code block", "description": "Syntax-highlighted source with a copy button, file tabs, and package-manager tabs that remember the reader's choice. Every snippet in these docs uses it.", "section": "Components", "headings": [ { "level": 2, "id": "highlighting", "text": "Syntax highlighting" }, { "level": 2, "id": "package-managers", "text": "Package-manager commands" }, { "level": 2, "id": "file-tabs", "text": "File tabs" }, { "level": 2, "id": "markup", "text": "Markup" }, { "level": 2, "id": "macros", "text": "Nunjucks macros" }, { "level": 2, "id": "reference", "text": "Reference" } ], "sections": [ { "id": "", "title": "", "text": "src/app.ts import { initComponents } from \"htmx-ui\"; // Wire up components inside content htmx inserts document.addEventListener(\"htmx:after:process\", (e) => { initComponents((e.target as ParentNode) ?? document); });" }, { "id": "highlighting", "title": "Syntax highlighting", "text": "Code is highlighted at build time by Shiki, so pages ship coloured HTML and no highlighting JavaScript. Supported languages: html, css, ts/js, json, bash, toml, md, xml/svg and jinja (Nunjucks). Anything else is shown escaped, uncoloured. Colours are CSS variables, --code-token-keyword, --code-token-string and so on, defined for light and dark next to the other tokens. Override them to restyle every code block. src/styles.css :root { --code-token-keyword: var(--color-fuchsia-600); --code-token-string: var(--color-teal-700); }" }, { "id": "package-managers", "title": "Package-manager commands", "text": "Install commands come in bun, npm, pnpm and yarn flavours. Switch tabs here and every command block on every page follows. The choice is saved in localStorage and restored on your next visit. bun add htmx-ui htmx.org bun add -d tailwindcss npm install htmx-ui htmx.org npm install -D tailwindcss pnpm add htmx-ui htmx.org pnpm add -D tailwindcss yarn add htmx-ui htmx.org yarn add -D tailwindcss With the Nunjucks macro, write each line with an action and it's translated for each manager: page.html {% from \"components/code/code.html\" import cli %} {{ cli(\"add htmx-ui htmx.org add-dev tailwindcss run dev\") }} Action Description init npm init -y · pnpm init · yarn init -y · bun init -y install npm install · pnpm install · yarn install · bun install add npm install · pnpm add · yarn add · bun add add-dev npm install -D · pnpm add -D · yarn add -D · bun add -d run npm run · pnpm run · yarn run · bun run exec npx · pnpm dlx · yarn dlx · bunx create npm create · pnpm create · yarn create · bun create anything else Shown unchanged on every tab, e.g. mkdir my-app && cd my-app The commands live in htmx-ui/components/code/package-managers.json; add a manager or change the default there." }, { "id": "file-tabs", "title": "File tabs", "text": "Show related files side by side: @layer components { .btn { @apply font-semibold; } }" }, { "id": "markup", "title": "Markup", "text": "Add data-code to the block and data-copy to a button inside it. Clicking the button copies the text of the visible . Inside the button, .code-copy-idle shows normally and .code-copied shows for 1.5 seconds after copying. html
    app.ts 
    initComponents(document);
    For tabs, put data-tabs on the block (plus data-tabs-sync=\"key\" to sync), .code-tab buttons with data-tab in the header, and one 
     per tab. See Tabs."
        },
        {
          "id": "macros",
          "title": "Nunjucks macros",
          "text": "page.html {% from \"components/code/code.html\" import code, code_block, code_tabs, cli %} {% call code(\"html\", title=\"index.html\") %}  {% endcall %} {{ code_block(some_string, \"ts\") }} {{ code_tabs([{ id: \"a\", label: \"a.ts\", lang: \"ts\", source: a }], sync=\"files\") }} Bodies are de-indented and escaped. Wrap Nunjucks syntax in {% raw %} so it's shown, not run."
        },
        {
          "id": "reference",
          "title": "Reference",
          "text": "Class Description .code-block Container: border, code background and the 
     inside. .code-block-header Top bar for a file name, tabs and the copy button. .code-copy Small copy button. Children .code-copy-idle / .code-copied swap after copying. .code-tabs / .code-tab Tab strip inside the header. [data-code] + [data-copy] Behaviour: copies the visible  text. --code-background / --code-foreground / --code-token-* Highlighting colours (CSS variables)."
        }
      ]
    },
    {
      "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/dropdown",
      "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/dropdown",
      "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/dropdown.md",
      "title": "Dropdown",
      "description": "A menu of links or actions that opens from a button. Keyboard and screen-reader friendly. The docs version switcher in the sidebar is one.",
      "section": "Components",
      "headings": [
        {
          "level": 2,
          "id": "markup",
          "text": "Markup"
        },
        {
          "level": 2,
          "id": "keyboard",
          "text": "Keyboard"
        },
        {
          "level": 2,
          "id": "alignment",
          "text": "Alignment"
        },
        {
          "level": 2,
          "id": "htmx",
          "text": "Actions with htmx"
        },
        {
          "level": 2,
          "id": "reference",
          "text": "Reference"
        }
      ],
      "sections": [
        {
          "id": "",
          "title": "",
          "text": "html 
       
    "
        },
        {
          "id": "markup",
          "title": "Markup",
          "text": "Wrap the trigger and menu in .dropdown with data-dropdown. The trigger gets data-dropdown-trigger, aria-haspopup=\"menu\" and aria-expanded=\"false\". The menu gets role=\"menu\" and starts hidden. Each entry is a link or button with role=\"menuitem\". Mark the selected entry with aria-current=\"true\", and unavailable ones with aria-disabled=\"true\"."
        },
        {
          "id": "keyboard",
          "title": "Keyboard",
          "text": "Key Action ↓ ↑ on the trigger Open on the first / last item ↓ ↑ Home End Move between items Esc Close and return focus to the trigger Tab, click outside, choose an item Close"
        },
        {
          "id": "alignment",
          "title": "Alignment",
          "text": "The menu opens below the trigger, aligned to its left edge. Add .dropdown-menu-end to align it to the right edge, or .dropdown-menu-up to open it above the trigger. html 
       
    "
        },
        {
          "id": "htmx",
          "title": "Actions with htmx",
          "text": "Menu items can make htmx requests like any other button. The menu closes when an item is chosen. html 
       
     "
        },
        {
          "id": "reference",
          "title": "Reference",
          "text": "Class Description .dropdown Positioning wrapper (relative, inline-block). .dropdown-menu The floating panel. Opens below, left-aligned. .dropdown-menu-end / .dropdown-menu-up Align to the right edge / open above. .dropdown-item Link or button inside the menu. aria-current and aria-disabled are styled. .dropdown-label Small muted heading inside the menu. .dropdown-separator Divider line. [data-dropdown] / [data-dropdown-trigger] Behaviour: open/close, keyboard navigation, outside click."
        }
      ]
    },
    {
      "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/field",
      "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/field",
      "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/field.md",
      "title": "Field",
      "description": "Labels, descriptions, help and error messages for form controls, and layouts for whole forms: stacked, inline, responsive and grid.",
      "section": "Components",
      "headings": [
        {
          "level": 2,
          "id": "anatomy",
          "text": "Anatomy"
        },
        {
          "level": 2,
          "id": "description",
          "text": "Description and help"
        },
        {
          "level": 2,
          "id": "required",
          "text": "Required"
        },
        {
          "level": 2,
          "id": "messages",
          "text": "Messages"
        },
        {
          "level": 2,
          "id": "disabled",
          "text": "Disabled"
        },
        {
          "level": 2,
          "id": "horizontal",
          "text": "Inline"
        },
        {
          "level": 3,
          "id": "choice",
          "text": "Checkboxes and radios"
        },
        {
          "level": 2,
          "id": "responsive",
          "text": "Responsive"
        },
        {
          "level": 2,
          "id": "grid",
          "text": "Grid"
        },
        {
          "level": 2,
          "id": "groups",
          "text": "With input and button groups"
        },
        {
          "level": 2,
          "id": "separator",
          "text": "Separator"
        },
        {
          "level": 2,
          "id": "reference",
          "text": "Reference"
        }
      ],
      "sections": [
        {
          "id": "",
          "title": "",
          "text": "html 
     
       
    We'll only use this to send receipts.
     
     
       
      
    "
        },
        {
          "id": "anatomy",
          "title": "Anatomy",
          "text": ".field wraps one control with its .field-label and any .field-description or message, stacked. Link the description and messages to the control with aria-describedby, so screen readers read them with it. Stack fields in a .field-group, and group related ones in a 
     with a ."
        },
        {
          "id": "description",
          "title": "Description and help",
          "text": "A .field-description can sit above or below the control. Links inside it are underlined. html 
      
    Create one in your account settings.
      
    Keep it secret. How to rotate keys.
     
    "
        },
        {
          "id": "required",
          "title": "Required",
          "text": "The label gets a red asterisk when the field holds a required control. For a control that can't carry required, add .field-label-required to the label instead. html 
     
       
     
     Plan 
       
     
     
    "
        },
        {
          "id": "messages",
          "title": "Messages",
          "text": ".field-error, .field-warning and .field-success colour a message and size a leading icon. A field with an aria-invalid=\"true\" control turns its label red. Several errors can go in a list. html 
       
     
       
    • At least 8 characters
      •  
    • At least one number
      •  
     
     
    "
        },
        {
          "id": "disabled",
          "title": "Disabled",
          "text": "When the control is disabled, the label and description fade with it. html 
       
    Contact an admin to change it.
     
    "
        },
        {
          "id": "horizontal",
          "title": "Inline",
          "text": ".field-horizontal puts the label beside the control. Inputs, selects and groups take the remaining width. Give labels a fixed width (w-24) to line them up. html 
     
       
     
       
     
    "
        },
        {
          "id": "choice",
          "title": "Checkboxes and radios",
          "text": "Put the control first. Wrap the label and a description in .field-content to stack them beside it. Native checkboxes take the brand colour with the accent-primary utility. html 
     Notifications 
      
      
    When someone @mentions you.
     
     
     
       
     
    "
        },
        {
          "id": "responsive",
          "title": "Responsive",
          "text": ".field-responsive stacks the label above the control in a narrow container and puts them side by side once the surrounding .field-group is at least 28rem wide. It reacts to the group's width, not the viewport's, so it also works in sidebars and dialogs. Resize the window to see it. html 
     
     
      
    Shown on your profile.
     
      
     
     
      
    For sign-in and receipts.
     
      
     
    "
        },
        {
          "id": "grid",
          "title": "Grid",
          "text": ".field-grid lays fields out in two columns from the sm breakpoint. Span a field across both with sm:col-span-2. html 
     Shipping address 
    Where should we send your order?
     
     
       
     
       
     
       
     
       
     
       
     
     
    "
        },
        {
          "id": "groups",
          "title": "With input and button groups",
          "text": "html 
     
      
      https:// 
     
    Your public homepage.
     
     
      
       
     
     
    "
        },
        {
          "id": "separator",
          "title": "Separator",
          "text": ".field-separator divides sections of a form, with optional text. html 
      
    Or continue with
     
       
     
    "
        },
        {
          "id": "reference",
          "title": "Reference",
          "text": "Class Description .field One control with its label and messages, stacked. .field-horizontal Label beside the control. .field-responsive Stacked, then side by side once the .field-group is 28rem wide. .field-label Label text. Gets an asterisk when the field holds a required control. .field-label-required Forces the asterisk. .field-content Stacks a label and description beside a control in horizontal fields. .field-description Muted help text, above or below the control. .field-error / -warning / -success Coloured message with an optional leading icon or list. .field-group Vertical stack of fields; the container .field-responsive measures. .field-grid Two columns of fields from the sm breakpoint. .fieldset / .field-legend Group of related fields with a heading. .field-separator Horizontal rule with optional centred text."
        }
      ]
    },
    {
      "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/icon",
      "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/icon",
      "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/icon.md",
      "title": "Icon",
      "description": "SVG icons stored as files in htmx-ui/icons and inlined into the HTML at build time, so they inherit colour and need no requests. They can also be linked as images.",
      "section": "Components",
      "headings": [
        {
          "level": 2,
          "id": "usage",
          "text": "Usage"
        },
        {
          "level": 2,
          "id": "inline-vs-img",
          "text": "Inline or image"
        },
        {
          "level": 2,
          "id": "any-svg",
          "text": "Any SVG"
        },
        {
          "level": 2,
          "id": "adding",
          "text": "Adding an icon"
        },
        {
          "level": 2,
          "id": "all",
          "text": "All icons"
        },
        {
          "level": 2,
          "id": "reference",
          "text": "Reference"
        }
      ],
      "sections": [
        {
          "id": "",
          "title": "",
          "text": "html    "
        },
        {
          "id": "usage",
          "title": "Usage",
          "text": "Icons are 24×24 Lucide-style SVGs drawn with stroke=\"currentColor\", so they take the text colour. Size them with Tailwind (size-4, size-5…). The macro inlines the file's  and adds your class: page.html {% from \"components/icon/icon.html\" import icon %} {{ icon(\"sun\") }} {# decorative: aria-hidden #} {{ icon(\"info\", \"size-5\", label=\"Note\") }} {# meaningful: role=\"img\" + aria-label #} {{ icon(\"sun\", mode=\"img\") }} {#  pointing at a copy of the file #}"
        },
        {
          "id": "inline-vs-img",
          "title": "Inline or image",
          "text": "Inline (default) mode=\"img\" Colour Inherits text colour (text-primary works) Fixed black stroke; the macro adds dark:invert Requests None, part of the HTML One per icon; the file is content-hashed, so it caches forever Use when Almost always Many repeats of a large SVG, or linking from elsewhere html  \"\" In img mode the bundler copies the SVG next to the page with a content hash in its name (sun-a1b2c3.svg), so a changed icon is never served stale. Separately, this site's build copies the package's icons/ to dist/assets/icons/ with unchanged names. /assets/icons/.svg is therefore a stable URL for linking from other sites, emails or docs, e.g. /assets/icons/sun.svg."
        },
        {
          "id": "any-svg",
          "title": "Any SVG",
          "text": "The svg() template function inlines any SVG file under a template root (your project, then htmx-ui), setting or overriding attributes on its root element: jinja {{ svg(\"images/logo.svg\", { class: \"h-8 w-auto\", \"aria-label\": \"HTMX UI\", role: \"img\" }) }}"
        },
        {
          "id": "adding",
          "title": "Adding an icon",
          "text": "Save a 24×24 SVG with stroke=\"currentColor\" (or fill=\"currentColor\") as icons/.svg in your project; your file wins over a package icon of the same name. Lucide icons drop straight in. Use it: {{ icon(\"\") }}. A misspelt name fails the build."
        },
        {
          "id": "all",
          "title": "All icons",
          "text": "54 icons, listed straight from the package's icons/ with glob(): Icon names: alert-triangle, align-center, align-left, align-right, arrow-left, arrow-right, asterisk, bold, book, bookmark, bot, box, check-circle, check, chevron-down, chevron-right, chevron-up, code, copy, corner-down-left, download, ellipsis, external-link, eye, file-text, history, image, info, italic, layers, link, loader-spokes, loader, mail, menu, minus, monitor, moon, palette, plus, refresh-cw, search, send, server, sparkles, star, sun, terminal, trash, underline, upload, x-circle, x, zap"
        },
        {
          "id": "reference",
          "title": "Reference",
          "text": "Macro / function Description icon(name, class=\"size-4\") Inline icons/.svg with a class. aria-hidden by default. icon(name, label=\"…\") Meaningful icon: role=\"img\" and aria-label instead of aria-hidden. icon(name, mode=\"img\")  of a hashed copy of the file instead of inlining. svg(path, attrs) Inline any SVG under a template root, setting attributes on the root ."
        }
      ]
    },
    {
      "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/input",
      "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/input",
      "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/input.md",
      "title": "Input",
      "description": "Text inputs, textareas, selects and file pickers, with focus, disabled, error, warning and success states.",
      "section": "Components",
      "headings": [
        {
          "level": 2,
          "id": "usage",
          "text": "Usage"
        },
        {
          "level": 2,
          "id": "types",
          "text": "Types"
        },
        {
          "level": 2,
          "id": "file",
          "text": "File"
        },
        {
          "level": 2,
          "id": "textarea",
          "text": "Textarea"
        },
        {
          "level": 2,
          "id": "select",
          "text": "Select"
        },
        {
          "level": 2,
          "id": "sizes",
          "text": "Sizes"
        },
        {
          "level": 2,
          "id": "states",
          "text": "States"
        },
        {
          "level": 3,
          "id": "disabled",
          "text": "Disabled"
        },
        {
          "level": 3,
          "id": "required",
          "text": "Required"
        },
        {
          "level": 3,
          "id": "invalid",
          "text": "Error, warning, success"
        },
        {
          "level": 3,
          "id": "validate-htmx",
          "text": "Validating with htmx"
        },
        {
          "level": 2,
          "id": "combining",
          "text": "Combining"
        },
        {
          "level": 2,
          "id": "reference",
          "text": "Reference"
        }
      ],
      "sections": [
        {
          "id": "",
          "title": "",
          "text": "html "
        },
        {
          "id": "usage",
          "title": "Usage",
          "text": "Add .input to any text-like 
       
    "
        },
        {
          "id": "types",
          "title": "Types",
          "text": "html 
         
    "
        },
        {
          "id": "file",
          "title": "File",
          "text": "File inputs keep the native picker, with its button restyled. multiple and accept work as usual. html 
       
    PNG or JPG, up to 2 MB.
     
     
       
    "
        },
        {
          "id": "textarea",
          "title": "Textarea",
          "text": ".textarea grows with its content in browsers that support field-sizing. html "
        },
        {
          "id": "select",
          "title": "Select",
          "text": ".select styles a native     "
        },
        {
          "id": "sizes",
          "title": "Sizes",
          "text": ".input-sm and .input-lg match the heights of .btn-sm and .btn-lg. html 
       
     
       
     
       
    "
        },
        {
          "id": "states",
          "title": "States",
          "text": ""
        },
        {
          "id": "disabled",
          "title": "Disabled",
          "text": "The disabled attribute fades the input; inside a field, the label fades too. html 
       
    "
        },
        {
          "id": "required",
          "title": "Required",
          "text": "A field holding a required input marks its label with an asterisk automatically. html 
       
    "
        },
        {
          "id": "invalid",
          "title": "Error, warning, success",
          "text": "Set aria-invalid=\"true\" for an error (the border turns red; so does the field's label). Native validation styles the same way once the user has interacted (:user-invalid). For softer states, add .input-warning or .input-success. Pair each with a message from the field classes and link it with aria-describedby. html 
     
       
     Enter a complete email address.
     
     
       
     This password is common. Consider a longer one.
     
     
       
       
    Checked when you leave the field.
     
    "
        },
        {
          "id": "combining",
          "title": "Combining",
          "text": "Join an input to buttons with a button group, put icons, text, badges or buttons inside its border with an input group, and lay out labels, help text and grids of inputs with field. html 
       
     
      htmxcss 
    "
        },
        {
          "id": "reference",
          "title": "Reference",
          "text": "Class / attribute Description .input Text-like inputs, including type=\"file\". .textarea Multi-line input; grows with its content where supported. .select Native select with a chevron. .input-sm / .input-lg 32px or 44px tall instead of 36px. Also on .select. .input-warning / .input-success Amber or green border and focus ring. aria-invalid=\"true\" Error state: red border and focus ring. :user-invalid looks the same."
        }
      ]
    },
    {
      "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/input-group",
      "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/input-group",
      "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/input-group.md",
      "title": "Input group",
      "description": "Icons, text, buttons, menus and spinners inside an input's border, on either side, above or below.",
      "section": "Components",
      "headings": [
        {
          "level": 2,
          "id": "usage",
          "text": "Usage"
        },
        {
          "level": 2,
          "id": "align",
          "text": "Align"
        },
        {
          "level": 2,
          "id": "icons-text",
          "text": "Icons and text"
        },
        {
          "level": 2,
          "id": "buttons",
          "text": "Buttons"
        },
        {
          "level": 2,
          "id": "badges",
          "text": "Badges"
        },
        {
          "level": 2,
          "id": "dropdown",
          "text": "Dropdown"
        },
        {
          "level": 2,
          "id": "spinner",
          "text": "Spinner"
        },
        {
          "level": 2,
          "id": "textarea",
          "text": "Textarea"
        },
        {
          "level": 2,
          "id": "states",
          "text": "States"
        },
        {
          "level": 2,
          "id": "reference",
          "text": "Reference"
        }
      ],
      "sections": [
        {
          "id": "",
          "title": "",
          "text": "html 
       12 results 
    "
        },
        {
          "id": "usage",
          "title": "Usage",
          "text": "Wrap a .input, .textarea or .select in .input-group. The group draws the border and the focus ring; the control drops its own. Add each addon as a .input-group-addon. Put addons after the control in the source. CSS places them, so Tab reaches the control first. States come from the control: aria-invalid=\"true\" turns the whole group red and disabled fades it."
        },
        {
          "id": "align",
          "title": "Align",
          "text": "An addon goes at the inline start by default. .input-group-addon-inline-end puts it at the end, .input-group-addon-block-start above the control and .input-group-addon-block-end below it. html 
       
     
       
     
       
     
      Billed in USD 
    "
        },
        {
          "id": "icons-text",
          "title": "Icons and text",
          "text": "Addons hold icons, text or both. .input-group-text styles plain text inside a busier addon. html 
       
     
      https:// .com 
     
      $ USD 
    "
        },
        {
          "id": "buttons",
          "title": "Buttons",
          "text": "Buttons inside an addon shrink to fit (24px tall). Use any variant; ghost and secondary sit most naturally. html 
         
     
          
    "
        },
        {
          "id": "badges",
          "title": "Badges",
          "text": "html 
       bug ui  
    "
        },
        {
          "id": "dropdown",
          "title": "Dropdown",
          "text": "A dropdown in an addon, for picking a unit or scope. html 
            
    "
        },
        {
          "id": "spinner",
          "title": "Spinner",
          "text": "A spinner shows work in progress. With .htmx-indicator it appears only while a request runs: type below to search the mock server. html 
       
     
        
     
    "
        },
        {
          "id": "textarea",
          "title": "Textarea",
          "text": "Block addons above or below a textarea make a compose box. A border-t or border-b utility on the addon draws a divider. html 
       button.css   52% used   
    "
        },
        {
          "id": "states",
          "title": "States",
          "text": "html 
      
      @ 
     
    Usernames can't contain spaces.
     
     
       
    "
        },
        {
          "id": "reference",
          "title": "Reference",
          "text": "Class Description .input-group Border and focus ring around a control and its addons. .input-group-addon Addon at the inline start. Holds icons, text, badges, buttons, menus or spinners. .input-group-addon-inline-end Addon at the end of the row. .input-group-addon-block-start Full-width addon above the control. .input-group-addon-block-end Full-width addon below the control. .input-group-text Plain muted text inside an addon."
        }
      ]
    },
    {
      "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/popover",
      "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/popover",
      "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/popover.md",
      "title": "Popover",
      "description": "A floating panel of rich content, such as text or a small form, that opens from a button.",
      "section": "Components",
      "headings": [
        {
          "level": 2,
          "id": "markup",
          "text": "Markup"
        },
        {
          "level": 2,
          "id": "keyboard",
          "text": "Closing"
        },
        {
          "level": 2,
          "id": "alignment",
          "text": "Alignment"
        },
        {
          "level": 2,
          "id": "htmx",
          "text": "Content from the server"
        },
        {
          "level": 2,
          "id": "reference",
          "text": "Reference"
        }
      ],
      "sections": [
        {
          "id": "",
          "title": "",
          "text": "html 
       
    "
        },
        {
          "id": "markup",
          "title": "Markup",
          "text": "Wrap the trigger and panel in .popover with data-popover. The trigger gets data-popover-trigger and aria-expanded=\"false\". The behaviour links it to the panel with aria-controls. The panel gets .popover-content, data-popover-content and starts hidden. Focus stays on the trigger when it opens, unless an element in the panel has autofocus. For a list of actions, use a dropdown instead: it adds menu semantics and arrow-key navigation."
        },
        {
          "id": "keyboard",
          "title": "Closing",
          "text": "Esc closes the popover and returns focus to the trigger. Clicking outside or tabbing out of it also closes it."
        },
        {
          "id": "alignment",
          "title": "Alignment",
          "text": "The panel opens below the trigger, aligned to its left edge. .popover-content-center and .popover-content-end align it to the centre or right edge; .popover-content-up opens it above. html 
       
    "
        },
        {
          "id": "htmx",
          "title": "Content from the server",
          "text": "The panel is an ordinary element, so htmx can fill it. This one loads its content the first time it's opened: html 
       
    "
        },
        {
          "id": "reference",
          "title": "Reference",
          "text": "Class Description .popover Positioning wrapper around the trigger and panel. Add data-popover. .popover-content The floating panel. Add data-popover-content and hidden. .popover-content-center / -end Centre the panel on the trigger, or align it to the right edge. .popover-content-up Open above the trigger. .popover-title Heading text in the panel. .popover-description Muted supporting text."
        }
      ]
    },
    {
      "url": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/sidebar",
      "absoluteUrl": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/sidebar",
      "markdown": "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/sidebar.md",
      "title": "Sidebar",
      "description": "A navigation column that sticks beside the content on large screens and slides in over it on small ones. The navigation on this page is one.",
      "section": "Components",
      "headings": [
        {
          "level": 2,
          "id": "preview",
          "text": "Preview"
        },
        {
          "level": 2,
          "id": "responsive",
          "text": "Responsive layout"
        },
        {
          "level": 2,
          "id": "behaviour",
          "text": "Behaviour"
        },
        {
          "level": 2,
          "id": "active",
          "text": "Marking the current page"
        },
        {
          "level": 2,
          "id": "reference",
          "text": "Reference"
        }
      ],
      "sections": [
        {
          "id": "preview",
          "title": "Preview",
          "text": "The links and labels, shown in a fixed-size frame: html 
      
    Page content
     
    "
        },
        {
          "id": "responsive",
          "title": "Responsive layout",
          "text": "Put .sidebar on an