Astro ships no JavaScript by default. Every component needs a client directive to hydrate, and the theme wraps inside the component, not the page.

Prerequisites

npx astro add react

Initialize

npx @abhivarde/syncui@latest init

Creates components.json and installs base dependencies.

Wrap the component

Add a client directive

Without a directive, the component renders unstyled and static.

Run dev

npm run dev

Open http://localhost:4321.

Known limitation

MUI styles can flash unstyled on first paint under partial hydration. Use client:load above the fold to reduce it.

You're all set. Add any component, block, or chart with the CLI, or copy the code straight from Components, Blocks, and Charts.