Flab UIv0.0.2
MobileA2UI

Flab UI

v0.0.2

A calm, data-dense React component library for application interfaces. The interface stays quiet so the data can be loud — boundaries are hairlines, not shadows; density comes from typographic hierarchy, not cramped spacing; and one signature accent is enough.

Components
58documented
Showcases
31full screens
Distribution
2npm + registry
Token layers
3primitives → theme
ReadyAwaiting releaseCritical12

Every control above reads the same token layer. Switch the palette or light/dark mode in the header and this strip re-tints with the rest of the docs.

Principles

A small set of convictions decides most design questions before they are asked.

  • Boundaries are hairlines, not shadows.
  • One signature accent; everything else earns its colour semantically.
  • Density from typographic hierarchy, not cramped spacing.
  • Colour never carries meaning alone — every status has a label.
  • Motion is 150–200ms and purposeful; nothing loops for decoration.
  • Numbers, amounts and IDs are tabular and right-aligned.

Two ways to ship it

Both tracks are generated from a single source, so they look identical and can be mixed in one project.

Install the package

Versioned upgrades and the smallest diff in your repo. Import from @flabbergasted-ai/react.

pnpm add @flabbergasted-ai/react @flabbergasted-ai/tokens

Copy in the source

Own and edit the component source, shadcn style. The CLI copies files in and rewrites imports.

pnpm dlx @flabbergasted-ai/cli add button badge card

Three token layers

Semantic tokens are used everywhere; raw palette values never ship in a component. In cascade order:

  1. 1
    primitives.css

    Raw values in :root — deliberately not registered with Tailwind, because bg-gray-400 is meaningless in a design system.

  2. 2
    semantic.css

    Intent mapped onto primitives — bg-page, text-secondary, --flab-ring. The only layer a theme override needs to touch.

  3. 3
    theme.css

    Registers the semantic layer with Tailwind via @theme inline, so scoped overrides like .dark actually take effect.

Every state is accounted for

Data-backed components and screens define all five states, so the interface stays honest when the data is not ideal.

LoadingEmptyErrorPartial / stalePopulated
Flab targets React 19 and Tailwind CSS v4, ships light and dark themes with a live palette picker, and treats keyboard, focus and contrast as part of done — see Accessibility.

Start here

Installation

Add the package or copy components in with the CLI. Both read the same token layer.

Tokens

The three-layer token system, both themes, and every colour pair with its measured contrast.

Components

Built on Base UI primitives, styled with the token layer, and shipped on npm and the registry.

Showcase

Full application screens assembled from Flab components, from dashboards to data tables.

Accessibility

Keyboard operation, visible focus in both themes, and contrast checked for muted content.

Flab × A2UI

Render Google's Agent-to-UI protocol with Flab widgets — agent-streamed UI, native styling.