START HERE

Make it
part of your work.

A React package and a separate Next.js showcase. Plain CSS, typed props and Base UI underneath.

First edition

This package is not published to npm. The commands below use the local workspace or a packed tarball. The public package name and licence are not yet selected.

Who this is for

React developers building dashboards, internal tools and early product ideas. The examples are also useful for studying component structure, keyboard behaviour and motion.

This is an early library and a public design showcase. The source package is not yet distributed publicly. The local commands below are for contributors with access to the workspace.

Run this project

cd bld8-ui
npm ci
npm run dev

The showcase opens at http://127.0.0.1:3120. Library and documentation edits refresh locally.

Use the components

import "@bld8/ui/styles.css";
import { UIProvider, Button, Icon } from "@bld8/ui";

export default function App() {
  return (
    <UIProvider>
      <div style={{ isolation: "isolate" }}>
        <Button>Save changes <Icon /></Button>
      </div>
    </UIProvider>
  );
}

With Next.js, import the stylesheet in your root layout. Put event handlers and interactive examples in a Client Component. Give the application wrapper isolation: isolate and the body position: relative so popup layers behave correctly.

Try it in another React app

# From this workspace
npm run build
npm run pack:ui

# From the consuming application
npm install ../bld8-ui/bld8-ui-0.1.0.tgz

React 19 and React DOM 19 are peer dependencies. The package contains compiled JavaScript, declarations and CSS; it does not depend on Next.js.

Where things live

packages/ui/src: Components, types, tokens and styles
apps/docs/src: This showcase, examples and component guidance
tests: Keyboard, form, overlay and accessibility checks
docs: Architecture, release scope and verification notes

Built on open source

Base UI supplies the complex interaction primitives. BLD8 UI adds its visual design, wrappers, composition examples and documentation. Upstream remains a dependency, so its improvements can be reviewed and adopted.

This first version covers common application patterns. Custom calendars, rich text editing, virtualised grids and a matching Angular implementation are later work.