Component Library

A collection of reusable, pre-built UI elements — buttons, inputs, cards, modals — shared across a product to speed up and standardize design.

Deliverables & Artifacts

A component library is the reusable-parts inventory of a product: every button, form field, menu, and card built once and used everywhere. It exists in both the design tool (for designers) and the codebase (for engineers), ideally kept in lockstep so a component looks and behaves the same in Figma and in production.

It is the most tangible piece of a design system — the system also carries tokens, guidelines, and governance. On its own, a component library already pays off by eliminating redraw-from-scratch work and the subtle inconsistencies that creep in when every screen reinvents the same elements.

Related terms

Design SystemA single source of truth for a product's UI — reusable components, tokens, patterns, and guidelines that keep design consistent and fast.Design TokenA named, reusable variable for a design decision — a color, spacing, or type value — that keeps design and code in sync from one source.UI DesignThe craft of the visual and interactive surface of a product — layout, type, color, spacing, and components users see and touch.