The components I’m most proud of are the ones nobody notices.
Not because they’re invisible — because they’re obvious. A Badge. A Spinner. An Avatar. Things so small and self-contained that reading the implementation takes less time than explaining it would.
The tight contract
A large component carries obligations. It has props you use and props you ignore. It renders things you sometimes don’t want. It has opinions about its own spacing.
A small component has a contract you can hold in one sentence. Badge takes a label and an optional variant and renders a pill. That’s it. Reading the code confirms what the name already told you.
interface BadgeProps {
label: string;
variant?: "default" | "accent" | "success" | "warning";
}
export function Badge({ label, variant = "default" }: BadgeProps) {
return <span className={`badge badge-${variant}`}>{label}</span>;
}No logic. No conditionals beyond the default. No side effects. The whole thing is a mapping from props to markup.
Composition you didn’t plan for
The other thing that happens with small components: they compose in ways you didn’t anticipate.
You build Avatar for the user menu. Three weeks later, a teammate reaches for it in a comment thread. Then in a presence indicator. Then in an autocomplete dropdown. This happens not because the component is clever, but because it’s small enough to fit anywhere without bringing baggage.
Large components rarely compose this way. They’re too heavy, too opinionated, too coupled to the context they were first built for. You can’t just drop a UserProfileCard into a data table cell.
Naming as design
Building small components forces a naming discipline I find genuinely useful.
When a component does one thing, naming it is easy. When it does several things, you end up with names like UserCardWithActionsAndStatus — which is the component telling you it needs to be split.
The naming process is a design process. If I can’t name a component clearly, I usually can’t describe what it does clearly, which usually means it’s doing too much.
None of this is original. The case for small, composable pieces is well-worn. But I keep returning to it not as a principle to follow but as a feeling to chase — the particular satisfaction of a component so small and correct that adding a comment would be redundant.
Write the thing. Name it well. Let it be small.