Component library

A component library is the code (and often design) side of a design system. When the components designers use and the components engineers ship are the same implementation, the system stays honest and drift disappears.

How it works

Each component is built once with its variants and states: a button in primary and secondary styles, sizes, hover, focus, disabled and loading. It is documented with when to use it and when not to, and published as a package or folder that every screen imports. Components are composed from design tokens, so a change to a colour or spacing value updates every component at once.

Designers keep a matching library in their design tool, and the names on both sides line up, so a design hands off as a list of known parts rather than a picture to re-create.

Example

Troiana built the Catering Prishtina site, seven pages for the airport's catering and duty-free operator, from one exacting design system: the same cards, headings and buttons reused across every route instead of each page being styled on its own.

Common mistakes

• Building components for every hypothetical case before any screen needs them.
• Letting design files and code drift apart until the library describes neither.
• Skipping keyboard and focus states, so every screen inherits the same accessibility gap.