Easy UI Kit

Bibliothèque de composants Vue 3 légère, avec des design tokens propres, des variantes cohérentes, +300 icônes intégrées et zéro dépendance runtime.

Documentation

Voir la documentation complète →

Stack technique

• Vue 3 avec <script setup lang="ts"> (Composition API)
• TypeScript en mode strict
• CSS custom properties pour le theming (aucune dépendance Tailwind en runtime)
• CSS mask-image pour le système d'icônes (héritage automatique de color)

Installation

npm install easy-ui-kit

Configuration rapide

Importez la bibliothèque dans votre fichier d'entrée. Le CSS (reset, tokens, icônes, styles composants) est chargé automatiquement :

// main.ts
import "easy-ui-kit";

Puis importez les composants dans vos fichiers Vue :

<script setup lang="ts">
import { UiButton, UiInput, UiBadge } from "easy-ui-kit";
</script>

Design tokens

Les tokens sont définis comme CSS custom properties sous :root et disponibles partout dans votre application.

Couleurs

| Token | Valeur | Usage | |-------|--------|-------| | --color-primary | #2f68a8 | Couleur principale (bleu) | | --color-secondary | #eff4fa | Fond secondaire (gris clair) | | --color-danger | #fd2e2e | Erreurs, suppressions (rouge) | | --color-dark | #0e1f3f | Texte principal, fond sombre | | --color-success | #0bda51 | Validations, confirmations (vert) | | --color-warning | #eab308 | Alertes, avertissements (jaune) | | --color-gray-300 | #d1d5db | Bordures | | --color-gray-400 | #9ca3af | Texte placeholder, disabled |

Espacement

| Token | Valeur | |-------|--------| | --space-1 | 0.25rem (4px) | | --space-2 | 0.5rem (8px) | | --space-3 | 0.75rem (12px) | | --space-4 | 1rem (16px) | | --space-6 | 1.5rem (24px) |

Rayons

| Token | Valeur | |-------|--------| | --radius-sm | 0.25rem | | --radius-md | 0.5rem | | --radius-lg | 0.75rem | | --radius-full | 9999px |

Typographie

La bibliothèque utilise le token --font-sans qui résout vers la pile de polices système :

system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Composants

UiButton

Bouton avec variantes de couleur, tailles, et états loading/outline.

Props

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | variant | "primary" | "secondary" | "danger" | "dark" | "primary" | Couleur du bouton | | size | "sm" | "md" | "lg" | "md" | Taille | | loading | boolean | false | État chargement (couleur atténuée, clics désactivés) | | outline | boolean | false | Fond blanc + bordure et texte colorés |

Le contenu est passé via le slot par défaut.

Exemples

<UiButton>Valider</UiButton>
<UiButton variant="danger" size="lg">Supprimer</UiButton>
<UiButton variant="primary" loading>Envoi en cours...</UiButton>
<UiButton variant="dark" outline>Annuler</UiButton>

<!-- Avec icône -->
<UiButton variant="primary" size="sm">
  <i class="ui-icon ui-icon-home-solid" style="width: 16px; height: 16px" />
  Accueil
</UiButton>

UiInput

Champ de saisie avec label, helper text, lien, états de validation et toggle password intégré.

Props

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | modelValue | string | — | Valeur (support v-model) | | type | string | "text" | Type HTML (text, email, password, number...) | | label | string | — | Label affiché au-dessus | | placeholder | string | — | Placeholder du champ | | helper | string | — | Texte d'aide affiché en dessous | | link | string | — | Texte lien affiché à droite du label | | disabled | boolean | false | Désactive le champ | | state | "default" | "success" | "warning" | "error" | "info" | "default" | État de validation (colore la bordure et le helper) |

Quand type="password", une icône oeil apparaît automatiquement pour basculer la visibilité.

Exemples

<UiInput v-model="email" label="Email" placeholder="[email protected]" />
<UiInput v-model="name" label="Nom" helper="Ce champ est requis" state="error" />
<UiInput v-model="password" type="password" label="Mot de passe" />
<UiInput label="Champ verrouillé" placeholder="..." disabled />

UiRadio

Bouton radio avec dot intérieur coloré.

Props

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | modelValue | string \| number \| boolean | — | Valeur sélectionnée (support v-model) | | value | string \| number \| boolean | requis | Valeur de ce radio | | name | string | — | Attribut name pour grouper les radios | | label | string | — | Label affiché (ou utiliser le slot) | | variant | "primary" | "danger" | "warning" | "success" | "primary" | Couleur quand sélectionné | | disabled | boolean | false | Désactive le radio |

Exemples

<script setup lang="ts">
import { ref } from "vue";
const choice = ref("a");
</script>

<UiRadio v-model="choice" value="a" name="plan" label="Gratuit" />
<UiRadio v-model="choice" value="b" name="plan" label="Premium" />
<UiRadio v-model="choice" value="c" name="plan" label="Entreprise" variant="success" />

UiCheckbox

Case à cocher avec checkmark blanc sur fond coloré.

Props

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | modelValue | boolean | false | État coché (support v-model) | | label | string | — | Label affiché (ou utiliser le slot) | | variant | "primary" | "danger" | "warning" | "success" | "primary" | Couleur quand coché | | disabled | boolean | false | Désactive la checkbox |

Exemples

<UiCheckbox v-model="accepted" label="J'accepte les conditions" />
<UiCheckbox v-model="urgent" label="Urgent" variant="danger" />
<UiCheckbox v-model="done" label="Terminé" variant="success" disabled />

UiSwitch

Toggle switch avec track pill et thumb glissant.

Props

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | modelValue | boolean | false | État activé (support v-model) | | label | string | — | Label affiché (ou utiliser le slot) | | variant | "primary" | "danger" | "warning" | "success" | "primary" | Couleur quand activé | | disabled | boolean | false | Désactive le switch |

Exemples

<UiSwitch v-model="active" label="Activer les notifications" />
<UiSwitch v-model="darkMode" label="Mode sombre" variant="success" />

UiBadge

Badge pill pour statuts, tags et indicateurs. Trois modes : fond coloré (défaut), ghost (sans fond), outline (bordure).

Props

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | variant | "primary" | "danger" | "warning" | "success" | "primary" | Couleur | | size | "sm" | "md" | "lg" | "md" | Taille | | ghost | boolean | false | Sans fond (texte coloré uniquement) | | outline | boolean | false | Sans fond + bordure colorée |

Le contenu est passé via le slot par défaut.

Exemples

<UiBadge variant="success">Actif</UiBadge>
<UiBadge variant="danger" size="sm">Expiré</UiBadge>
<UiBadge variant="warning" ghost>En attente</UiBadge>
<UiBadge variant="primary" outline>Nouveau</UiBadge>

UiToast

Bandeau d'alerte avec icône, bordure colorée et fond pastel.

Props

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | variant | "primary" | "danger" | "warning" | "success" | "primary" | Couleur |

Slots

| Slot | Description | |------|-------------| | default | Contenu texte du toast | | icon | Icône personnalisée (remplace l'icône par défaut) |

Exemples

<UiToast variant="success">Opération réussie !</UiToast>
<UiToast variant="danger">Une erreur est survenue.</UiToast>

<!-- Avec icône custom -->
<UiToast variant="primary">
  <template #icon>
    <i class="ui-icon ui-icon-home-solid" style="width: 20px; height: 20px" />
  </template>
  Bienvenue sur le dashboard.
</UiToast>

Système d'icônes

Plus de 300 icônes disponibles en 3 variantes : outline, solid et mini.

Les icônes utilisent la technique CSS mask-image : un élément <i> avec background-color: currentColor et un masque SVG. L'icône hérite automatiquement de la color de son parent.

Utiliser une icône

<!-- Deux classes requises : ui-icon (base) + ui-icon-{nom}-{variante} -->
<i class="ui-icon ui-icon-heart-solid" style="width: 24px; height: 24px"></i>

<!-- Hérite de la couleur du parent -->
<span style="color: red">
  <i class="ui-icon ui-icon-heart-solid" style="width: 24px; height: 24px"></i>
</span>

<!-- Les 3 variantes -->
<i class="ui-icon ui-icon-heart-outline" style="width: 24px; height: 24px"></i>
<i class="ui-icon ui-icon-heart-solid" style="width: 24px; height: 24px"></i>
<i class="ui-icon ui-icon-heart-mini" style="width: 20px; height: 20px"></i>

La classe ui-icon ne définit pas de width/height par défaut. La taille doit être définie via du style inline ou une classe CSS.

La liste complète des icônes est disponible dans la documentation.

Développement

npm run dev          # Serveur de développement (docs + playground)
npm run build        # Type-check + build production + génération des .d.ts
npm run preview      # Prévisualiser le build
npm run gen:icons    # Regénérer les données d'icônes pour la doc

Licence

MIT