← Back to blog

The 20 Components Every B2B Design System Needs

Most B2B products are built on the same 20 components. Here's the list, why each one matters, and which ones to prioritise when building an AI-optimised system.

Amarneethi·
The 20 Components Every B2B Design System Needs

The 80/20 of B2B UI

B2B products look diverse on the surface. CRMs, project management tools, analytics dashboards, internal ops platforms — they all look different. But underneath, they're assembled from mostly the same components.

If you audit a typical B2B product and count which components appear on the most screens, you'll find the same 20 names again and again. These are the components that make up the structural DNA of business software.

The Core 20

Data & Display

  1. Data Table — Sorting, filtering, pagination, batch actions. The most complex, most used component in B2B.
  2. Pagination — Works with the data table. Page size controls, current page display, previous/next navigation.
  3. Loading / Skeleton — Placeholder states for async data. Essential for perceived performance.
  4. Tag — Labelling, categorisation, status indication. Small but ubiquitous.

Input & Forms

  1. Text Input — The workhorse. With label, hint, error state, and disabled state.
  2. Select / Dropdown — Single-select from a list. Distinct from a multi-select.
  3. Checkbox — Multi-select in forms, bulk actions in tables.
  4. Toggle — Binary settings. On/off.
  5. Date Picker — Calendar-based date and date range selection.
  6. Search — With debouncing, empty state, and results preview.
  7. Form — The container that groups inputs with submit handling and validation display.

Actions

  1. Button — At minimum: primary, secondary, ghost, destructive, and icon-only variants.
  2. Overflow Menu — The "..." menu for row-level actions in tables and cards.
  1. Header — Global navigation, brand, user account.
  2. Side Nav — Primary application navigation. With collapsed/expanded state.
  3. Breadcrumb — Hierarchy navigation. Critical in deep navigation trees.
  4. Tabs — Content switching within a view.

Feedback

  1. Modal — Confirmation dialogs, forms, detail views.
  2. Notification — Toasts and inline alerts. Success, warning, error, info variants.

Misc

  1. Breadcrumb — Appears in virtually every multi-level B2B product.

The Tier-1 Priority List

If you're building a design system from scratch — or building an AI-native version of an existing one — start here:

  1. Data Table — The most complex, the most used, the most valuable to get right
  2. Header — Every screen has one
  3. Side Nav — Every screen has one
  4. Form — Most user tasks involve one
  5. Modal — Most confirmation actions use one
  6. Notification — Every action needs feedback

Get these six right and you can build 70% of a B2B product. The remaining 14 fill in the gaps as you encounter them.

For AI-Native Systems

When building a compressed, AI-optimised version of these components (see: Building an AI-Native Design System), the Data Table deserves special attention.

It's the most complex component and the one AI is most likely to get wrong without explicit guidance. Your AI-native version should include:

For the others, the key is stripping to the essential API surface — the props that define appearance and behaviour — without including internal implementation details.

The Maintenance Reality

A design system is only as good as its consistency. 20 well-maintained components that teams actually use is worth more than 200 components that are out of date or inconsistently implemented.

The right number of components is the fewest that cover your actual needs. This list is a ceiling, not a floor. If your product doesn't need a Date Picker today, don't add one. Add it when you need it, and add it right.