Skip to main content
This guide will help you set up Sync UI in a Next.js project. Sync UI works seamlessly with both the App Router and Pages Router.

​
Create a New Project

Create a new Next.js application using create-next-app: 
npx create-next-app@latest my-app
During setup, you’ll be asked several questions. Here are the recommended settings: 
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Sync UI works with all configurations. Choose what fits your project best.

​
Navigate to Your Project

Move into your newly created project directory: 
cd my-app

​
Install Dependencies

Add the required packages for Sync UI: 
npm install @mui/material @emotion/react @emotion/styled motion react-icons

​
What’s Installed

PackagePurpose
@mui/materialCore Material UI components
@emotion/reactCSS-in-JS styling engine (required by MUI)
@emotion/styledStyled components API (required by MUI)
motionAnimation library (motion/react)
react-iconsIcon library with thousands of icons

​
Start Development

Launch your development server: 
npm run dev
Open http://localhost:3000 in your browser to see your app running.

​
Using Components

Now you can start using Sync UI components. Here’s a quick example:
1

Create a Component File

Create a new file, e.g., components/AnimatedButton.jsx
2

Copy Component Code

Browse the component library and copy the code for any component
3

Import and Use

Import your component in any page or component:
import AnimatedButton from '@/components/AnimatedButton';

export default function Home() {
  return (
    <main>
      <AnimatedButton />
    </main>
  );
}

​
Example Component

Here’s a complete example of a Sync UI button in Next.js:
app/components/NeubrutalismButton.jsx
import { Button, useTheme } from "@mui/material";
import { motion } from "motion/react";

const MotionButton = motion.create(Button);

const NeubrutalismButton = () => {
  const theme = useTheme();

  return (
    <MotionButton
      variant="contained"
      sx={{
        backgroundColor: theme.palette.mode === "dark" ? "#000000" : "#FFFFFF",
        color: "text.primary",
        border: "1px solid",
        borderColor: "divider",
        boxShadow: "4px 4px 0 currentColor",
        borderRadius: 0,
        transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
        "&:hover": {
          borderColor: "divider",
          boxShadow: "2px 2px 0 currentColor",
          backgroundColor: theme.palette.mode === "dark" ? "#000000" : "#FFFFFF",
        },
      }}
    >
      Neubrutalism
    </MotionButton>
  );
};

export default NeubrutalismButton;
Use the 'use client' directive at the top of files that use Motion animations if you’re using the App Router.

​
App Router Considerations

If you’re using Next.js App Router, components with animations need the 'use client' directive:
app/components/AnimatedButton.jsx
'use client';

import { Button } from "@mui/material";
import { motion } from "motion/react";

const MotionButton = motion.create(Button);

export default function AnimatedButton() {
  return (
    <MotionButton whileHover={{ scale: 1.05 }}>
      Click Me
    </MotionButton>
  );
}

​
You’re All Set!

You can now start building with Sync UI:

Components

Copy-paste ready UI elements with animations

Blocks

Pre-built page sections for landing pages

Templates

Professional templates to launch faster

Story

Learn about the journey behind Sync UI

​
Next Steps

Simply copy any component code from our library and paste it into your project. No additional setup needed!
All Sync UI components are framework-agnostic and work seamlessly with Next.js, whether you’re using App Router or Pages Router.

Build docs developers (and LLMs) love

Get started for freeTalk to us