Component Library
The set of prebuilt components you can use.
Definition
The implemented collection of reusable components, which is one part of a design system rather than the whole of it.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
In plain language
The set of prebuilt components you can use.
Example
A library of forty React components. Without documentation and governance it is a library, not a system.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Design System
TermTokens, components, patterns and guidance, maintained together under an owner.
Key difference
A component library is the built components. A design system is that plus the tokens, the guidance and the governance that keeps them coherent. Shipping forty components and calling it a system is the most common way the work stalls.
Use Component Library when
- You mean the package that teams install and import.
- The subject is code: versioning, props, releases.
- There is no guidance or governance attached, and saying so is honest.
Use Design System when
- The question includes documentation, adoption or who decides.
- The problem is consistency across teams, not missing components.
- You are arguing for the ongoing investment, not a one-off build.
Local chart
TERM·085 · Region X · Grid D6
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Deeper reading
The full entry behind this definition.
- Component API DesignSYS·002 · Design system
- Design System DocumentationSYS·003 · Design system
Nearby in the Atlas
Adjacent territory, found through shared tags rather than a stated link.