@duke333/builder-ui

React Builder package for admin screens and runtime form/list/view UI.

Install

pnpm add @duke333/builder-ui

One File Setup

Use one frontend bind file:

"use client";

import {
  BuilderProvider,
  createBuilderClient,
} from "@duke333/builder-ui";
import "@duke333/builder-ui/styles.css";
import { api } from "@/lib/api/apiClient";

export const builderClient = createBuilderClient({
  transport: api,
});

export function AppBuilderProvider({ children }: { children: React.ReactNode }) {
  return <BuilderProvider client={builderClient}>{children}</BuilderProvider>;
}

Runtime Components

import { BuilderForm, BuilderGrid, BuilderView } from "@duke333/builder-ui";

export default function Page() {
  return <BuilderView viewId="orders-view-id" />;
}

The ready components are:

• BuilderForm for form-only write flow
• BuilderGrid for list-only read flow
• BuilderView for full CRUD flow

They own fetching, fields, validation, search, sort, pagination, CRUD, Dialog/Drawer, subforms, loading, empty, errors, focus restoration, and row action isolation. Runtime form schemas expose presentation: "dialog" | "drawer"; no host shell mapping is required.

The existing createDynamic*Component factories remain available as the advanced headless API.

Validation

pnpm typecheck
pnpm test:run