A collection of accessible, themeable, and responsive micro-frontend components built with Next.js & SCSS.
- 🎨 Themeable — Light, dark, and system themes out of the box
- 🏷️ White-Label — Brand override system for multi-tenant apps
- ♿ Accessible — WAI-ARIA compliant with keyboard navigation
- 📱 Responsive — Mobile-first design, works on all screen sizes
- ⚡ Performant — Zero external runtime deps, SCSS modules
- 📖 Storybook — Interactive docs with live prop controls
| Component | Description | Variants | Status | Assigned To |
|---|---|---|---|---|
| FAQ | Collapsible question/answer list | bordered, flush, card | 🟢 Done | Akash Ranjan |
| Accordion | Generic expand/collapse panels | bordered, flush, separated | 🟢 Done | Akash Ranjan |
| Ratings | Interactive star/heart/circle rating input | sm, md, lg + 3 icon types | 🟢 Done | Akash Ranjan |
| ProfileCard | Social profile card with stats and platform icons | split, full | 🟢 Done | Akash Ranjan |
| Toast | Notification message system | - | ⏳ Pending | Fudail Mohammed Zafar |
| HeroBanner | Premium hero section with floating cards | left, right, content-only | 🟢 Done | Akash Ranjan |
| Card Carousel | Horizontal scrollable card container | - | ⏳ Pending | Fudail Mohammed Zafar |
More components coming soon! Contributions welcome.
- Node.js 18+
- npm 9+
git clone https://github.com/vatsaakash/moddular-mfe.git
cd moddular-mfe
npm installYou can use these components in any React/Next.js project.
Run this in your target project's terminal:
npm install https://github.com/vatsaakash/moddular-mfeImport the global styles in your app entry point (e.g., main.tsx or _app.tsx), and use components directly:
import 'moddular-mfe/src/app/globals.scss'; // Required for color tokens
import { Ratings, ThemeProvider } from 'moddular-mfe';
export default function App() {
return (
<ThemeProvider brand="brand1">
<Ratings value={4} />
</ThemeProvider>
);
}Important
You must import the global CSS/SCSS file for the theme and brand tokens to work. If you don't import it, CSS variables like --color-primary will be undefined.
Note
Ensure your project supports SCSS Modules and has sass installed: npm install -D sass.
# Next.js dev server
npm run dev
# Storybook
npm run storybook# Deploy to GitHub Pages (site + storybook)
bash scripts/deploy.shThe built-in ThemeProvider supports three modes and defaults to dark mode if no preference is specified.
- Uncontrolled: Pass
defaultTheme="light"(defaults to"dark"). It will be saved tolocalStorage. - Controlled: Pass
theme="dark". This strictly overrideslocalStorageand system preferences.
import { ThemeProvider, useTheme } from 'moddular-mfe';
export default function App() {
return (
<ThemeProvider theme="dark"> {/* Strictly dark */}
<MyContent />
</ThemeProvider>
);
}
function MyContent() {
const { theme, setTheme, resolvedTheme } = useTheme();
// setTheme('light') will only work if the prop 'theme' is not passed above
return <p>Current: {resolvedTheme}</p>;
}The ThemeProvider now supports a brand prop to switch color palettes dynamically:
<ThemeProvider brand="brand1">
{/* All components inside will use Brand 1 (Ocean Blue) colors */}
</ThemeProvider>Alternatively, you can manually set the data-brand attribute on the <html> tag:
<html data-brand="brand1"> <!-- Ocean Blue -->
<html data-brand="brand2"> <!-- Sunset Orange -->
<html data-brand="brand3"> <!-- Forest Green -->
<html data-brand="brand4"> <!-- Royal Purple -->To add a custom brand, edit src/styles/_brands.scss:
[data-brand='myBrand'] {
--color-primary: #your-color;
--color-accent: #your-accent;
// ... override any CSS custom property
}All spacing, typography, and shadows use centralized variables:
@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;
.myComponent {
padding: $space-lg;
border-radius: $radius-md;
color: var(--color-text);
background: var(--color-surface);
@include respond-to(md) {
padding: $space-xl;
}
@include focus-ring;
}import { FAQ, Ratings } from 'moddular-mfe';
const items = [
{ question: 'What is this?', answer: 'A reusable component!' },
{ question: 'Is it accessible?', answer: 'Yes — full ARIA support.' },
];
// Use components anywhere
<FAQ items={items} variant="card" allowMultiple />
<Ratings
defaultValue={3}
icon="star"
max={5}
showLabel
size="md"
/>| Prop | Type | Default | Description |
|---|---|---|---|
max |
number |
5 |
Maximum number of icons |
value |
number |
- |
Controlled rating value |
icon |
'star'|'heart'|'circle' |
'star' |
The shape of the rating icon |
size |
'sm'|'md'|'lg' |
'md' |
Size variant |
readonly |
boolean |
false |
Disable user interaction |
theme |
'light'|'dark' |
- |
Component-level theme override |
| Prop | Type | Default | Description |
|---|---|---|---|
title |
string | ReactNode |
- |
Main heading text or custom component |
badge |
string |
- |
Text displayed above the title |
description |
string |
- |
Supporting paragraph text |
ctaText |
string |
- |
Text for the primary action button |
ctaHref |
string |
'#' |
URL for the primary action |
imageSrc |
string |
- |
Primary hero image source |
imageAlt |
string |
"" |
Alt text for the hero image |
imagePosition |
'left' | 'right' |
'right' |
Alignment of the hero image |
floatingCards |
FloatingCardData[] |
[] |
Array of overlay status cards |
blobShape |
PredefinedBlobShape | string |
'organic' |
Shape of the blob: organic, circle, square, pill, leaf or custom CSS string |
blobAnimationDuration |
string |
"20s" |
Duration for the blob bounce animation |
className |
string |
"" |
Additional CSS classes |
theme |
'light' | 'dark' |
undefined |
Component level theme override |
We welcome contributions! Please read CONTRIBUTING.md for:
- Component creation checklist
- SCSS conventions
- Commit message format
- PR process
src/
├── app/ # Next.js App Router (demo pages)
├── components/ # MFE components
│ ├── FAQ/
│ ├── Accordion/
│ └── Ratings/
├── providers/
│ └── ThemeProvider.tsx # Dark / Light / System theme context
└── styles/ # Global SCSS infrastructure
├── _variables.scss # Spacing, typography, shadows
├── _colors.scss # Semantic CSS custom properties
├── _themes.scss # Light / dark overrides
├── _brands.scss # White-label brand maps
├── _mixins.scss # Responsive, a11y, animation helpers
└── _index.scss # Barrel file
MIT — see LICENSE for details.