React MFE Shell
Micro frontend shell with a complete design system, 24 components, 666 tests, and WCAG AA compliance. Published on npm as @jonmatum/react-mfe-shell.
What it is
A production-ready micro frontend shell with a comprehensive design system, form molecules, and accessibility-first components. Published on npm as @jonmatum/react-mfe-shell.
The project includes 14 atomic and 10 molecular components, following atomic design principles with strict TypeScript and Tailwind CSS.
Components
Atomic (14)
Avatar, Badge, Button, Code, Divider, FeatureChip, Heading, Icon, Input, Label, LoadingSpinner, Paragraph, Switch, and Text.
Molecular (10)
Card, Checkbox, FileUpload, FormField, Modal, Radio, SearchBox, Select, SwitchField, and Textarea.
Key features
- 666 tests with 75%+ coverage
- WCAG AA — full accessibility compliance
- Theme system — light, dark, and system modes with persistence
- Design tokens — consistent colors, spacing, and typography
- Tree shakeable — import only what you need
- Three integration modes — zero-config, Tailwind preset, or CSS-in-JS
Why it matters
Demonstrates how to build a shared design system for micro frontend architectures with production standards: accessibility, theming, form validation, and automated quality metrics.
References
- GitHub Repository — jonmatum, 2025. Source code and documentation.
- npm Package — jonmatum, 2025. Published package.
- Interactive Demo — jonmatum, 2025. Component showcase.
Related content
- Monorepos
Code organization strategy where multiple projects coexist in a single repository, sharing dependencies, configuration, and build tooling.
- Micro Frontends
Architectural pattern extending microservices to the frontend, allowing independent teams to develop and deploy parts of a web application autonomously.
- React
JavaScript library for building user interfaces through declarative, reusable components, with an ecosystem spanning from SPAs to full-stack applications with Server Components.