Component Library
A collection of reusable, pre-built UI elements.
A component library is the practical, reusable building blocks of a design system — buttons, inputs, cards, modals — defined once and reused everywhere, in both design tools and code. It ensures the same element looks and behaves identically across the product.
Shared component libraries (in Figma and in code) keep design and engineering in sync and dramatically reduce duplicated effort.
Key characteristics
- A reusable set of UI elements — buttons, inputs, cards, modals — with defined states.
- Maintained in both design (e.g. Figma) and code (e.g. React) and kept in sync.
- Each component documents variants, props and accessibility behaviour.
- The building blocks a design system governs and assembles into patterns.
Example
A `Button` component ships with primary, secondary and danger variants plus loading and disabled states, so every team uses the same tested button rather than coding new ones.
Frequently asked questions
Is a component library the same as a design system?
No — it's a part of one. The library is the catalogue of components; the design system adds tokens, guidelines, principles and governance around them.
What makes a good component library?
Components that are composable, accessible by default, well-documented with all states, and version-controlled so updates roll out predictably.
Related terms
Need this done, not just defined?
I design and build it — Framer sites, product UI/UX, and more.