@mittwald/flow-remote-vue-components

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

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>;
}

Building an app or mStudio extension in your own project? Read packages/components/USAGE.md before you lay out anything — templates, layout and spacing, what is safe to depend on. It routes extension developers on.

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 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.

An extension is written in React (@mittwald/flow-remote-react-components) or — in beta — in Vue (@mittwald/flow-remote-vue-components). The Vue binding renders the same Flow components in the host, but its API carries no stability promise yet; see its README.

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:

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

Migration

One command bumps every Flow dependency to the target version, installs, and runs the codemod of every migration up to that version:

npx @mittwald/flow-codemods@latest upgrade

It is not the whole migration — most entries in the Migration Guide have no codemod, and the command prints those when it is done. list shows them upfront without changing anything. 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

Working on Flow itself, as a human or an AI coding agent? Start with the root AGENTS.md. Most packages add their own AGENTS.md with the patterns and footguns of that area.

License

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