Flow UI

@flow-industries/ui is the design system behind every Flow frontend — the marketing site, these docs, the social platform, the auth dialog, the game client's web shell. One package, one set of tokens, 60+ components.

What ships

• 60+ React components built on Base UI primitives, styled with Tailwind v4.
• Design tokens — colors (OKLch), typography, spacing, borders, motion — in styles/tokens.css.
• Fonts — Geist Sans and Geist Mono in styles/fonts.css.
• Branding — Logo, Logomark, Wordmark, social icons.
• Utilities — cn() for class merging, useIsMobile() hook.
• Practice sessions — an opt-in FocusProvider, FocusPanel, and study-subject picker in @flow-industries/ui/focus.

Source is shipped raw — no build step — and compiled by your app's Vite + Tailwind pipeline. This makes the package tiny on disk, tree-shakes at component granularity, and lets you fork any component by copy-pasting the TSX.

Foundations

• Base UI — not Radix. The API uses render props, not asChild; data attributes match Base UI's vocabulary (data-open, data-slot). If you know Radix, the patterns are familiar but the imports and props differ.
• Tailwind v4 — uses the @theme directive and native CSS custom properties. The package does not ship a Tailwind plugin; you import its CSS files and point Tailwind at its source via @source.
• Motion — the motion/react library handles animated components. Every animated component respects prefers-reduced-motion.

Pick a starting point

• Installation — bun add, CSS import order, Tailwind config.
• Tokens — the design-token reference.
• Components — the component catalog.
• Theming — light, dark, and custom palettes.