component library
/kəmˈpoʊnənt ˈlaɪbrɛri/
CommonA collection of reusable UI components shared across a codebase or product team.
Often used interchangeably with design system, though they are not the same. A component library is the code. A design system is the code plus the rules and principles around it.
| # | Example | What it means | Source |
|---|---|---|---|
| 01 | stop writing custom inputs. we have a component library for a reason | The developer is building components that already exist in the shared library. | x, 2023 |
| 02 | shadcn changed how I think about component libraries. you own the code | The speaker prefers shadcn's model where components are copied into your codebase rather than being an external dependency. | x, 2024 |
| 03 | we have a component library but nobody uses it because the docs are trash | The library exists but poor documentation means developers don't know how to use it. | reddit, 2022 |
| 04 | spent two weeks building an internal component library. saved six months of work | The upfront cost of building reusable components paid off quickly. | x, 2023 |
Use it when
- Referring to a shared set of UI components in a codebase.
- Discussing whether to build a custom component or use an existing one.
- Talking about third-party UI packages like shadcn or MUI.
Do not use it when
- You mean the entire design system including principles and guidelines.Use “design-system” instead.
Component library vs design system
component library
A component library is the set of reusable code or Figma components.
design-system
A design system is the component library plus the principles, tokens, and documentation that govern how and why things look the way they do.
Origin and context
The practice of shared UI components emerged alongside component-based JavaScript frameworks, particularly React (2013). The term component library became standard as teams began packaging and publishing these shared sets internally and as open source.
- First seen
- mid-2010s
- Confidence
- medium
Cite this page
Use this stable URL to reference the entry.
https://slang.fyi/component-library