Components
Components
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.
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.
Anatomy of a component#
Each component has its own directory, htmx-ui/components/<name>/ (packages/ui/src/components/<name>/ in the repository), holding:
<name>.css: classes in@layer components, built from token utilities with@apply.<name>.ts(optional): aninit<Name>(root)function that wires up[data-<name>]elements once each, with<name>.test.tsbeside it.<name>.html(optional): a Nunjucks macro for markup that is tedious to write by hand.