Quick start

Render a Liquidify component with the aggregate stylesheet and an optional theme scope.

Import the stylesheet once, then render components from the aggregate entry point:

import { Button, Theme } from "@liquidify/react"
import "@liquidify/react/styles.css"

export function App() {
return (
  <Theme type="system">
    <Button
      variant="glassProminent"
      tint="blue"
      onPress={() => console.log("Saved")}
    >
      Save changes
    </Button>
  </Theme>
)
}

Theme is re-exported by @liquidify/react, so this example needs only one Liquidify dependency. The provider is optional; without it, components inherit the document's color scheme and library defaults.

Smaller imports

The aggregate import is the clearest starting point. Applications that deliberately split component entry points can import a public subpath:

import { Button } from "@liquidify/react/button"
import "@liquidify/react/styles.css"

Keep the aggregate stylesheet unless your build has adopted and verified a more advanced CSS strategy.

Next steps

Set scoped defaults with providers.
Understand value ownership in controlled state.
Follow the framework guide listed under Getting started.