HTML UI Component Templates

A button sheet: primary, secondary, outline, ghost, danger and link variants, three sizes, icon buttons, loading state, button groups, a split button with menu and a toggle group.

Text inputs with help, error and success states, input groups, select, textarea with counter, checkboxes, radio cards, switches and a range slider with value.

Status badges in five tones, count badges, removable tags with keyboard support, filter chips, avatars in sizes with status dots, avatar stacks and illustrated profile avatars.

Feedback components: four alert tones with actions and dismiss, a top banner, linear and circular progress, a stepped upload progress, spinners, skeleton loaders and a live toast trigger.

Underline and pill tabs, breadcrumbs with overflow, pagination with ellipsis, a vertical stepper, a horizontal step indicator and a sidebar nav with sections and counts.

An accessible dropdown menu with icons, shortcuts, a divider and a destructive item; a select-style listbox; tooltips on hover and focus; and a popover with a small form.

Modal patterns built on the native dialog element: confirm dialog, form dialog, a side drawer and a mobile bottom sheet, each with focus trapping, Escape and backdrop close.

A card collection: product, profile, stat with sparkline, article, event, plan, notification and media cards, all on one grid with consistent padding and radius.

A full data table: search, status filter, sortable columns with aria-sort, row selection with select-all and a bulk action bar, row menu, sticky header and pagination.

Rich inputs: a searchable combobox with highlighted matches, a tag input, a date picker calendar, a file drop zone with upload progress, a quantity stepper and a one-time code input.

Disclosure patterns: a single-open accordion, a multi-open bordered accordion with icons, a "show more" text clamp, a native details element and a nested settings group, all keyboard friendly.

Carousel patterns: a scroll-snap card rail with arrows and dots, a fading testimonial slider with pause and keyboard control, a thumbnail gallery and a before/after comparison slider.

Timeline patterns: a vertical milestone timeline with status, a compact activity feed with avatars and attachments, a horizontal roadmap with quarters, and a changelog list with version tags.

Rating components: an interactive star input with hover preview and labels, a rating summary with distribution bars, a review card with helpful votes, an NPS 0–10 scale and a thumbs feedback widget.

Illustrated states for when there is nothing to show or something went wrong: first-run empty state, no search results, offline/error with retry, permission denied, and a success confirmation.

Lightweight data components with no chart library: KPI cards with sparklines, a donut with legend, a bar chart with hover tooltips and a data table fallback, a gauge, and segmented and stacked progress meters.

Calendar components: a month view with event chips and today marker, a mini date picker, a day agenda with time grid and overlapping events, and an availability picker for booking a time.

Messaging components: a conversation with incoming and outgoing bubbles, grouped by time, read receipts, a typing indicator, file and image attachments, reactions, and a composer with auto-growing textarea.

List components: rich list rows with avatar, meta and actions; a sortable to-do list with checkboxes and drag handles (also keyboard reorder); and a compact kanban with draggable cards, labels and counts.

A notification centre panel with tabs (all, mentions), unread dots, mark-all-read, inline actions and an empty state; plus settings rows with descriptions, selects, switches, a danger zone and an unsaved-changes bar.

An inline command menu with grouped results, fuzzy filtering, arrow keys and Enter; a keyboard shortcut reference grid; and a shortcut recorder that captures a key combination.

A WAI-ARIA tree view with expandable folders and full arrow-key support, plus a file browser with breadcrumb path, list/grid view switch, multi-select and a details panel.

Onboarding patterns: a progress checklist widget that collapses, a three-step product tour with coach mark spotlights and back/next, and a welcome card with a role picker.

Slider patterns: a dual-thumb price range with histogram and inputs, a stepped slider with labelled ticks, a vertical volume slider, a hue slider and a rating-style segmented slider.

Colour pickers: preset swatches with a checkmark, a hex input with validation and contrast check against white and black, appearance mode cards with mini previews, and an accent preview button.

Custom media controls: an audio player with a clickable waveform, skip and speed buttons; a video player chrome with progress, captions and fullscreen buttons; and a mini player bar.

Developer content blocks: a tabbed code sample with line numbers and copy button, a terminal block with prompt and output, a before/after diff view, and inline code with keyboard keys.

A feature comparison table: sticky plan header with prices, check and cross icons with text alternatives, grouped highlight on the recommended plan, a "show differences only" switch and a column picker on phones.

Location components: an SVG map with category pins, a selected-pin popover, zoom and locate-me buttons, a synced results list with open-now filter, and a compact location card with distance and directions.

Safer destructive actions: a hold-to-confirm button with progress, an inline "are you sure?" swap, a type-to-confirm field, a checkbox acknowledgement and an undo snackbar with countdown.