WebBlocks UI Components
Grouped by use, not by spectacle

Components that stay legible in context.

WebBlocks is strongest when buttons, fields, overlays, and navigation patterns are treated as working parts of a page. This index groups the library by job: data entry, feedback, movement, visibility, and interaction.

Primitives

Buttons, badges, cards, tables, and quiet defaults.

These are the pieces that appear almost everywhere. They should not need explanation once the naming is learned.

Common page furniture

button, badge, alert, card, table
Published
Status messaging stays direct and low-friction.
Open invoices 3 pending
#1201Agency retainer$820
#1202Hosting$40
Forms and choice

Input patterns are treated as a family.

Form fields, selects, switches, grouped inputs, radio cards, and validation states share the same token logic. The goal is steady rhythm, not flashy field chrome.

Form block

form, input group, radio card
https://
Navigation and data movement

Movement through information uses small, repeatable patterns.

Breadcrumbs, pagination, nav groups, tabs, filter bars, list groups, and action menus exist to reduce friction between states.

Navigation strip

tabs, breadcrumb, filter bar, action menu
Overlays and richer interaction

Behavior stays opt-in and named.

Modals, drawers, dropdowns, tooltips, popovers, command palettes, toast notifications, accordions, and collapse patterns are wired through explicit attributes and small modules. The HTML still tells you what the page can do.

Overlays

Modal, confirm, drawer, dropdown, popover, tooltip, and toast cover visibility changes and temporary surfaces.

Disclosure

Accordion, collapse, nav group, and dismiss manage sections that open, close, or leave the page.

Workflow helpers

Command palette, AJAX toggle, and action menus help pages feel interactive without becoming opaque.

Editorial support

A small set of content-first primitives for public pages.

These pieces support marketing pages, editorial sections, release pages, and structured website content without introducing a second design language.

Section heading and inline list

wb-section-heading, wb-inline-list

Editorial intro

Lead with a named heading block instead of anonymous wrappers.

`wb-section-heading` gives public sections an eyebrow, title, and supporting copy that stay visually related.

  • Case study
  • Updated weekly
  • No framework lock-in

Promo and card surfaces

wb-promo, wb-card-muted, wb-card-accent

Use `wb-promo` when the section needs a stronger call to action.

The promo panel pairs well with muted or accent-tinted cards for pricing, release notes, signup nudges, or editorial conversion blocks.

Start trial Read story
Muted card

Use for softer supporting content, side notes, or quiet summaries.

Accent card

Use for featured highlights, launch notes, or tighter attention points.

Markup pattern

The classes are meant to be copied directly.

The naming system is intentionally plain. You should be able to copy a pattern, change the surrounding semantics, and still understand what every line is doing six months later. 

<div class="wb-card">
  <div class="wb-card-header wb-split">
    <strong>Invoice</strong>
    <span class="wb-badge wb-badge-success wb-badge-dot">Paid</span>
  </div>
  <div class="wb-card-body">
    <button class="wb-btn wb-btn-outline wb-btn-sm">View</button>
  </div>
</div>