Docs
Nexus-UI ships hand-written React and Tailwind you copy from each component page. For primitives (button, dialog, tabs), the shadcn/ui CLI remains the fastest way to align with the same stack this project uses.
From your Next.js app root, run the initializer. It writes components.json, wires CSS variables, and installs shared UI dependencies.
npx shadcn@latest initChoose a style and base color that match your brand; you can always tune tokens later in globals.css.
npx shadcn@latest add button
npx shadcn@latest add dialog tabsAdd only what you need. Nexus-UI marketing and library views compose many primitives from this baseline.
Target a workspace package with the working directory flag:
npx shadcn@latest init -c ./apps/web
npx shadcn@latest add card -c ./apps/webAdd the Nexus UI hosted registry to your project's components.json:
{
"$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": "https://www.nexus-ui.com/api/registry/{name}"
}
}Then pull any free component or block by its install name:
npx shadcn@latest add @nexus-labs/wheel-selector
npx shadcn@latest add @nexus-labs/pricing-sectionThe CLI installs declared dependencies (e.g. framer-motion), pulls the utils helper if missing, and writes files under your components alias.
Premium components and blocks use the same registry endpoint with the API 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"
}
}
}
}npx shadcn@latest add @nexus-labs/text-animationsEvery component in the catalog has a matching registry entry. You can also open the Code tab on any component page to copy React source directly. Keep motion boundaries in "use client" modules when you use Framer Motion.