heroui-inc/heroui-react

Que fait heroui-react ?

HeroUI v3 — une bibliothèque de composants React basée sur Tailwind CSS v4 et React Aria. Utilisez ce skill lorsque vous construisez des interfaces utilisateur avec HeroUI : création de boutons, modales, formulaires, cartes ; installation de @heroui/react ; configuration des thèmes clair/sombre avec des variables oklch ; ou récupération de documentation de composants.

Mots clés : HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.

Installation

npm install @heroui/react framer-motion

Assurez-vous d'avoir Tailwind CSS v4 installé et configuré.

Configuration de Tailwind

Dans votre fichier CSS global (par exemple app/globals.css), importez les styles de HeroUI :

@import "tailwindcss";
@import "@heroui/react/dist/styles.css";

Configurer les couleurs du thème (optionnel, par défaut OKLCH Heroui) :

@custom-variant dark (&:is(.dark *));

Configuration du fournisseur

Enveloppez votre application racine avec le HeroUIProvider :

// app/providers.tsx
'use client';

import {HeroUIProvider} from '@heroui/react';

export function Providers({children}: {children: React.ReactNode}) {
  return (
    <HeroUIProvider>
      {children}
    </HeroUIProvider>
  );
}

Composants de base

Bouton

import {Button} from '@heroui/react';

export default function App() {
  return (
    <Button color="primary">
      Cliquez moi
    </Button>
  );
}

Modale

import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from '@heroui/react';

export default function App() {
  const {isOpen, onOpen, onClose} = useDisclosure();

  return (
    <>
      <Button onPress={onOpen}>Ouvrir la modale</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalContent>
          <ModalHeader>Titre de la modale</ModalHeader>
          <ModalBody>
            <p>Contenu de la modale</p>
          </ModalBody>
          <ModalFooter>
            <Button color="danger" variant="light" onPress={onClose}>Fermer</Button>
            <Button color="primary" onPress={onClose}>Agir</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}

Carte (Card)

import {Card, CardHeader, CardBody, CardFooter, Divider, Image, Button} from '@heroui/react';

export default function App() {
  return (
    <Card className="max-w-[400px]">
      <CardHeader className="flex gap-3">
        <Image
          alt="logo hero-ui"
          height={40}
          radius="sm"
          src="https://avatars.githubusercontent.com/u/86160567?s=200&v=4"
          width={40}
        />
        <div className="flex flex-col">
          <p className="text-md">HeroUI</p>
          <p className="text-small text-default-500">heroui.com</p>
        </div>
      </CardHeader>
      <Divider/>
      <CardBody>
        <p>Construisez de magnifiques interfaces utilisateur avec HeroUI.</p>
      </CardBody>
      <Divider/>
      <CardFooter>
        <Button color="primary" variant="flat">
          Bouton
        </Button>
      </CardFooter>
    </Card>
  );
}

Champ de saisie (Input)

import {Input} from '@heroui/react';

export default function App() {
  return (
    <Input
      isRequired
      type="email"
      label="Email"
      defaultValue="[email protected]"
      className="max-w-xs"
    />
  );
}

Documentation des composants

Pour obtenir une documentation détaillée sur un composant spécifique, utilisez la commande suivante ou consultez la documentation officielle :

# Ceci est un exemple — utilisez l'interface de l'agent pour récupérer les docs
# Par exemple : heroui documentation pour le composant Button

Sur https://www.heroui.com/docs/components/ vous trouverez tous les composants listés.

Thèmes

HeroUI prend en charge les thèmes clair et sombre via des variables oklch. Appliquez la classe dark à l'élément racine (par exemple <html>) pour passer en mode sombre.

// Exemple : basculer le thème
function ThemeSwitcher() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    document.documentElement.classList.toggle('dark', isDark);
  }, [isDark]);

  return (
    <Button onPress={() => setIsDark(prev => !prev)}>
      Basculer le thème
    </Button>
  );
}

Ressources supplémentaires

• Documentation officielle HeroUI
• Dépôt GitHub HeroUI