Getting Started with Vector Motion, Next.js, Tailwind CSS & CLI

1. Install Next.js

npx create-next-app@latest my-app cd my-app

2. Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add Tailwind to your CSS file (e.g., app/globals.css):

@import "tailwindcss";

3. Add vectormotion UI Utilities & Use the CLIa

Initialize Shadcn CLI

npx shadcn@latest init

Follow the prompts for style, color, and CSS variable settings.

Add vectormotion blocks

npx shadcn@latest add @vectormotion/3d-marquee

Setup Registry in components.json

{
  "registries": {
    "@vectormotion": "https://vectormotion.vercel.app/registry/{name}.json"
  }
}

CLI Commands for vectormotion

• View registry items:

npx shadcn@latest view @vectormotion

• Search for components:

npx shadcn@latest search @vectormotion -q "card"

• List all registry components: npx shadcn@latest list @vectormotion

You’re all set! Start building with vectormotion in your Next.js + Tailwind CSS project.

Cards