Install the complete Navigation family with its 1 variant. The registry command adds the source files, required utility imports, and npm packages used by this block.
- 1
Prepare a shadcn project
Use a Next.js project with Tailwind CSS and the @/ alias. If shadcn is not configured yet, run:
npx shadcn@latest init
- 2
Connect the registry with your API key
Replace your components.json with this, or add the registries key to your existing one. Replace YOUR_NEXUS_API_KEY with the key from your Nexus UI dashboard.
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"css": "src/app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"registries": {
"@nexus-labs": {
"url": "https://www.nexus-ui.com/api/registry/{name}",
"headers": {
"Authorization": "Bearer YOUR_NEXUS_API_KEY"
}
}
}
} - 3
Install the full block family
Run this command from your project root. It installs every variant shown on this page.
npx shadcn@latest add @nexus-labs/navigation-blocks
- 4
Files added to your project
The component package installs these block source files:
- 5
Copy the example into your page
Switch to the Codetab on the variant you want. On the left you'll see a ready-to-use snippet — copy it and paste it into app/page.tsx:
// app/page.tsx
import YourBlock from "@/components/...";
export default function Page() {
return (
<main>
<YourBlock />
</main>
);
}The exact import path is shown in the Code tab sidebar for each variant.
