uhq-ui

v1.4.0

Published

3 months ago

Mini-lib React ultra simple: Button, Alert, Card avec CSS moderne.

Downloads

0High
0Medium
0Low

hugoplz

react ui components button alert card css

uhq-ui

Mini-lib React prête à l'emploi avec des composants simples et élégants:

Button (uhq-btn)
Alert (uhq-alert)
Card (uhq-card)
Input (uhq-input), Select (uhq-select), Textarea (uhq-textarea)
Checkbox (uhq-checkbox), Radio (uhq-radio), Switch (uhq-switch)
Badge (uhq-badge)

Le style est moderne et themable via variables CSS (ex: --primary, --radius).

Installation

npm install uhq-ui
# ou
yarn add uhq-ui

Utilisation

import {
  Button,
  Alert,
  Card,
  Input,
  Select,
  Textarea,
  Checkbox,
  Radio,
  Switch,
  Badge,
} from "uhq-ui";
import "uhq-ui/dist/uhq.css";

export default function App() {
  return (
    <div style={{ padding: 20 }}>
      <Button color="blue-600" textColor="#fff">
        Primary
      </Button>

      <div style={{ height: 12 }} />

      <Input placeholder="Votre email" />

      <div style={{ height: 12 }} />

      <Select>
        <option>Option A</option>
        <option>Option B</option>
      </Select>

      <div style={{ height: 12 }} />

      <Textarea rows={3} placeholder="Votre message" />

      <div style={{ height: 12 }} />

      <Checkbox>J'accepte</Checkbox>
      <div style={{ width: 12, display: "inline-block" }} />
      <Radio name="r1">Choix</Radio>
      <div style={{ width: 12, display: "inline-block" }} />
      <Switch />

      <div style={{ height: 12 }} />

      <Badge color="green-600" textColor="white">
        Nouveau
      </Badge>

      <div style={{ height: 16 }} />

      <Alert title="Attention !" color="amber-500" textColor="gray-900">
        Une alerte simple et lisible.
      </Alert>

      <div style={{ height: 16 }} />

      <Card
        title="Titre"
        subtitle="Sous-titre"
        actions={<Button color="green500">Action</Button>}
      >
        Contenu de la carte.
      </Card>
    </div>
  );
}

Chaque composant accepte className pour surcharger les styles.

Couleurs directes (props)

Vous pouvez fournir des couleurs directement sur les composants (override des variables CSS internes):

Button: color (map --primary), textColor (map --primary-contrast)
Alert: color (map --danger), textColor (map --text)
Card: color (map --surface), textColor (map --text), borderColor (map --muted)

Ces props acceptent:

valeurs CSS (#2563eb, rgb(…), hsl(…), red, transparent, etc.)
tokens façon Tailwind: red500, red-500, blue, green-600, amber400, gray-200…

Exemples tokens

<Button color="red500">Supprimer</Button>
<Button color="green-600" textColor="white">Valider</Button>
<Alert color="red-100" textColor="red-700" title="Erreur">Message</Alert>
<Card color="gray-50" borderColor="gray-200" title="Info">…</Card>

Police par défaut

Une police moderne par défaut est appliquée via --font-sans.

Valeur par défaut: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"
Override global (ex.: Inter):

:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

Thème sombre (opt-in)

Par défaut, le thème est clair. Pour activer le thème sombre, ajoutez l’attribut data-uhq-theme="dark" sur html ou sur un conteneur parent:

<html data-uhq-theme="dark">
  <!-- ... -->
</html>

Thème (variables CSS)

Définissez ces variables au niveau :root (ou dans votre scope) pour changer le thème:

:root {
  --primary: #4f46e5;
  --primary-contrast: #ffffff;
  --danger: #ef4444;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
  --gap: 12px;
}

API des composants

Button
- Props: as (élément/comp, défaut button), className, color?, textColor?, style?, autres props natifs
Alert
- Props: title?, icon?, className, color?, textColor?, style?, autres props div
Card
- Props: title?, subtitle?, actions?, as?, className, color?, textColor?, borderColor?, style?, enfants
Input
- Props: className, color?, textColor?, style?, + props natifs input
Select
- Props: className, color?, textColor?, style?, + props natifs select
Textarea
- Props: className, color?, textColor?, style?, + props natifs textarea
Checkbox
- Props: className, color?, style?, children?, + props natifs input[type=checkbox]
Radio
- Props: className, name?, color?, style?, children?, + props natifs input[type=radio]
Switch
- Props: className, color?, checked?, onChange?, style?
Badge
- Props: className, color?, textColor?, style?, children?

Développement local

npm install
npm run build

Le build génère dist/index.js (ESM) et dist/uhq.css (copie). Esbuild peut aussi émettre dist/index.css via l'import CSS.

Publier sur npm

Connectez-vous à npm

npm login
# email + OTP si 2FA activée

Mettez à jour la version (semver)

npm version patch   # ou minor / major

Build et publication

npm run clean && npm run build
npm publish --access public

Assurez-vous que le nom du package name dans package.json est disponible.

Licence

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

uhq-ui

Installation

Utilisation

Couleurs directes (props)

Exemples tokens

Police par défaut

Thème sombre (opt-in)

Thème (variables CSS)

API des composants

Développement local

Publier sur npm

Licence