# Client-Side UI Composition

> Each team ships its own UI component — client assembles the page from micro-frontends.

- **Category**: Microservices
- **Subcategory**: UI Patterns
- **Canonical URL**: https://designpattern.fyi/patterns/client_side_ui_composition/

---

## Description
Clean, reusable architecture pattern.


## Use Cases
E-commerce page: Cart team ships CartWidget, Product team ships ProductDetails, Review team ships ReviewSection. Shell assembles them. Each team deploys their widget independently.





## Trade-offs


### Advantages

- True team autonomy — frontend + backend owned end-to-end

- Independent deploy cycles per team

- Tech stack freedom per component (mostly)

- Scales to large orgs without frontend bottleneck




### Considerations & Drawbacks

- Consistency nightmare — every team invents their own design system

- Bundle size bloat if each component ships its own React

- Cross-component communication gets messy

- Shell/composition layer is its own engineering challenge







---
**Reference**: [Original Source](https://microservices.io/patterns/ui/client-side-ui-composition.html)