Framework setup

Choose your setup

Install commands work from any React app that can use Tailwind CSS and shadcn. The important part is the components.json file: its aliases decide where block and UI files are written.

• Starting a new appCreate the React app first, initialize shadcn, then install a CoBlick block.
• Installing in an existing appReview your current aliases and theme variables before installing.
• Working in a monorepoRun the command in the app workspace that owns components.json.

Next.js

Use either the App Router or Pages Router. Initialize shadcn in the Next.js app, then run the command from the block page.

• Import a page-sized block from the route that should display it.
• Keep data loading and protected actions on the server.
• Add "use client" only where browser state or events require it.
• Configure external image hosts or replace demo images with local assets.

Vite and React Router

Initialize shadcn with the Vite setup, confirm the @ alias points to src, and import your main stylesheet once in the application entry.

Page-sized blocks become route elements. Replace Next.js-specific links or images only when a block actually uses them.

Other React frameworks

Use the same install command when your framework supports React, Tailwind CSS, and path aliases. Adapt these framework-specific parts after installation:

• RoutingReplace framework-specific links, navigation, and route parameters.
• ImagesUse the image component and allowed remote hosts required by your framework.
• Server workMove data loading, sessions, and mutations into the server pattern used by your app.
• Environment valuesFollow the framework's rules for values that may reach browser code.

Check the compatibility page before using an older React or Tailwind setup.