# Using cascivo with Astro
**Status: supported** as of `@cascivo/react` 1.0.1, with **one required line of config**.
Every client directive — `client:load`, `client:visible`, `client:only` — then
server-renders and styles correctly, and page content rendered with no directive at all
ships as static HTML with zero JS.
`npx cascivo create my-app --framework astro` emits this wiring already done.
---
## Setup
```sh
npx astro add react
pnpm add @cascivo/react @cascivo/themes @preact/signals-react
```
### The required config
```js
// astro.config.mjs
import { defineConfig } from 'astro/config'
import react from '@astrojs/react'
export default defineConfig({
integrations: [react()],
vite: {
resolve: {
noExternal: [/^@cascivo\//],
},
},
})
```
**Without it, SSR'd islands render unstyled** — correct class names in the HTML, no
matching rules anywhere in the output, and nothing warning. It reads as a theming problem
and sends you down entirely the wrong path.
Why it is needed: Vite externalizes `node_modules` packages in its server build, so an
externalized `@cascivo/react` is imported by Node at runtime and its module graph is never
walked — and Astro collects a page's CSS by walking that graph. `noExternal` puts the
package back in the graph.
Two details worth pinning down, because both cost real time to rediscover:
- It must be **`resolve.noExternal`**, not `ssr.noExternal`. Astro prerenders static routes
in its own Vite environment, which `ssr.*` does not reach. This is the same trap the
Preact section below describes.
- It is **not sufficient on its own**. Before `@cascivo/react` 1.0.1 the package's exports
map listed its CSS-free `node` twin ahead of `import`, so `noExternal` merely bundled the
CSS-free build and the islands stayed unstyled. You need 1.0.1+ **and** this config.
### Theme import
Import the theme once in a shared layout. Component CSS is **not** in this list — each
component chunk carries its own stylesheet and Astro emits only what your pages use:
```astro
---
// src/layouts/Layout.astro
import '../styles/layers.css' // cascade layer order — must come first
import '@cascivo/themes/light-dark.css'
---
```
Put your `@layer` order statement in a CSS file imported **before** the theme, not in a
`