Skip to main content
Get started with Sync UI by choosing your preferred React framework below. All our components work seamlessly across different React environments.

​
Pick Your Framework

Select your framework to see the specific setup instructions:

Next.js

Set up Sync UI in your Next.js project with App Router or Pages Router

Vite

Set up Sync UI with Vite for fast development and optimized builds

React Router

Set up Sync UI with Create React App and React Router

Manual Setup

Add Sync UI to any existing React project manually

​
What You’ll Need

Before installing Sync UI, make sure you have:
1

Node.js

Node.js 18.17 or later installed on your machine
2

Package Manager

npm, yarn, pnpm, or bun for managing dependencies
3

React Project

An existing React project or create a new one using the framework-specific guides

​
Core Dependencies

Sync UI requires the following packages: 
@mui/material         # Material UI components
@emotion/react        # CSS-in-JS styling (required by MUI)
@emotion/styled       # Styled components API (required by MUI)
motion                # Animation library (motion/react)
react-icons           # Icon library
These dependencies are installed automatically when you follow the framework-specific installation guides.

​
Installation Overview

Regardless of your framework, the installation process follows these steps:
1

Create or Open Project

Either create a new React project or open your existing one
2

Install Dependencies

Add the required Sync UI dependencies using your package manager
3

Start Development

Launch your development server and start building
4

Copy Components

Browse the component library and copy-paste components into your project

​
Quick Start

If you want to try Sync UI immediately, here’s the fastest way: 
npx create-next-app@latest my-app
cd my-app
npm install @mui/material @emotion/react @emotion/styled motion react-icons
npm run dev

​
Framework-Specific Guides

For detailed, framework-specific installation instructions, choose your framework:

​
Next.js

Perfect for server-side rendering, static site generation, and production apps. View Next.js Setup Guide →

​
Vite

Ideal for fast development with hot module replacement and optimized builds. View Vite Setup Guide →

​
React Router

Great for client-side routing in Create React App projects. View React Router Setup Guide →

​
Manual Setup

Add Sync UI to any existing React project with manual installation. View Manual Setup Guide →

​
After Installation

Once you’ve installed Sync UI, you can:

Browse Components

Explore 125+ animated components ready to copy and paste

Explore Blocks

Check out pre-built UI sections for landing pages

View Templates

See premium templates to launch your project faster

Read the Story

Learn about the journey behind Sync UI

​
Troubleshooting

Make sure all dependencies are installed:
npm install @mui/material @emotion/react @emotion/styled motion react-icons
If using TypeScript, you may also need to install type definitions.
Ensure you have both @emotion/react and @emotion/styled installed - MUI requires both packages.
Verify that you’re importing from motion/react (not framer-motion):
import { motion } from "motion/react";
Make sure react-icons is installed and you’re importing icons correctly:
import { IoSend } from "react-icons/io5";
import { RxArrowRight } from "react-icons/rx";
Need help? Join our community on GitHub Discussions or reach out on Twitter.

​
Next Steps

Ready to start building? Check out these resources:

Build docs developers (and LLMs) love

Get started for freeTalk to us