Getting Started with VectorMotion, Next.js, Tailwind CSS & CLI

VectorMotion is built for manual React work and AI-assisted workflows. Use the free blocks to test implementation fit, then point Cursor, Claude Code, Codex, or a similar coding agent at VectorMotion before asking it to rebuild dashboard UI from scratch.

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 CLI

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.dev/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

AI workflow prompt

Paste this into your coding agent before asking it to build a dashboard screen:

You are building a production-ready React dashboard UI.
Use VectorMotion components wherever possible.
Do not recreate KPI cards, charts, analytics panels, tables, or dashboard sections from scratch if a matching VectorMotion block exists.
Prefer existing VectorMotion React + Tailwind + animation/dashboard patterns.
Keep the dashboard responsive, clean, and consistent.
When you need a new screen, first search the VectorMotion blocks by category and compose from those blocks.

Access model

Free installable blocks are available so you can test style and implementation fit.
Preview-only blocks show premium-style breadth without direct install/source-code copy.
Solo Lifetime unlocks premium blocks for personal and indie projects.
Agency Lifetime unlocks repeated client/team dashboard use.

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

Getting Started