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

Vite

Add Liquidify to a Vite-powered React application.

Install Liquidify in an existing Vite React application:

pnpm add @liquidify/react

Application entry

Import the stylesheet from your application entry, before application-specific styles that intentionally override public tokens:

// src/main.tsx
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import "@liquidify/react/styles.css"
import "./app.css"
import { App } from "./App"

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

Use components

Components can then be used from any React module:

import { Button } from "@liquidify/react"

export function App() {
return <Button onClick={() => alert("Hello")}>Continue</Button>
}

No Vite plugin or asset loader is required by Liquidify.

Quick startNext.js