Component Library: Your UI's LEGO Box
A component library is a box of pre-built UI LEGOs. Instead of building a button from scratch, you grab the official one, ensuring consistency and speed. It's essential for scaling design across teams.
Why it exists
As applications grew to have hundreds or thousands of pages, building each UI element from scratch became unsustainable. This approach led to massive visual inconsistencies, wasted development effort, and a fragmented user experience. Component libraries were created to manage this complexity by providing a single, reusable set of building blocks.
The mental model
Think of a component library as a shared box of official UI LEGOs. Instead of every developer making their own version of a red 2x4 brick, everyone pulls the same standardized brick from the box. This guarantees that every button, form field, and modal across the entire product ecosystem looks and behaves identically.
How it works
A cross-functional team designs, builds, and documents a collection of UI elements like buttons, inputs, and cards. Each component is a self-contained package of code and styles. When a developer needs a button, they don't write custom HTML and CSS; they import the pre-built Button component from the library, passing in properties like text or color. This creates a single source of truth for both appearance and functionality.
When to use it
Use a component library when building products at scale, especially across multiple teams or departments. It's essential for maintaining brand consistency, speeding up development, and creating a unified language between designers and developers. By reusing premade components, teams can focus on solving complex user problems instead of reinventing basic UI elements.
When not to use it
For small, one-off projects, the overhead of creating and maintaining a component library can outweigh its benefits. A library is not a 'one-and-done' solution; it's a product in itself that requires a dedicated team for ongoing maintenance, updates, and support. Without this investment, the library will quickly become outdated and ignored.
One canonical example
Consider a dropdown menu. Without a library, one team might build it with a specific animation, another might use a different visual style, and a third might call it a 'selector'. With a component library, there is one official Dropdown component. Its appearance, behavior, accessibility, and name are all defined in one place. Every team uses this same component, ensuring a consistent experience and a shared vocabulary across the entire application.
Interview question
Which of the following best describes the main advantage of implementing a component library for a large software product?
- a.It allows each development team to independently create unique UI elements for their specific features.
- b.It is most effective for small, single-developer projects to avoid design overhead.
- c.It significantly reduces the need for ongoing maintenance and updates of UI code.
- d.It ensures visual and functional consistency across the product while accelerating development.Correct
Why? this is the answer
The card states that component libraries were created to manage complexity, ensure consistency, and speed up development across large applications. Option D directly captures these primary benefits. Option C is incorrect because while maintenance is centralized, the library itself requires ongoing effort and a dedicated team, not a reduction in overall maintenance needs.
Just read this? Test yourself on what you have been reading.
Read the original → nngroup.com
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles