By the end of this lesson you can
- Structure components from smaller building blocks.
- Use composition and slots instead of endless variants.
- Balance flexibility, consistency and maintainability.
The idea
Component architecture is how components are built from one another. A popular way to think about it is to move from small to large: foundations (tokens), basic elements (icon, label), components (button, input), composite components (search bar, card) and patterns (filter panel, checkout form). This idea is often called atomic design.
Composition over configuration
Instead of one giant card component with 40 options, build small pieces (card container, media, header, body, actions) that can be combined. This is composition. It keeps each piece simple and lets teams create layouts the system did not predict, while staying consistent.
Slots
A slot is a placeholder inside a component where other content can go, for example the body of a modal. In design tools, slots are often a placeholder instance that can be swapped. In code, they map to "children" or named slots.
Maintainability
Nesting helps updates flow, but deep nesting makes components hard to understand and slow. Keep nesting shallow and document how pieces fit.
Why it matters in real projects
Well-architected components scale: new needs can be met by combining existing parts rather than adding special cases. Poor architecture leads to bloated components that nobody understands and a flood of one-off detached copies. Thinking like this also mirrors how developers structure code, which improves collaboration.
A realistic example
A system's card component has grown to 96 variants covering image positions, button counts and badge options. Designers struggle to find the right one and often detach it.
The team rebuilds the card as a container with slots for media, header, body and footer, plus small sub-components for each. The variant count drops to four sizes. Designers compose cards from parts, and developers map them directly to their composable card in code.
Step by step
Pick a complex component
Choose one with many variants or frequent detaching.
Break it down
Identify the smaller parts it is made from.
Build the parts
Create sub-components for each part.
Add slots
Use swappable placeholders for flexible areas.
Compose examples
Build several real layouts from the parts.
Compare
Compare complexity before and after.
Common mistakes
Mistake Adding a variant for every request.
Instead Use composition and slots.
Mistake Very deep nesting.
Instead Keep nesting shallow and document structure.
Mistake Design architecture different from code.
Instead Agree structure with developers.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 1 h 15 min
Refactor a component
Refactor a complex component into composable parts.
Steps
- Choose a modal, card or list item.
- Break it into parts and build sub-components.
- Add at least one slot.
- Compose three different real-world examples.
Deliverable
A refactored component with three composed examples.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Build components from smaller parts.
- Prefer composition and slots to endless variants.
- Keep nesting shallow and documented.
- Match architecture with code.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.