Comparison — UI Block

Use a Next.js project with Tailwind CSS and the @/ alias. In its root folder, run this once. It creates components.json and the cn() helper:

npx shadcn@latest init -d

Starting from nothing? The Quick Start covers it.

This is a Pro block, so the CLI has to send your API key. Do this once per project.

1. Create a key at nexus-ui.com/dashboard/api-key. It starts with nxs_ and is shown only once.
2. Create a file named .env.local in the project root, next to package.json, with your key:
   .env.local

   NEXUS_API_KEY=nxs_your_key_here

3. Add this entry to components.json, inside the outermost braces. Leave {name} and ${NEXUS_API_KEY} as written, the CLI fills them in:
   components.json

   "registries": {
     "@nexus-labs": {
       "url": "https://www.nexus-ui.com/api/registry/{name}",
       "headers": {
         "Authorization": "Bearer ${NEXUS_API_KEY}"
       }
     }
   }

Run this from your project root. It adds every section shown on this page.

npx shadcn@latest add @nexus-labs/comparison-blocks

The package writes these source files:

Open the Code tab on the section you want, copy its usage snippet and paste it into a page such as src/app/page.tsx:

import YourBlock from "@/components/...";

export default function Page() {
  return (
    <main>
      <YourBlock />
    </main>
  );
}

Each section's Code tab shows its exact import path.