--- title: "Components" description: "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." url: "https://susonwaiba.github.io/htmx-ui/docs/components" section: "Components" --- # Components 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. 61 components in 9 groups. Jump to one: [Forms & inputs 13](#forms) [Actions & menus 9](#actions) [Navigation 5](#navigation) [Overlays 7](#overlays) [Feedback & status 8](#feedback) [Layout & disclosure 5](#layout) [Data display 4](#data) [Typography & media 4](#content) [Chat & AI 6](#chat) ## Forms & inputs Controls that take input and submit with a form, and the fields that label them. - [Checkbox](https://susonwaiba.github.io/htmx-ui/docs/components/checkbox): 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): An input with a filtered list of suggestions: groups, multiple picks as chips, a clear button, server search. - [Field](https://susonwaiba.github.io/htmx-ui/docs/components/field): Labels, help text and messages for controls; inline, responsive and grid forms. - [Input](https://susonwaiba.github.io/htmx-ui/docs/components/input): Text inputs, textareas, selects and file pickers with every state. - [Input group](https://susonwaiba.github.io/htmx-ui/docs/components/input-group): Icons, text, buttons, menus and spinners inside an input's border. - [Input OTP](https://susonwaiba.github.io/htmx-ui/docs/components/input-otp): A one-time code or PIN in a row of slots: 4-digit authenticator codes, digits or letters, groups, paste and SMS autofill, sizes and states. - [Label](https://susonwaiba.github.io/htmx-ui/docs/components/label): An accessible label for any control, wrapping checkboxes and radios, or as a choice card. - [Password input](https://susonwaiba.github.io/htmx-ui/docs/components/password-input): A password field with a show / hide toggle: eye icon or text, a checkbox, Caps Lock warning, every input state. - [Radio group](https://susonwaiba.github.io/htmx-ui/docs/components/radio-group): Radio buttons as cards or inline rows: one choice of a few, submitting with the form. - [Select](https://susonwaiba.github.io/htmx-ui/docs/components/select): A list of options in a popup opened from a button: searchable, keyboard driven, styled like an input. - [Slider](https://susonwaiba.github.io/htmx-ui/docs/components/slider): Pick a value, a range or several values on a track: native range inputs, vertical too, with every form state. - [Switch](https://susonwaiba.github.io/htmx-ui/docs/components/switch): An on/off setting that applies at once: a sliding track on a real checkbox, no JavaScript. - [Textarea](https://susonwaiba.github.io/htmx-ui/docs/components/textarea): Multi-line text that grows as you type: field, character count, every state, and Ctrl/⌘+Enter to submit. ## Actions & menus Buttons, toggles and menus that do something. - [Button](https://susonwaiba.github.io/htmx-ui/docs/components/button): Actions in every variant, size and state, including loading. - [Button group](https://susonwaiba.github.io/htmx-ui/docs/components/button-group): Join buttons, inputs and menus: split buttons, toolbars, vertical groups. - [Clipboard](https://susonwaiba.github.io/htmx-ui/docs/components/clipboard): Copy buttons and copy tags that work on every browser: icon, label or both, a green tick when copied, every button variant and size. - [Command](https://susonwaiba.github.io/htmx-ui/docs/components/command): A command menu for search and quick actions: filtering, keyboard, groups, shortcuts, inline or in a ⌘K dialog. - [Dropdown](https://susonwaiba.github.io/htmx-ui/docs/components/dropdown): A menu of links, actions and options that opens from a button, with checkbox and radio items, shortcuts and submenus. - [Menubar](https://susonwaiba.github.io/htmx-ui/docs/components/menubar): A persistent row of menus, as in desktop apps: submenus, checkbox and radio items, icons and shortcuts. - [Scroll button](https://susonwaiba.github.io/htmx-ui/docs/components/scroll-button): A floating button that jumps back to the bottom or top of a container or the page. - [Toggle](https://susonwaiba.github.io/htmx-ui/docs/components/toggle): A two-state button, on or off, in any button style. - [Toggle group](https://susonwaiba.github.io/htmx-ui/docs/components/toggle-group): A set of toggle buttons: pick one, at most one, or many. ## Navigation Moving between pages and between views of a page. - [Breadcrumb](https://susonwaiba.github.io/htmx-ui/docs/components/breadcrumb): The path to the current page: custom separators, dropdowns, and collapsing to an ellipsis when space runs out. - [Navigation menu](https://susonwaiba.github.io/htmx-ui/docs/components/navigation-menu): A site's main navigation: links, and buttons that open panels of links, from simple lists to mega menus. - [Pagination](https://susonwaiba.github.io/htmx-ui/docs/components/pagination): Links to the pages of a long list, with previous and next, page numbers or icons only. - [Sidebar](https://susonwaiba.github.io/htmx-ui/docs/components/sidebar): Composable app navigation: groups, menus, badges and actions, collapsing to icons or off-canvas, with a mobile panel. - [Tabs](https://susonwaiba.github.io/htmx-ui/docs/components/tabs): Layered panels shown one at a time: line, pill and outline styles, icons, disabled tabs, vertical, synced and remembered. ## Overlays Content that opens above the page: modals, panels, popups and hints. - [Alert dialog](https://susonwaiba.github.io/htmx-ui/docs/components/alert-dialog): A modal that interrupts with important content and waits for an answer: small size, media and destructive actions. - [Dialog](https://susonwaiba.github.io/htmx-ui/docs/components/dialog): A modal window over the page or another dialog: close button or outside click, scrolling content, sticky footer, htmx fragments. - [Drawer](https://susonwaiba.github.io/htmx-ui/docs/components/drawer): A panel on an edge of the screen that can be swiped away: four directions, a handle, nested drawers, a responsive dialog. - [Hover card](https://susonwaiba.github.io/htmx-ui/docs/components/hover-card): A card that previews what is behind a link when a mouse rests on it or the link gets keyboard focus. - [Popover](https://susonwaiba.github.io/htmx-ui/docs/components/popover): A floating panel of rich content that opens from a button: a header, alignment, and forms. - [Sheet](https://susonwaiba.github.io/htmx-ui/docs/components/sheet): A dialog that slides in from an edge of the screen: four sides, sizes, scrolling content, htmx fragments. - [Tooltip](https://susonwaiba.github.io/htmx-ui/docs/components/tooltip): A short hint on hover or keyboard focus, on any side, with no JavaScript needed to show it. ## Feedback & status Messages, progress, loading and empty states, and labels for status. - [Alert](https://susonwaiba.github.io/htmx-ui/docs/components/alert): Callouts for info, success, warnings and errors. - [Badge](https://susonwaiba.github.io/htmx-ui/docs/components/badge): Small status labels and counters. - [Empty](https://susonwaiba.github.io/htmx-ui/docs/components/empty): An empty state with an icon, a message and a way forward. - [Loader](https://susonwaiba.github.io/htmx-ui/docs/components/loader): Pure-CSS loading indicators: dots, waves, pulses and animated text. - [Progress](https://susonwaiba.github.io/htmx-ui/docs/components/progress): A bar showing how far a task has got, with an optional label, value and help text. - [Skeleton](https://susonwaiba.github.io/htmx-ui/docs/components/skeleton): Placeholders shaped like loading content: any shape, text, avatars, cards, lists, tables and forms. - [Spinner](https://susonwaiba.github.io/htmx-ui/docs/components/spinner): Loading indicator from any icon or pure CSS; works in buttons, badges and inputs. - [Toast](https://susonwaiba.github.io/htmx-ui/docs/components/toast): Stacking, swipeable notifications: success, info, warning, error and loading, actions, promises and server toasts. ## Layout & disclosure Containers that group, separate, reveal or scroll through content. - [Accordion](https://susonwaiba.github.io/htmx-ui/docs/components/accordion): Stacked headings that reveal sections; one or many open, no JavaScript. - [Card](https://susonwaiba.github.io/htmx-ui/docs/components/card): Header, content and footer, with media, an action slot and scrolling content. - [Carousel](https://susonwaiba.github.io/htmx-ui/docs/components/carousel): Slides that drag, swipe and snap with momentum (Embla): item sizes, spacing, vertical, options and plugins. - [Collapsible](https://susonwaiba.github.io/htmx-ui/docs/components/collapsible): A button that shows and hides a panel: extra settings, nested file trees, or
with no JavaScript. - [Separator](https://susonwaiba.github.io/htmx-ui/docs/components/separator): A horizontal or vertical line between content, semantic or purely visual. ## Data display Rows, tables and people: structured content to scan. - [Avatar](https://susonwaiba.github.io/htmx-ui/docs/components/avatar): An image with a fallback for a user: sizes, status badges, groups with a count, and menu triggers. - [Item](https://susonwaiba.github.io/htmx-ui/docs/components/item): A row of content with media, a title, a description and actions, alone or in a list. - [Table](https://susonwaiba.github.io/htmx-ui/docs/components/table): Readable data tables with optional hover rows. - [Timeline](https://susonwaiba.github.io/htmx-ui/docs/components/timeline): Events in chronological order: dots, icons or avatars, colours, sizes, vertical or horizontal, alternating sides. ## Typography & media Long-form text, code, keys and icons. - [Code block](https://susonwaiba.github.io/htmx-ui/docs/components/code-block): Highlighted source with a copy button and package-manager tabs. - [Icon](https://susonwaiba.github.io/htmx-ui/docs/components/icon): SVG icons inlined at build time, or linked as images. - [Kbd](https://susonwaiba.github.io/htmx-ui/docs/components/kbd): Keyboard keys and shortcuts, on their own or in buttons, tooltips and input groups. - [Text](https://susonwaiba.github.io/htmx-ui/docs/components/text): Long-form content with .prose (Tailwind Typography), plus helpers for single elements. ## Chat & AI Conversations, attachments and assistant replies. - [Attachment](https://susonwaiba.github.io/htmx-ui/docs/components/attachment): A file, image, video or audio attachment with upload states, sizes, orientation and scrolling groups. - [Chain of thought](https://susonwaiba.github.io/htmx-ui/docs/components/chain-of-thought): A sequence of steps on a connecting line, each folding its details away: reasoning traces, tool calls and process logs. - [Message](https://susonwaiba.github.io/htmx-ui/docs/components/message): A chat message with avatar, header, footer and alignment; groups, attachments, and reasoning and tool calls for AI chat. - [Message scroller](https://susonwaiba.github.io/htmx-ui/docs/components/message-scroller): Scrolling for a streaming chat transcript: new questions rise to the top, replies grow beneath them, and the view moves only when the reader does. - [Prompt input](https://susonwaiba.github.io/htmx-ui/docs/components/prompt-input): The text box of an AI chat: a growing textarea, tools, send and stop, @ mentions and / commands. - [Reasoning](https://susonwaiba.github.io/htmx-ui/docs/components/reasoning): A collapsible for AI reasoning that opens while it streams and closes, with its duration, when it ends. ## Anatomy of a component 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.