This guide will help you manually add Sync UI to any existing React project, regardless of your build tool or framework.
Prerequisites
Before you begin, make sure you have:
Existing React Project
A working React project (React 18.0 or later recommended)
Package Manager
npm, yarn, pnpm, or bun installed on your machine
Node.js
Node.js 18.17 or later installed
Sync UI works with any React setup including custom webpack configs, Parcel, Snowpack, or other build tools.
Install Dependencies
Add the required packages for Sync UI to your project:
npm install @mui/material @emotion/react @emotion/styled motion react-icons
Package Details
| Package | Version | Purpose |
|---|
@mui/material | ^7.3.6 | Core Material UI components |
@emotion/react | ^11.14.0 | CSS-in-JS styling engine (required by MUI) |
@emotion/styled | ^11.14.1 | Styled components API (required by MUI) |
motion | ^12.23.25 | Animation library (motion/react) |
react-icons | ^5.2.1 | Icon library with thousands of icons |
Both @emotion/react and @emotion/styled are required for Material UI to work properly. Don’t skip either one!
Verify Installation
After installation, verify that all packages are in your package.json:
{
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@mui/material": "^7.3.6",
"motion": "^12.23.25",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-icons": "^5.2.1"
}
}
Start Development
Run your development server. The command depends on your project setup:
Using Components
Now you can start using Sync UI components in your project:
Create a Component
Create a new component file in your project, for example:src/components/MyButton.jsx
import { Button, useTheme } from "@mui/material";
import { motion } from "motion/react";
const MotionButton = motion.create(Button);
const MyButton = () => {
const theme = useTheme();
return (
<MotionButton
variant="outlined"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
sx={{
borderColor: "divider",
color: "text.primary",
}}
>
Click Me
</MotionButton>
);
};
export default MyButton;
Import the Component
Import and use your component anywhere in your app:import MyButton from './components/MyButton';
function App() {
return (
<div className="App">
<h1>My App with Sync UI</h1>
<MyButton />
</div>
);
}
export default App;
Example: Complete Button Component
Here’s a complete example using one of Sync UI’s popular button styles:
src/components/OutlineFillButton.jsx
import { Button } from "@mui/material";
import { motion } from "motion/react";
const MotionButton = motion.create(Button);
const OutlineFillButton = () => {
return (
<MotionButton
variant="outlined"
sx={{
color: "text.primary",
borderColor: "divider",
position: "relative",
overflow: "hidden",
zIndex: 1,
"&::before": {
content: '""',
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundColor: "text.primary",
transform: "scaleX(0)",
transformOrigin: "right",
transition: "transform 0.25s ease",
zIndex: -1,
},
"&:hover": {
color: "background.paper",
"&::before": {
transform: "scaleX(1)",
transformOrigin: "left",
},
},
}}
>
Fill
</MotionButton>
);
};
export default OutlineFillButton;
TypeScript Support (Optional)
If you’re using TypeScript, you may want to install type definitions:
npm install --save-dev @types/react @types/react-dom
Build Configuration
Sync UI components should work with your existing build configuration. However, if you encounter issues:
Make sure your webpack config handles JSX and CSS-in-JS:module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
};
Ensure your .babelrc includes React preset:{
"presets": ["@babel/preset-react"]
}
If using ESLint, make sure it’s configured for React:{
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
}
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!
Sync UI components are framework-agnostic and work with any React setup. If you encounter any issues, check our troubleshooting guide.