Components, blocks, and charts built with MUI and Motion. Copy the code, install with a CLI, or connect via MCP and agent skills. Works with Next.js, Vite, Astro, TanStack Start, and React Router.
Website · Docs · Components · Blocks · Charts · Templates · Showcase · npm
Sync UI installs into any of these React setups:
| Framework | Guide |
|---|---|
| Next.js | Install guide |
| Vite | Install guide |
| Astro | Install guide |
| TanStack Start | Install guide |
| React Router | Install guide |
| Manual | Install guide |
Same CLI, same components, same output pattern, no matter which framework you pick.
Add any component, block, or chart directly into your project:
npx @abhivarde/syncui@latest add name/variantUse name/variant to target exactly what you need, for example accordion/brutalist, hero/centered, or line/dashed.
Let your AI agent add components, blocks, and charts directly, no commands needed:
{
"mcpServers": {
"syncui": {
"command": "npx",
"args": ["-y", "@abhivarde/syncui-mcp"]
}
}
}Add to your MCP client config (Claude Code, Cursor, Windsurf, Codex, OpenCode).
Components, blocks, and charts are served from a hosted registry. Fetch any entry directly:
https://ui.abhivarde.in/r/index.json
https://ui.abhivarde.in/r/{name}.json
This is what the CLI and MCP use under the hood. New entries go live the moment the site deploys, no package update needed.
Use Sync UI inside Cursor, Claude Code, Copilot, Windsurf, and more:
npx skills add AbhiVarde/syncuiYour AI coding tool will know every component, variant, and animation pattern without you explaining anything.
| Count | Includes |
|---|---|
| 125+ Components | Buttons, Cards, Tables, Forms, Date Pickers, Loaders, Avatars, Accordions, Carousels, Dialogs, Docks, Tabs, and more |
| 13+ Blocks | Hero, CTA, Pricing, and Stats sections for landing pages |
| 12 Chart Variants | Bar, Donut, Heatmap, Line, Progress, and Stat, two variants each, animated and MUI styled |
| 3 Templates | Startup ($29), SaaS ($29), Portfolio ($29), Bundle, all three for $79 |
| Agent Skill | Full component and block reference for Cursor, Claude Code, Copilot, Windsurf |
| Category | Technology |
|---|---|
| Built with | React, Next.js |
| Styling | Material UI (MUI) |
| Animation | Motion (motion/react) |
| Analytics | Umami |
| Deploy | Vercel, Docker |
This is the stack the Sync UI website itself runs on. See Framework Support above for what you can install Sync UI into.
git clone https://github.com/AbhiVarde/syncui
cd syncui
npm install
npm run devDocker
docker build -t syncui .
docker run -p 3000:3000 syncuiOpen http://localhost:3000.
Contributions are welcome.
- Fork the repository
- Create a feature branch (
git checkout -b feature/your-feature) - Commit your changes (
git commit -m 'feat: add your feature') - Push to the branch (
git push origin feature/your-feature) - Open a Pull Request
Follow the existing code style, test across screen sizes, and ensure accessibility standards are met. Read the full Contributing Guide.
If Sync UI is useful to you, consider supporting the project.
Buy Me a Coffee · Sponsor on GitHub
Sponsor tiers: $5/month for README recognition, $19/month for README and portfolio recognition, $49/month for README, portfolio, and promotion on Sync UI.
MIT. See LICENSE for details.
Built and maintained by Abhi Varde.