⌘K
(opens in new tab)
Liquidify
Documentation
Getting started
InstallationQuick startViteNext.jsReact RouterAstroPlain ReactTroubleshooting
Concepts
Guides
Packages
Design tokens
Examples
AI resourcesDocumentation versions
Community

Plain React

Use Liquidify in a bundler-neutral React 19 application.

Liquidify publishes ESM and CSS package exports. Use a bundler or application runtime that understands package exports and CSS imports.

pnpm add react react-dom @liquidify/react

Application entry

Mount the application and import the stylesheet once:

import { createRoot } from "react-dom/client"
import { Button, Theme } from "@liquidify/react"
import "@liquidify/react/styles.css"

function App() {
return (
  <Theme type="system">
    <Button onClick={() => console.log("continue")}>Continue</Button>
  </Theme>
)
}

createRoot(document.getElementById("root")!).render(<App />)

Liquidify does not require a framework adapter. The host build must support React 19, ESM, and importing CSS from dependencies.

AstroTroubleshooting