Flow

mStudio Design System

A React component library and a remote-rendering system, built by mittwald.

Flow gives mittwald a single, accessible UI foundation — and lets mStudio extensions render sandboxed interfaces with those same components from inside an iframe.

• 📘 Documentation: https://flow.mittwald.de
• 🎛️ Storybook: https://storybook.flow-components.de
• 🧩 Extension developer portal: https://developer.mittwald.de

⚠️ Early development — stability notice

Flow is in early development and we offer no stability guarantees of any kind. Try it and tell us what you think — but don't rely on any input or output staying stable between releases.

Highlights

• Various components covering actions, forms, overlays, navigation, data visualization, content, and status.
• Accessible by default — most components wrap react-aria-components, so keyboard behavior, focus management, and ARIA come built in.
• Design tokens compiled from YAML to CSS variables via style-dictionary — colors, typography, spacing, and radii stay consistent and themeable.
• Contextual composability — components adapt to where they're used (an Icon inside an Alert sizes itself; a Heading inherits its level) instead of needing props threaded through by hand.
• Remote rendering — the same components render inside sandboxed mStudio extensions across a versioned, backwards-compatible protocol.
• Two icon sets (Tabler + FontAwesome), a standalone stylesheet, i18n (German + English, ICU MessageFormat), RTL support, and light/dark themes.

Installation

npm install @mittwald/flow-react-components

React 19 and react-dom 19 are peer dependencies.

Quick start

Import the stylesheet once at your app's entry point, then use components anywhere:

import "@mittwald/flow-react-components/all.css";
import { Button } from "@mittwald/flow-react-components";

export default function App() {
  return <Button>Hello Flow</Button>;
}

Prefer to override Flow's styles without specificity tricks? Import the CSS Cascade Layers variant instead — @mittwald/flow-react-components/all-layered.css. See the stylesheet guide for when to use which.

Set application-wide component defaults once by wrapping your app in ComponentDefaultsProvider; every individual usage still wins over the default.

How Flow is built

Flow is three systems in one monorepo.

1. Design system core

React components in packages/components, styled with SCSS modules and design-token CSS variables. The icon sets, the standalone stylesheet, and the docs site build on top.

2. Remote DOM (flr = Flow Remote)

mStudio extensions run in a hidden iframe and render UI that the host materializes with real Flow components — so an extension gets native look, feel, and accessibility without shipping its own copy of the design system.

extension (iframe)                          host (mStudio)
RemoteRoot + remote React components  ───►  RemoteRenderer + RemoteReceiver
   │  @quilted/threads connection              │
   └─ hidden remote DOM (flr-* elements) ───►  maps flr-* to Flow components

The connection protocol is versioned — the host negotiates with each remote version, and the props of remote-capable components are a stable contract with extension developers. Full picture: docs/remote-ui.md.

3. Token pipeline

packages/design-tokens holds token YAML — the design authority, defined together with UX. style-dictionary compiles it to CSS variables and JSON that every other package consumes.

Packages

nx + pnpm workspace monorepo. The published packages:

Package	Description
@mittwald/flow-react-components	The component library — the heart of Flow.
@mittwald/flow-design-tokens	Design tokens (YAML source → CSS variables + JSON).
@mittwald/flow-icons	Icon set generated from Tabler.
@mittwald/flow-icons-pro	Icon set generated from FontAwesome.
@mittwald/flow-stylesheet	The components' stylesheet as a standalone, framework-agnostic CSS package.
@mittwald/flow-remote-core	Remote connection + serialization layer (versioned protocol).
@mittwald/flow-remote-elements	Custom flr-* elements for the remote side.
@mittwald/flow-remote-react-components	React API used inside remote apps (extensions).
@mittwald/flow-remote-react-renderer	Host-side renderer mapping flr-* elements to Flow components.
@mittwald/ext-bridge	mStudio extension bridge (node / browser / react / i18next entries).
@mittwald/react-tunnel	Generic "portal for components" utility.
@mittwald/mstudio-ext-react-components	Helpers for mStudio extension developers (page header customization).

Apps live in apps/: the documentation site (apps/docs) and a remote-rendering demo (apps/remote-dom-demo).

Migration

See the Migration Guide. Full history is in CHANGELOG.md.

Contributing

Contributions are welcome — the full guide is in CONTRIBUTE.md. To get started:

corepack enable && pnpm install   # setup (Node >= 24)
pnpm nx dev components            # component dev environment (Storybook on :6006)

Common tasks:

pnpm build            # build everything (runs all generators)
pnpm test             # unit + compile tests
pnpm lint             # eslint + stylelint + format:check

This repo is optimized for AI coding agents as well as humans: every package ships an AGENTS.md next to its code with the patterns and footguns specific to that area. Start with the root AGENTS.md.

License

MIT © Mittwald CM Service GmbH & Co. KG and contributors