Blueprint, in your codebase.

The library

Blueprint is an open UI contract plus a thin runtime that renders it. JSON goes in, a real screen comes out. The runtime walks each node in the contract and maps it to one of your own components — there is no interpreter and no eval. The contract describes the screen; the behavior stays in your code.

Add it to your app

Install the runtime from npm and register your component set once.

npm i @dashforge/blueprint

Render a contract

Pass a contract and the components it should render with. The runtime resolves each atom to your component and returns real UI.

import { Blueprint } from '@dashforge/blueprint'
import { components } from './my-design-system'

export function Screen({ contract }) {
  return <Blueprint contract={contract} components={components} />
}

What the JSON holds

A contract is a declarative description of the screen — and nothing else. It carries the atom, its props, the layout, conditional visibility (against local form state), access rules, i18n keys and validation. It never carries logic: no onClick, no eval, no code-from-strings.

{ "version": "1.0", "type": "form", "id": "kyc",
  "fields": [
    { "type": "input",  "label": "Legal name" },
    { "type": "select", "label": "Country",
      "visibleWhen": { "field": "kind", "eq": "business" } },
    { "type": "button", "label": "Verify identity" }
  ] }

Drop in real React

Anything the closed 36-atom catalog doesn’t cover, you inject as real, typed React at any node — the wall always has a door.

• forms — bind your own form runtime to a form node.
• slots — render your component in a named slot.
• customNodes — map a custom node type to your React component.

Tailwind or MUI

The same contract renders on whichever design system you register — Tailwind or MUI — because the runtime maps atoms to your components. There is no Blueprint theme baked into the output; it adopts yours.