2learn

UI Components

What it is

A UI component is a self-contained piece of interface — a button, a form field, a card, a dialog — with a defined interface of its own: which inputs it accepts, what it renders, and how it behaves. Building one means deciding that interface, implementing it once, and using it everywhere the same job appears.

Why it matters

Without components, every screen invents its own button. The buttons drift apart one property at a time until the product looks assembled from three different designs, and a change to the primary colour means editing forty files. A component library fixes the drift at the source: one definition, one place to change. It also makes the work faster after the first day, because the second and third screens are assembled rather than designed from scratch. The cost is real, though — a bad component API is worse than no component, because it spreads its confusion everywhere it is used.

In this track

  1. Designing a component API (02-frontend/12-ui-components/01-designing-a-component-api) — choosing the props, variants and defaults that make a component hard to misuse.
  2. Composing and theming components (02-frontend/12-ui-components/02-composing-and-theming-components) — assembling bigger pieces from small ones and changing their look without editing them.

Prerequisites

Go deeper

Analytics cookies are set only if you allow them. Nothing is loaded, and nothing is sent, until you choose.