What CoBlick installs

Before you install

Open the block page and preview it at desktop, tablet, and mobile widths. Switch between light and dark themes. Try the form fields, buttons, menus, and other controls. Then read the implementation guide below the preview.

• Free block

  Copy the install command from the block page. Free blocks do not require a CoBlick account or token.

• Pro block

  Add a CoBlick project token to the app once, then copy the Pro install command from the block page.

What the install command changes

shadcn uses components.json to determine where the block and its supporting files belong. Depending on the block, it may add React files, shared UI components, npm packages, styles, CSS variables, and environment-variable placeholders.

1. Loads installation details

   shadcn reads the files, packages, styles, and other changes included with the block.

2. Checks existing files

   shadcn resolves the aliases in components.json and reports conflicts with files already in your project. Existing files are not overwritten unless you approve it.

3. Installs files and packages

   shadcn writes the approved files and updates the packages required by the block.

Use --dry-run to list the planned changes without writing files. Use view to inspect the block source. If an existing file conflicts, use --diff to compare the versions before continuing.

What you connect

The block gives you the React interface. You connect its real data, actions, routes, permissions, validation, and backend behavior.

• Run git status --short to find every new or changed file, then review the changes with git diff.
• Use the block's implementation guide to connect its data, actions, validation, and required states.
• Render the block in your app, then run the project's existing typecheck, lint, and tests.
• Test the block at mobile and desktop widths, with the keyboard, and in every theme your app supports.
• After the checks pass, commit the installed files so future changes are easy to review.