Installation

Syncblocks components are distributed via the shadcn registry. Each component is added to your project as editable source code — no package to maintain.

Prerequisites

React 18 or 19
Tailwind CSS v4
shadcn/ui initialised on the Base UI component library (see below)
TypeScript (recommended)

Quick start

Initialise shadcn/ui on Base UI

Syncblocks is built on the Base UI flavour of shadcn/ui — the base-nova preset. Pass --base base so the CLI writes that configuration:

pnpm dlx shadcn@latest init --base base

Your components.json should end up with:

components.json

{
  "style": "base-nova"
}

This is not a cosmetic preference. On the Radix flavour ("style" of new-york or default) the primitives expose a different API — asChild instead of render, string-only Select values — and most Syncblocks components will fail to compile. If you are adding Syncblocks to an existing project, check "style" in components.json before you install.

Register the `@syncblocks` namespace

Syncblocks is a private registry, so the CLI needs both its URL and an access token. Add the namespace to your components.json:

components.json

{
  "registries": {
    "@syncblocks": {
      "url": "https://registry.websiteprojectupdates.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${SYNCBLOCKS_REGISTRY_TOKEN}"
      }
    }
  }
}

Then put the token your team gave you in .env.local — never commit it:

.env.local

SYNCBLOCKS_REGISTRY_TOKEN=your_token_here

components.json is committed; .env.local is not. The ${...} syntax is expanded by the CLI at install time, so the literal token never lands in git.

Add the component you need

pnpm dlx shadcn@latest add @syncblocks/workspace

The CLI automatically installs peer dependencies and resolves registry dependencies — workspace will pull in workspace-tabs automatically.

Manual installation

Each component page has a Manual tab in the installation section with the full source and dependency list.

Introduction Bulk Toolbar