fossui playground

The interactive component gallery for fossui: every component rendered live, with knobs to flip variant, size, and state, the code that produces it, its props, and a grid of all its variants. It is built as a Flutter web app on Widgetbook and deploys as the documentation site.

Run it

fvm flutter pub get
fvm dart run build_runner build
fvm flutter run -d chrome

build_runner regenerates lib/main.directories.g.dart, the use-case tree collected from the @UseCase annotations. That file is generated, so it is not checked in; run the build step after pulling or adding a component.

During development the app depends on the package by path (../foss_ui_package), so a package edit shows up here on the next run. Once fossui is on pub.dev the dependency moves to the published version, so the site renders exactly what a consumer installs.

How it is laid out

• lib/use_cases/ holds one file per component, mirroring lib/src/components/ in the package. Each use-case is a small annotated function; knobs drive its props so you can flip variant, size, and state live.
• lib/component_doc.dart is the page each use-case renders into: a ComponentDoc stacks the live demo, the copy-paste code, a props table, and the variants grid. The snippet is built from the same knob values as the demo, so the two never disagree. Code is highlighted with the syntax_highlight package.
• lib/theme_addon.dart wires the light and dark FossThemeData as the theme axis. Every use-case renders inside a FossTheme, so context.fossTheme resolves exactly as it does in a consumer app. A text-scale addon sweeps 1.0 to 2.0 for the accessibility pass.

Icons come from lucide_icons_flutter, the companion icon set the docs use throughout. The package itself takes no icon dependency.

What Widgetbook does and does not give

The nav tree and toolbar are Widgetbook's own fixed chrome; the theme addon paints the preview canvas, not the surrounding shell. The shadcn-style page (demo, code, props, variants) is ours, rendered inside each use-case body. The mobile viewport sweep is not wired yet: it needs Widgetbook's ViewportAddon, which wants a newer Flutter than the pinned SDK allows, so it lands with the SDK bump.

Status

Beta. The ComponentDoc structure is being nailed down on Button before the rest of the components fan out against it. The site is live at play.fossui.org.