Prerequisites

You'll need an existing Next.js project with a package manager installed (npm, yarn, pnpm, or bun).

Initialize Sync UI

npx @abhivarde/syncui@latest init

This creates a components.json config and installs the base dependencies.

Wrap your app in ThemeProvider

App Router needs a client boundary at the provider level.

Using Pages Router instead? See Manual Setup.

Any Sync UI component used inside the App Router also needs "use client" at the top.

Add your first component

npx @abhivarde/syncui@latest add hero

Add a specific variant with name/variant, for example hero/left. Dependencies install automatically, pass --skip-install to skip.

Start development

npm run dev

Open http://localhost:3000 in your browser.

You're all set

→ Check out Components, copy paste ready UI elements

→ Explore Blocks, pre-built page sections

→ Customize freely, all code is yours to modify