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

Make sure your project has Radix UI installed. Codervent UI Blocks are built with shadcn/ui and Radix UI primitives, so the required Radix UI dependencies must be available in your project for the blocks to work correctly.

Then replace your project's default globals.css with the Codervent version. It sets up the fonts, colors, and background tokens the blocks are built against. Without it, the blocks may not 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.