A component is a reusable, self-contained building block of a user interface, such as a button, input field, card, or navigation bar. It bundles a specific piece of visual design and behavior so it can be used consistently across a product.
‍
Components are typically stored in a design system or component library, where teams define their variants, states, and properties once and then reuse them everywhere. This keeps designs consistent and makes updates faster, since changing a component updates it everywhere it's used.

Why do components matter?

Components matter because they make design and development faster, more consistent, and easier to maintain. Instead of redesigning a button or form field from scratch on every screen, designers and developers can drag in an existing component with a proven look and behavior.

For example, a button component might have defined states for default, hover, and disabled, plus variants for primary and secondary styles. Updating the component's design in one place instantly propagates the change across every screen that uses it, saving time and reducing inconsistency.

Similar