@liquidify/react

Composants Liquidify pour les applications React 19.

L’API est expérimentale. Fixez la version utilisée par votre application.

Code

pnpm add @liquidify/react

Importez la feuille de styles une seule fois et utilisez les exports nommés :

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

export function SaveAction() {
  return (
    <Theme type="system">
      <Button variant="glassProminent" onPress={() => console.log("save")}>
        Enregistrer
      </Button>
    </Theme>
  )
}

Points d’entrée publics

@liquidify/react : composants, types partagés et Theme.
@liquidify/react/styles.css : styles des composants, du moteur et des tokens.
@liquidify/react/<component> : JavaScript et types par composant, comme @liquidify/react/button.

N’importez pas de chemins src ni dist. Consultez les props, valeurs par défaut, callbacks et correspondances SwiftUI dans chaque référence de composant.

Dépendances

React et React DOM 19 sont des dépendances paires. @liquidify/glass et @liquidify/tokens sont installés comme dépendances directes du paquet.

Stratégie CSS

La feuille de styles complète est l’option par défaut. Chargez-la avant les styles de l’application qui personnalisent les tokens publics --lq-*. Les imports JavaScript par composant ne remplacent pas une stratégie CSS vérifiée.