Video tutorial

What you need

VS Code and Node.js 20.9 or newer. Check your version by typing node -v in the VS Code terminal (View, then Terminal). Free components need no account.

Every command from the video

Copy them from here instead of pausing the video. Run them in order, inside the folder where you keep your projects.

1. Create the project, then open the my-app folder in VS Code (File, then Open Folder):
   npmpnpmyarnbun

   npx create-next-app@latest my-app --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --yes
   cd my-app

2. Set up shadcn/ui. It adds components.json and src/lib/utils.ts:
   npmpnpmyarnbun

   npx shadcn@latest init -d

3. Connect Nexus UI. Type it as shown, including {name}:
   npmpnpmyarnbun

   npx shadcn@latest registry add "@nexus-labs=https://www.nexus-ui.com/api/registry/{name}"

4. Add a component. The video uses the free Glow Button; every component page shows its own command:
   npmpnpmyarnbun

   npx shadcn@latest add @nexus-labs/glow-button

5. Use it in src/app/page.tsx, then start the app and open http://localhost:3000:

   import { GlowButton } from "@/components/glow-button";
   
   export default function Page() {
     return (
       <main className="flex min-h-screen items-center justify-center">
         <GlowButton href="#">Get started</GlowButton>
       </main>
     );
   }

   npmpnpmyarnbun

   npm run dev

Copying by hand instead

Skip steps 3 and 4. Install the packages the component lists, then open its page, press Show the source files and create each file at the path shown under Save as. For the Glow Button:

npm install framer-motion

Pro components

Make an API key on the API key page (you need a Pro plan). Put it in a file called .env.local in your project:

NEXUS_API_KEY=nxs_your_key_here

Then replace the registries entry in components.json with this one, and add Pro components the same way as free ones:

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

npx shadcn@latest add @nexus-labs/particle-reveal

The Quick start explains each step in more detail and lists what to do if a command fails.

Blocks, icons, sounds, videos and templates

The commands from the second half of the video. Each one starts from a project set up in steps 1 to 4.

Blocks install like components:

npx shadcn@latest add @nexus-labs/pricing-section

Icons are one file each. Make the folder, download the icon, and install Framer Motion if you have not yet (see Icons):

mkdir -p src/components/icons
curl -s https://www.nexus-ui.com/api/icons/bell -o src/components/icons/bell.tsx
npm i framer-motion

Sounds are made in the browser. One command adds the free library, then call playSound("pop") from a click (see Sounds):

npx shadcn@latest add @nexus-labs/ui-sounds

Videos render to MP4 on your machine with Playwright and ffmpeg. Put the files together as the Videos guide shows, start the app, then:

npm i -D playwright
npx playwright install chromium
node render.mjs --url http://localhost:3000/video-frame --duration 12 --audio launch-reel.mp3 --out launch-reel.mp4

Templates come as a zip of a whole Next.js project. Sign in (a free account works for the free templates), press Download source (.zip) on the template page, unzip it, then:

cd launchfolio-portfolio
npm install
npm run dev