START HERE

Make it
part of your work.

React components, working blocks and runnable interface starters. Compiled CSS, typed props and Base UI underneath.

Everything is free

Free and Premium are both available under MIT. No account, payment or licence key. The BLD8 packages are not published to npm; downloads include them locally.

Install into your application

The shadcn registry installs editable components, dependencies and styles. Use React 19 and initialise shadcn first.

npx shadcn@latest add https://ui.bld8.dev/r/button.json

Explore configurations in the component playground.

Start with a block or template

Choose a block or template, try its preview and select Download starter. Unzip it into a new folder, use Node 22 and run:

npm install
npm run dev

Open http://localhost:3000. The starter includes a Next.js app, the compiled UI and blocks packages, editable source and licence notices. Add your own authentication, APIs and persistence.

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.

Free contains the core controls and focused blocks. Premium contains fuller compositions and templates. Both have the same access and licence.

Use a block in your application

import "@bld8/ui/styles.css";
import "@bld8/blocks/styles.css";
import { UIProvider } from "@bld8/ui";
import { AccountSettings } from "@bld8/blocks";

export default function App() {
  return (
    <UIProvider>
      <div className="bblocks-root" style={{ isolation: "isolate" }}>
        <AccountSettings />
      </div>
    </UIProvider>
  );
}

The download uses local workspaces for both packages. In Next.js, import the global styles in the root layout and place event handlers in a Client Component. Give the body position: relative so popup layers behave correctly.

Use the source view to copy a component, or the source manifest to inspect all composition files. Source manifests expose the composition files. The separate /r registry supports actual shadcn CLI installation.

Run the full library

git clone https://github.com/jaskevs/bld8-ui.git
cd bld8-ui
npm ci
npm run dev

The library showcase opens at http://127.0.0.1:3120. Saving package code, CSS or documentation refreshes the local showcase. The GitHub version reflects the latest published commit.

Style it your way

The package ships ready-built CSS. Change the --bui-* tokens for colours, corners and motion. New component source uses Tailwind utilities with the bui: prefix, alongside the existing CSS. There is no global Tailwind reset.

In a downloaded starter, npm run build rebuilds both packages and the app. The full library’s npm run dev also watches utility changes. Adding classes to your own app requires your own Tailwind setup or ordinary CSS; the included stylesheet only contains classes used by the library.

Selected compositions adapt shadcn/ui’s Base UI source. The full MIT notice is included in SHADCN_LICENSE.

Where things live

packages/ui/src: Core components, types, tokens and styles
packages/blocks/src: Reusable blocks and template compositions
apps/docs/src: Catalogue, live previews and guidance
scripts/library-catalog.mjs: Names, categories and collections; edit here to add entries
scripts/prepare-library.mjs: Generates source manifests and allowlisted ZIP starters

MIT, with the source included

Use and adapt the original BLD8 code in personal or commercial projects. Keep the copyright and licence notice when sharing it. Base UI remains a dependency with its own MIT notice.

The demos label sample data and local behaviour. Test your own content, keyboard flows and service connections before release.