Skip to main content
Design & UX

Component Library

UI Library | UI Kit

Portrait of Robert Klimant, co-founder of Roelu Studio
Robert KlimantCo-founder

What is Component Library?

A component library is a collection of pre-built, reusable interface elements that designers and developers share across a product. The same UI kit lives in Figma for designers and in code (usually React, Vue, or Svelte) for engineers. Each component — a button, an input, a navigation bar, a card — is built once with defined states, variants, and props, then reused everywhere. The library is the visible half of a design system.

Why it matters

Most product teams rebuild the same button forty times. Different padding, different hover, different shade of blue. The result is a product that feels off without anyone being able to point at why. A component library ends that. Designers pull from the same kit. Developers ship the same React component. Visual consistency stops being a thing the team has to police. The bigger payoff: speed. New landing page, new feature, new flow — the team assembles it from existing parts instead of arguing about whether this card needs rounded corners.

How it works

The team identifies recurring UI patterns and builds each one as a Figma component with variants — primary, secondary, disabled, loading, dark, mobile. Engineering builds the matching React, Vue, or Svelte component with the same names and the same props. Both reference the same design tokens, so colors, spacing, and typography stay in sync between design and code. The library lives in a documented place — Storybook for code, a Figma library for design — and gets imported into every project the team ships. New marketing page or product flow? The designer drags components onto the canvas. The developer imports the same ones in code. The pieces fit because they were built to, and the team spends time on strategy instead of arguing about border-radius.

Related terms

  • Design System

    Design & UX

    A shared set of components, design tokens, and rules a team uses to design and build a product, so every page looks coherent and no one is reinventing a button…

  • Design Tokens

    Design & UX

    The named values behind a design system — colors, spacing, font sizes, radii — stored as variables so a single change updates every screen instead of every…

  • React

    Development

    The most widely used way of building interactive websites and apps in JavaScript. If your product has buttons, dashboards, or live data, there is a strong…

  • User Interface

    Design & UX

    The visible part of a digital product — the buttons, menus, forms, layout, typography, icons, modals — that a person actually touches, clicks, and reads to get…

  • Figma

    Design & UX

    The browser-based design tool most product and marketing teams use to design websites, apps, and interfaces — collaborative, fast, and the de facto standard…

  • User Experience

    Design & UX

    How it feels to use a product from start to finish — the speed, the clarity, the flow, the copy, the moments of friction, the parts that just work — not just…

  • Micro-Interactions

    Design & UX

    The small moments of feedback and motion in an interface — a button that nudges when hovered, a form field that confirms it heard you, a toggle that slides —…