SOURCE / YOUR PROJECT

Install. Then make it yours.

Use the shadcn CLI to add editable BLD8 components and complete compositions to an existing React application.

One component, with its dependencies.

Use React 19 and initialise shadcn in your Next.js or Vite application first. The CLI uses your components.json aliases.

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

import { Button } from "@/components/ui/bld8/button";

<Button variant="accent">Save changes</Button>

Files live in the bld8/ subdirectory of your configured UI directory. Shared modules are installed once. The styles and required npm dependencies are included; existing shadcn components keep their own names.

Source you can edit

Both collections are free under MIT. Keep the included licence notices. Installing source does not publish or require an @bld8/ui npm package.

A whole workflow.

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

'use client';
import { OperationsTemplate } from "@/components/ui/bld8/blocks/operations-template";
import { UIProvider } from "@/components/ui/bld8/overlays";

export default function Workspace() {
  return <UIProvider><main className="bblocks-root">
    <OperationsTemplate />
  </main></UIProvider>;
}

Set body { position: relative; } in your global CSS for overlay backdrops. Outline saves projects, preferences and resource metadata in this browser. Its typed repository interface is the place to connect an HTTP API; authentication and file hosting are not included.

Use a namespace.

Add this entry to your existing components.json registries object, then install by name:

{
  "registries": {
    "@bld8": "https://ui.bld8.dev/r/{name}.json"
  }
}

npx shadcn@latest add @bld8/button @bld8/form @bld8/outline

The registry index follows the shadcn schema and exposes every item and its dependency graph.

Choose a starting point.

Form workflowformSidebarsidebarDrawerdrawerContext menucontext-menuMulti-selectmulti-selectCommand palettecommandCalendarcalendarDate pickerdate-pickerDate range pickerdate-rangeFile uploadfile-uploadTable workflowsadvanced-tableIconiconInput groupinput-groupButtonbuttonIcon buttonicon-buttonInput & fieldinputTextareatextareaCheckboxcheckboxSwitchswitchRadio groupradioSelectselectComboboxcomboboxSlidersliderTabstabsAccordionaccordionBreadcrumbbreadcrumbPaginationpaginationDialogdialogSheetsheetPopoverpopoverTooltiptooltipDropdown menudropdownToasttoastAlertalertBadgebadgeProgressprogressSpinner & skeletonloadingEmpty stateemptyAvataravatarCard & separatorcardData tabletableProject plannerproject-plannerResource libraryresourcesSign-in formsign-inAccount settingsaccount-settingsMetrics overviewmetricsWorkspace overviewworkspaceTeam directoryteamProject boardproject-boardOutline workspaceoutlineStudio workspacestudioGather landing pagelaunch

Notes to self

Review an item before replacing local customisations. The CLI asks before overwriting existing source; use version control and review the diff. Compiled BLD8 CSS covers shipped utilities and uses prefixed classes without a reset. Edit the supplied CSS or add your own Tailwind build when introducing new utility classes.

Prefer a blank project? Download a runnable starter. To explore props first, open the playground.