Apex Design

A React 19 + Mantine v8 design system, served as a Module Federation remote and previewed in Storybook.

Components ship in two tiers: bundled atoms imported as normal code (src/components/*), and federated organisms loaded at runtime over Module Federation (src/federated/*). mf-exposes.ts scans both folders and wires up the remote and the @apex/design package.

Run it

pnpm install
pnpm storybook   # component workbench at :6006
pnpm dev         # remote + preview at :8082
pnpm build       # production remoteEntry.js
pnpm lint

Requires Node >= 20 and pnpm. pnpm dev serves remoteEntry.js from http://localhost:8082 with open CORS so host apps on other ports can load it.

Use it in a host app

Depend on the @apex/design wrapper (in packages/apex-design/), not this repo directly. Bundled components and the theme come from the root; federated organisms from /remote:

import { ThemeProvider, Button } from "@apex/design";
import { SpotifyRecentlyPlayed } from "@apex/design/remote";

<ThemeProvider defaultColorScheme="dark">
  <Button>Save</Button>
  <SpotifyRecentlyPlayed tracks={tracks} />
</ThemeProvider>

Mount ThemeProvider once at the root. The host must register the apex_design remote in its own Module Federation config for /remote components to load.

Add a component

Create src/components/<Name>/ (bundled) or src/federated/<Name>/ (runtime) with <Name>.tsx, index.ts, and a .stories.tsx, then run pnpm generate in packages/apex-design/. The folder scan handles the rest.