xDev Asia

Build Design System for Micro Frontend. Shared component library (Storybook). CSS strategies: CSS Modules, Tailwind. Theming with CSS Variables. Versioning strategies.

Microservices & Micro Frontend system design — From basics to Production

Part 5: Building a practical Micro Frontend

xdev.asia

Introduction

When each team builds its own MFE, the UX is easily fragmented. Design System is the only solution to keep UX consistency across MFEs.

1. Design System Architecture

Design System:
├── Design Tokens (CSS Variables)
│   ├── Colors, Typography, Spacing
│   └── Shadows, Border radius
├── Core Components (@company/ui)
│   ├── Button, Input, Select, Modal
│   ├── Table, Pagination, Toast
│   └── Layout: Grid, Stack, Container
├── Patterns (Form, Navigation, Data display)
└── Documentation (Storybook)

2. CSS Strategy for Micro Frontend

2.1 CSS Conflicts issue

MFE A: .btn { background: blue; }
MFE B: .btn { background: red; }
→ CSS cascade conflict!

2.2 Solutions

Strategy	Isolation	DX	Performance
CSS Modules	✅ Scoped	Good	Best
Tailwind CSS	✅ Utility-first	Great	Good
CSS-in-JS	✅ Runtime	Good	OK
Shadow DOM	✅ Hard boundary	Complex	OK

Recommended: Tailwind CSS — conflict-free, consistent utility classes.

2.3 CSS Variables for Theming

:root {
  --color-primary: #2563eb;
  --color-error: #dc2626;
  --color-background: #ffffff;
  --color-text: #1f2937;
  --font-family: 'Inter', sans-serif;
  --radius-md: 0.375rem;
}

[data-theme="dark"] {
  --color-background: #111827;
  --color-text: #f9fafb;
}

MFE uses CSS Variables → automatically according to theme:

<button style={{ background: 'var(--color-primary)' }}>Click</button>

3. Shared Component Library

@company/ui/
├── src/Button/, Input/, Modal/
├── package.json
└── tailwind.config.js (shared config)

Distribution via Module Federation shared:

shared: {
  '@company/ui': { singleton: true, requiredVersion: '^3.0.0' },
}

4. Storybook — Living Documentation

export default { title: 'Components/Button', component: Button };
export const Primary = { args: { variant: 'primary', children: 'Click me' } };
export const Disabled = { args: { disabled: true, children: 'Disabled' } };

Deploy Storybook → single source of truth for all teams.

5. Versioning Strategy

Semantic Versioning: Major = breaking, Minor = feature, Patch = fix
Canary releases: test on 1 MFE before rollout
Backwards compatible: deprecate before removing

Summary

Design System is required for Micro Frontend
CSS Variables for theming — dark mode, branding
Tailwind CSS recommended — no conflicts
Storybook = living documentation

Next article: Lesson 16: Authentication & Authorization — SSO for Micro Frontend

Lesson 15: Design System & Shared UI — Keep UX consistent