Design patterns and architecture · Screens from parts

Component-based architecture-style app

Illustrative system design for a screens from parts app like Component-based architecture: 4 topics to read, from requirements to deep dives.

Illustrative design, not Component-based architecture’s actual implementation. Arrowbox is not affiliated with Component-based architecture’s owner. Disclaimer

Start with Decomposing a screen Sign in to start readingUpdated 2 Oct 2026

Core

From a screen to a component treeBeginner · 25 min read · Sign in to read
Draw boxes on the mock, give each one job, and decide where data enters the tree: a few components fetch and own state, and most just render their props.
Designing a component's propsIntermediate · 33 min read · Sign in to read
A component's props are a public API. Choose data, events, configuration and slots deliberately, decide who owns the value (controlled or uncontrolled), and offer customisation in layers.
Composition: children, compound components and headless logicIntermediate · 34 min read · Sign in to read
When a component keeps growing boolean props, let callers compose it from parts instead: children and slots, compound components sharing implicit state, and headless logic that owns behaviour but not markup.
Keeping styles inside the componentIntermediate · 28 min read · Sign in to read
The global cascade lets any rule restyle any component. Limit which elements a component's rules can reach, decide which stylesheet wins with cascade layers, and leave custom properties as the one deliberate door for theming.