React Router

Add Liquidify to a React Router application.

Install Liquidify in your existing React Router project:

pnpm add @liquidify/react

Root route

Import the stylesheet from the root route or client entry so it is loaded once for the complete route tree:

// app/root.tsx
import "@liquidify/react/styles.css"
import { Outlet } from "react-router"
import { Theme } from "@liquidify/react"

export default function Root() {
return (
  <Theme type="system">
    <Outlet />
  </Theme>
)
}

Route modules

Route modules can import components normally:

import { Button } from "@liquidify/react"

export default function AccountRoute() {
return <Button onClick={() => console.log("saved")}>Save account</Button>
}

If your React Router setup performs server rendering, keep browser-only application logic inside effects and preserve the same initial controlled values on the server and client.