Components, blocks, and charts built with MUI and Motion. Copy the code, install with a CLI, or connect via MCP and agent skills. Built for React, ready for your coding agent.

Website · Docs · Components · Blocks · Charts · Templates · Showcase · npm

Add any component, block, or chart directly into your project:

npx @abhivarde/syncui@latest add name/variant

Use 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/syncui

Your AI coding tool will know every component, variant, and animation pattern without you explaining anything.

How the CLI, MCP server, Agent Skill, and hosted registry fit together:

flowchart TD
  Dev[Developer or AI coding agent] -->|npx add name/variant| CLI[Sync UI CLI]
  Dev -->|MCP client config| MCP[Sync UI MCP Server]
  Dev -->|npx skills add| Skill[Agent Skill]

  CLI --> Registry[(Hosted Registry ui.abhivarde.in/r)]
  MCP --> Registry
  Skill --> Registry

  Registry --> JSON[Component / Block / Chart JSON]
  JSON --> Project[Your React / Next.js Project]

  Site[ui.abhivarde.in - Next.js App] --> Registry
  Site --> MUI[Material UI]
  Site --> Motion[Motion - motion/react]
  Site --> Analytics[Umami Analytics]
  Site -. deploy .-> Deploy[Vercel / Docker]

The CLI, MCP server, and Agent Skill are all thin clients over the same hosted registry — whichever route a developer or agent uses, they resolve to the same JSON definitions, so new entries go live everywhere the moment the site deploys.

git clone https://github.com/AbhiVarde/syncui
cd syncui
npm install
npm run dev

Docker

docker build -t syncui .
docker run -p 3000:3000 syncui

Open http://localhost:3000.

Contributions are welcome.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'feat: add your feature')
4. Push to the branch (git push origin feature/your-feature)
5. 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.

X · GitHub