Skip to main content
This guide will help you set up Sync UI in a Vite project. Vite provides lightning-fast development with hot module replacement (HMR) and optimized production builds.

​
Create a New Project

Create a new Vite application with React: 
npm create vite@latest my-app -- --template react
Use --template react-ts instead of --template react if you want to use TypeScript.

​
Navigate to Your Project

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

​
Install Dependencies

First, install the base dependencies that come with your Vite project: 
npm install
Then 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:5173 in your browser to see your app running.
Vite uses port 5173 by default, unlike Next.js which uses port 3000.

​
Using Components

Now you can start using Sync UI components in your Vite project:
1

Create a Component File

Create a new file in your src directory, e.g., src/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 App.jsx or any other component:
import AnimatedButton from './components/AnimatedButton';

function App() {
  return (
    <div className="App">
      <AnimatedButton />
    </div>
  );
}

export default App;

​
Example Component

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

const MotionButton = motion.create(Button);

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

  return (
    <MotionButton
      variant="contained"
      sx={{
        background:
          theme.palette.mode === "light"
            ? "linear-gradient(110deg, #fff 45%, #e4e4e7 55%, #fff)"
            : "linear-gradient(110deg, #000 45%, #333 55%, #000)",
        backgroundSize: "200% 100%",
        animation: "shine 2s linear infinite",
        color: "text.primary",
        border: "1px solid",
        borderColor: "divider",
        "&:hover": {
          borderColor: "divider",
        },
        "@keyframes shine": {
          "0%": { backgroundPosition: "200% 0" },
          "100%": { backgroundPosition: "-200% 0" },
        },
      }}
    >
      Gradient Shine
    </MotionButton>
  );
};

export default GradientShineButton;
Then use it in your App.jsx:
src/App.jsx
import GradientShineButton from './components/GradientShineButton';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>Sync UI with Vite</h1>
      <GradientShineButton />
    </div>
  );
}

export default App;

​
Vite Configuration (Optional)

Your vite.config.js should work out of the box, but here’s a basic configuration for reference:
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})
Vite’s fast HMR makes iterating on Sync UI components incredibly smooth. Changes appear instantly in your browser!

​
You’re All Set!

You can now start building with Sync UI in Vite:

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 work seamlessly with Vite’s fast refresh and hot module replacement.

Build docs developers (and LLMs) love

Get started for freeTalk to us