Astro with React

Render interactive Liquidify controls in Astro with the React integration.

Add Astro's React integration if the project does not already have it, then install Liquidify:

pnpm astro add react
pnpm add @liquidify/react

React island

Create a React island and import the stylesheet from that component or a shared layout:

// src/components/SaveControl.tsx
import { Button } from "@liquidify/react"
import "@liquidify/react/styles.css"

export function SaveControl() {
return <Button onClick={() => console.log("saved")}>Save changes</Button>
}

Hydration strategy

Hydrate the island with the smallest directive that fits the interaction:

---
import { SaveControl } from "../components/SaveControl"
---

<SaveControl client:visible />

Use client:load when a control must be interactive immediately. Use client:visible for below-the-fold interfaces. A Liquidify component rendered without a client directive remains static HTML and cannot handle interaction.