What is a component library in UX design?
A component library is a collection of pre-built, reusable interface components that a product team uses to design and develop their product. In design tools like Figma, a component library is a shared file containing all UI components that designers can drag into their designs and that automatically update when the source component changes. In code, a component library is a package of implemented UI components that developers import and use rather than building from scratch. Component libraries are the practical, usable artifact that design systems produce.
What does a component library typically include?
A well-maintained component library includes all the interface elements a team needs to build their product: form elements like inputs, buttons, checkboxes, and dropdowns, navigation components like menus, breadcrumbs, and tabs, feedback components like modals, toasts, and banners, layout components like cards, grids, and dividers, and data display components like tables and charts. Each component includes its variants and states: default, hover, focus, active, disabled, and error states. Usage documentation explains when and how to use each component, preventing misuse that would undermine consistency.
How does a component library differ from a design system?
A component library is one artifact within a broader design system. The design system encompasses the component library but also includes design principles, brand guidelines, design tokens, accessibility documentation, writing guidelines, and the governance processes that keep everything maintained and consistent. A product can have a component library without a full design system, but a design system always includes a component library as its central artifact. Teams that only have a component library without the surrounding documentation and governance often find that the library grows inconsistent over time as components are added without alignment to broader principles.