Use

Utiliser JoekerUI

Une fois installé, JoekerUI s'utilise en important les composants depuis le package puis en les composant dans tes interfaces React.

Importer un composant

import { Button } from "@joekerlabs/ui";

export default function Example() {
    return (
        <Button>
            Cliquer
        </Button>
    );
}

Utiliser un variant

Les variants représentent une intention visuelle : default, primary, secondary, success, danger, info ou warning.

import { Button } from "@joekerlabs/ui";

export default function Example() {
    return (
        <Button variant="success">
            Sauvegarder
        </Button>
    );
}

Utiliser un thème

Les thèmes appliquent explicitement une palette visuelle. Ils prennent le dessus sur le thème associé au variant.

import { Button } from "@joekerlabs/ui";

export default function Example() {
    return (
        <Button theme="frost">
            Action givrée
        </Button>
    );
}

Composer plusieurs composants

import {
    Button,
    Card,
    CardContent,
    CardHeader,
    CardTitle,
} from "@joekerlabs/ui";

export default function Example() {
    return (
        <Card theme="trickster">
            <CardHeader>
                <CardTitle>Module</CardTitle>
            </CardHeader>

            <CardContent>
                <Button>
                    Ouvrir
                </Button>
            </CardContent>
        </Card>
    );
}

Exemple visuel

Projet JoekerUI

Exemple de composition avec Card, Badge et Button.

Documentation