Components

A box that toggles between checked and not checked, with sizes, states and every field feature.

An input with a filtered list of suggestions: groups, multiple picks as chips, a clear button, server search.

Labels, help text and messages for controls; inline, responsive and grid forms.

Text inputs, textareas, selects and file pickers with every state.

Icons, text, buttons, menus and spinners inside an input's border.

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.

An accessible label for any control, wrapping checkboxes and radios, or as a choice card.

A password field with a show / hide toggle: eye icon or text, a checkbox, Caps Lock warning, every input state.

Radio buttons as cards or inline rows: one choice of a few, submitting with the form.

A list of options in a popup opened from a button: searchable, keyboard driven, styled like an input.

Pick a value, a range or several values on a track: native range inputs, vertical too, with every form state.

An on/off setting that applies at once: a sliding track on a real checkbox, no JavaScript.

Multi-line text that grows as you type: field, character count, every state, and Ctrl/⌘+Enter to submit.

Actions in every variant, size and state, including loading.

Join buttons, inputs and menus: split buttons, toolbars, vertical groups.

Copy buttons and copy tags that work on every browser: icon, label or both, a green tick when copied, every button variant and size.

A command menu for search and quick actions: filtering, keyboard, groups, shortcuts, inline or in a ⌘K dialog.

A menu of links, actions and options that opens from a button, with checkbox and radio items, shortcuts and submenus.

A persistent row of menus, as in desktop apps: submenus, checkbox and radio items, icons and shortcuts.

A floating button that jumps back to the bottom or top of a container or the page.

A two-state button, on or off, in any button style.

A set of toggle buttons: pick one, at most one, or many.

The path to the current page: custom separators, dropdowns, and collapsing to an ellipsis when space runs out.

A site's main navigation: links, and buttons that open panels of links, from simple lists to mega menus.

Links to the pages of a long list, with previous and next, page numbers or icons only.

Composable app navigation: groups, menus, badges and actions, collapsing to icons or off-canvas, with a mobile panel.

Layered panels shown one at a time: line, pill and outline styles, icons, disabled tabs, vertical, synced and remembered.

A modal that interrupts with important content and waits for an answer: small size, media and destructive actions.

A modal window over the page or another dialog: close button or outside click, scrolling content, sticky footer, htmx fragments.

A panel on an edge of the screen that can be swiped away: four directions, a handle, nested drawers, a responsive dialog.

A card that previews what is behind a link when a mouse rests on it or the link gets keyboard focus.

A floating panel of rich content that opens from a button: a header, alignment, and forms.

A dialog that slides in from an edge of the screen: four sides, sizes, scrolling content, htmx fragments.

A short hint on hover or keyboard focus, on any side, with no JavaScript needed to show it.

Callouts for info, success, warnings and errors.

Small status labels and counters.

An empty state with an icon, a message and a way forward.

Pure-CSS loading indicators: dots, waves, pulses and animated text.

A bar showing how far a task has got, with an optional label, value and help text.

Placeholders shaped like loading content: any shape, text, avatars, cards, lists, tables and forms.

Loading indicator from any icon or pure CSS; works in buttons, badges and inputs.

Stacking, swipeable notifications: success, info, warning, error and loading, actions, promises and server toasts.

Stacked headings that reveal sections; one or many open, no JavaScript.

Header, content and footer, with media, an action slot and scrolling content.

Slides that drag, swipe and snap with momentum (Embla): item sizes, spacing, vertical, options and plugins.

A button that shows and hides a panel: extra settings, nested file trees, or <details> with no JavaScript.

A horizontal or vertical line between content, semantic or purely visual.

An image with a fallback for a user: sizes, status badges, groups with a count, and menu triggers.

A row of content with media, a title, a description and actions, alone or in a list.

Readable data tables with optional hover rows.

Events in chronological order: dots, icons or avatars, colours, sizes, vertical or horizontal, alternating sides.

Highlighted source with a copy button and package-manager tabs.

SVG icons inlined at build time, or linked as images.

Keyboard keys and shortcuts, on their own or in buttons, tooltips and input groups.

Long-form content with .prose (Tailwind Typography), plus helpers for single elements.

A file, image, video or audio attachment with upload states, sizes, orientation and scrolling groups.

A sequence of steps on a connecting line, each folding its details away: reasoning traces, tool calls and process logs.

A chat message with avatar, header, footer and alignment; groups, attachments, and reasoning and tool calls for AI chat.

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.

The text box of an AI chat: a growing textarea, tools, send and stop, @ mentions and / commands.

A collapsible for AI reasoning that opens while it streams and closes, with its duration, when it ends.