Component
A named, reusable piece of UI (a button, a card, a whole navbar) that you define once and drop in anywhere with different data.
See it
What it is
A component is a reusable unit of UI: you hand it data, it produces a piece of the page. What it is made of depends on the tool. A function in modern React, a class in older React, a single-file template in Vue and Svelte, a class extending HTMLElement for a custom element. The button, the card, the whole sidebar: define it once, use it in twenty places with different content. Frameworks disagree loudly on syntax but the deal is identical.
Good components have one job and a small, honest set of inputs. A 'Card' that accepts any content beats a 'ProductCardOrUserCardOrEventCard' with a mode prop. When you catch yourself adding a fourth boolean to control the layout, the component is asking to be split, or opened up to composition.
Misconception worth killing: components are not just about looks. They bundle markup, styling, behavior, and accessibility wiring into one unit, which is why copy-pasting markup around instead of extracting a component is how a design system quietly rots.
Ask AI for it
Build a reusable Card component: it takes title, description, imageUrl, and href as props, renders semantic HTML (an article with a heading and a link), and applies no outer margins so the parent owns layout. Keep all styling inside the component, type the props explicitly, and show three usages with different data instead of duplicating markup.