# Sync UI > Open source React UI library with 125+ animated components, 13+ blocks, and 12 chart variants. Built with MUI and Motion. Add via CLI, MCP, or agent skill. Website: [https://ui.abhivarde.in](https://ui.abhivarde.in) Docs: [https://ui.abhivarde.in/docs](https://ui.abhivarde.in/docs) Components: [https://ui.abhivarde.in/components](https://ui.abhivarde.in/components) Blocks: [https://ui.abhivarde.in/blocks](https://ui.abhivarde.in/blocks) Charts: [https://ui.abhivarde.in/charts](https://ui.abhivarde.in/charts) Templates: [https://ui.abhivarde.in/templates](https://ui.abhivarde.in/templates) Showcase: [https://ui.abhivarde.in/showcase](https://ui.abhivarde.in/showcase) GitHub: [https://github.com/AbhiVarde/syncui](https://github.com/AbhiVarde/syncui) npm: [https://www.npmjs.com/package/@abhivarde/syncui](https://www.npmjs.com/package/@abhivarde/syncui) Registry: [https://ui.abhivarde.in/r/index.json](https://ui.abhivarde.in/r/index.json) ## Setup npm install @mui/material @emotion/react @emotion/styled motion Wrap app in ThemeProvider: import { ThemeProvider, createTheme, CssBaseline } from "@mui/material"; const theme = createTheme({ palette: { mode: "dark" } }); {children} For Next.js App Router add "use client" to the provider wrapper. ## CLI 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. ## MCP Let your AI agent add components, blocks, and charts directly, no commands needed. Add to your MCP client config (Claude Code, Cursor, Windsurf, Codex, OpenCode): { "mcpServers": { "syncui": { "command": "npx", "args": ["-y", "@abhivarde/syncui-mcp"] } } } MCP package: [https://www.npmjs.com/package/@abhivarde/syncui-mcp](https://www.npmjs.com/package/@abhivarde/syncui-mcp) ## Registry 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. ## Agent skill 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. ## Core pattern import { Button } from "@mui/material"; import { motion } from "motion/react"; const MotionButton = motion.create(Button); Use motion.create(MuiComponent) to animate any MUI component. Use motion.div, motion.span for plain HTML elements. Use sx prop for all styling. Never use className or plain CSS. Import from motion/react. Never from framer-motion. ## Components 22 categories, 125+ variants total: Accordions, Autocompletes, Avatars, Backgrounds, Buttons, Cards, Carousels, Date Pickers, Dialogs, Docks, Forms, Grids, Loaders, Paginations, Pointers, Separators, Skeletons, Tables, Tabs, TextFields, Texts, Time Pickers. Buttons: default, shimmer, neon variants Cards: hover lift with whileHover={{ y: -8 }} Dialogs: slide-up, blur, form, notification, sidebar variants Tabs: layoutId sliding underline, AnimatePresence mode="wait" for panels Avatars: overlapping, minimal-grid variants TextFields: otp, floating-label variants Autocomplete: viewport-aware dropdown, real-time filtering Date Picker: single, range, presets, with-time variants Time Picker: 12hour, 24hour, with-seconds, presets variants Accordions: MUI Accordion with motion expand Carousels: fade, scale, slide variants with image preloading Grids: standard, masonry, organic-shapes variants Loaders: shimmer, pulse, wave skeleton variants Skeletons: lightweight loading placeholders for cards, lists, text, and content blocks Tables: staggered row entrance with motion.create(TableRow) Marquees: horizontal, vertical infinite scroll Backgrounds: magnetic-connections, gemini-wave interactive variants Docks: macOS magnification with useMotionValue and useSpring Pagination: animated entrance ## Blocks 4 blocks, 13+ variants total: Hero, CTA, Pricing, Stats. Hero: left-aligned, center-aligned, search variants CTA: centered, split, card variants Pricing: three-tier, two-tier, row variants Stats: simple, with-icons, cards variants Icon deps: @hugeicons/react for Hero and CTA, react-icons/fi for Stats ## Charts 6 chart types, 12 variants total (two each): Bar, Donut, Heatmap, Line, Progress, Stat. Animated and MUI-styled. Fully themeable, dark mode included out of the box. ## Templates 3 templates: Startup, SaaS, Portfolio, $29 each. Bundle: all three for $79. Templates: [https://ui.abhivarde.in/templates](https://ui.abhivarde.in/templates) ## Animation presets Snappy: { type: "spring", stiffness: 400, damping: 17 } Smooth: { type: "spring", stiffness: 300, damping: 24 } Gentle: { duration: 0.4, ease: "easeOut" } Fast: { duration: 0.15, ease: "easeInOut" } Always use AnimatePresence when conditionally unmounting components. Always use viewport={{ once: true }} for scroll-triggered animations. Always handle useReducedMotion for accessibility. ## Accessibility Every interactive element must have a discernible accessible name. Icon-only links: add aria-label describing the destination. Icon-only buttons: add aria-label describing the action. Toggle buttons: reflect current state in aria-label. Disclosure buttons (menus, drawers): add aria-expanded and aria-controls. Decorative images inside labelled links: use empty alt and aria-hidden. react-icons and HugeiconsIcon inside labelled containers: add aria-hidden and focusable="false".