componentdriven

Component-driven development is a software design and implementation approach that treats user interfaces as assemblies of modular, reusable components. Components are developed and tested in isolation and then composed to form pages and features. The approach emphasizes reusability, consistency, and a clear separation of concerns, rather than building screens directly from completed pages or flows.

The approach has strong influence from design systems and modern frontend workflows. It is commonly associated with tools that render components in isolation, such as Storybook, allowing developers and designers to explore, test, and document components without requiring a complete application. The idea is aligned with atomic design and other component-centric patterns that promote tokens, variants, and accessibility from the outset.

Benefits include improved reusability, faster iteration, better collaboration, a more consistent user experience, and easier testing and accessibility. Challenges can include the initial setup effort, potential over-abstraction, more coordination for design tokens and component states, and the need for disciplined governance to avoid component sprawl.

Common in frontend development using frameworks such as React, Vue, and Angular, component-driven workflows often integrate with design systems, component libraries, and visual regression testing. Teams build a library of components with stories or examples, then compose them into pages, enabling a shared understanding across design and development.