Install CoBlick blocks

Before you start

CoBlick blocks install through shadcn. Your app needs React, Tailwind CSS, and a components.json file with working aliases.

1. 1
   Open the app workspace

   Use the workspace that contains the app's package.json.

2. 2
   Commit or stash before initialization

   Protect your current work so shadcn changes are easy to review or undo.

3. 3
   Initialize shadcn if needed

   Run npx shadcn@latest init, then review the prompts and resulting Git changes.

Using a monorepo? Run the command in the app workspace where the block will be used. Do not use the project root unless the app is configured there.

Free blocks

Open the block page and copy its exact shadcn command. Free block install links do not need a CoBlick account, project, or token.

To inspect the file plan first, add --dry-run. To compare with files already in the project, add --diff.

Configure Pro access

Configure Pro access once for each app. After that, every Pro block page gives you a short namespaced command.

1. 1
   Create a project token

   Open shadcn setup, choose the project, and copy the token when it appears. The complete value is shown once.

2. 2
   Add CoBlick to components.json

   Merge this configuration into the existing registries object in components.json.

{
  "registries": {
    "@coblick-ui": {
      "url": "https://coblick.com/r/{name}",
      "headers": {
        "Authorization": "Bearer ${COBLICK_UI_TOKEN}"
      }
    }
  }
}

3. 3
   Store the token in an ignored environment file

   Add it to an ignored environment file loaded by your terminal. Do not commit the complete value.

4. 4
   Preview, then install

   Copy the exact name from the Pro block page. Run the dry run first, then install the block.

Check the result

1. 1
   Read the install summary

   Confirm the block file, supporting UI files, and packages match the block page.

2. 2
   Review the changes

   Run git status --short to find every changed file, then use git diff before committing.

3. 3
   Add to a route

   Import the installed component into a route or page and connect its content, data, and interactions.

4. 4
   Run the existing project checks

   At minimum, run its typecheck and open the page at mobile and desktop widths.

Common problems

More codes are listed in the error reference.