cometchat-astro-patterns

To integrate CometChat UI Kit v6 into Astro, use React islands with client:only rendering, place directives correctly, import CSS inside islands, and wrap components with a provider to avoid hydration and CSS isolation issues.

CometChat React islands fail hydration or lose CSS in Astro when client:only directives are misplaced or CSS is imported globally. Import CSS directly inside islands and wrap components with a provider to prevent these issues.

The best way to handle CSS isolation for client:only islands in Astro is to import CSS directly inside the React islands and override CSS variables locally, ensuring styles remain scoped and preventing leakage across components.

To enable island communication across multiple React islands in Astro, wrap your components with a shared provider. This pattern ensures stable state synchronization and avoids common integration pitfalls during hydration.

You need client:only rendering for CometChat components in Astro because the UI Kit relies on browser APIs. Applying client:only directives correctly prevents server-side execution errors and ensures proper hydration.