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.