Building Reusable Component Architecture in React

Most React codebases don't fail because of a bad framework choice — they fail because components grow one prop at a time until nobody can predict what a change will break.

The pattern I default to: a small set of primitive, style-only components (Button, Card, Badge) composed into feature components that own behavior and data, never the other way around.

Variants live behind a single `variant` prop backed by class-variance-authority, not a spread of boolean props like `isPrimary`, `isLarge`, `isRounded`. It keeps the API surface predictable and the Tailwind classes centralized in one place.

The payoff shows up months later: a rebrand or design tweak touches a handful of primitive files instead of every screen in the app.