Get started with Codervent UI Blocks

Purchase Codervent UI Blocks to get access.

Sign in to your Codervent account and generate your Registry Token from the Dashboard.

Configure Codervent UI Blocks in components.json:

{
  "registries": {
    "@codervent": {
      "url": "https://codervent.com/api/registry/{name}",
      "headers": {
        "Authorization": "Bearer ${CODERVENT_REGISTRY_TOKEN}"
      }
    }
  }
}

Create .env.local in your project root and add your token:

CODERVENT_REGISTRY_TOKEN=cv_f2c9c91ca1771xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Replace your project's default globals.csswith the Codervent version. It sets up all the fonts, colors, and background tokens the blocks are built against — without it, blocks won't match the intended design.

Replace app/globals.css with this file.

Start adding blocks. Example:

npx shadcn@latest add @codervent/basic-login

Run this command in your terminal. It installs all required sidebar files.

npx shadcn@latest add @codervent/sidebar-01

Download layout.tsx and replace your default /app/layout.tsx. If you want it for a specific section only, use a route group instead, e.g. /app/(auth)/layout.tsx.

Download the theme provider and place it in your project root.

Download the hooks, extract the ZIP, and put the resulting /hooks folder in your project root.