UI Kit

Composant Boutons

Le composant UIButton est un élément d'interface utilisateur polyvalent qui peut être personnalisé avec différentes variantes, tailles, thèmes et états.

Variantes

Les variantes définissent le style fonctionnel du bouton. Utilisez variant="success" pour les actions positives et variant="danger" pour les actions destructives.

html

Tailles

Trois tailles sont disponibles : size="small", size="medium" (par défaut) et size="big".

html

Thèmes

Plusieurs thèmes de couleur sont disponibles pour s'adapter à l'identité visuelle de votre marque : theme="green", theme="red", theme="blue".

html

État de chargement

Utilisez loading pour afficher un indicateur de chargement et loadingText pour personnaliser le texte affiché. Le curseur prendra automatiquement l'apparence d'attente (wait).

html

Avec icônes

Ajoutez des icônes à gauche ou à droite du texte avec iconLeft et iconRight, ou utilisez les slots icon-left et icon-right.

html

État désactivé

Utilisez disabled pour désactiver un bouton. Les boutons désactivés n'ont pas d'ombre et affichent un curseur "not-allowed" au survol.

html

Comportement du curseur et effets interactifs

Le composant UIButton gère automatiquement l'apparence du curseur et les effets interactifs selon son état :

Bouton normal : Curseur "pointer", effet de survol et effet de clic actifs
Bouton désactivé : Curseur "not-allowed", pas d'ombre, pas d'effet de clic
Bouton en chargement : Curseur "wait", pas d'effet de clic

Avec effets interactifs

Sans effet de clic

Note : Les boutons désactivés et en chargement ne déclenchent pas l'événement click et n'affichent pas d'effet visuel lors du clic, même s'ils peuvent être survolés pour afficher le curseur approprié.

API du composant

Prop	Type	Défaut	Description
`variant`	String	`'default'`	Variante du bouton : `'default'`, `'success'`, `'danger'`
`size`	String	`'medium'`	Taille du bouton : `'small'`, `'medium'`, `'big'`
`theme`	String	`'light'`	Thème de couleur : `'light'`, `'dark'`, `'green'`, `'red'`, `'blue'`
`type`	String	`'button'`	Type HTML du bouton : `'button'`, `'submit'`, `'reset'`
`disabled`	Boolean	`false`	Désactive le bouton
`loading`	Boolean	`false`	Affiche un indicateur de chargement
`loadingText`	String	`'Chargement...'`	Texte affiché pendant le chargement
`iconLeft`	Component	`null`	Composant d'icône à gauche
`iconRight`	Component	`null`	Composant d'icône à droite

Composant Navigation Links

Variantes

Lien par défaut Lien primaire Lien B2B Lien Shop Lien Repair

html

Tailles

Petit Normal Grand

html

Poids de police

Normal Medium Gras

html

Avec icônes

Accueil

html

Avec badge

Notifications Messages

html

État actif

Lien normal Lien actif Lien actif personnalisé

html

État désactivé

Lien normal Lien désactivé

html

API du composant

Propriété	Type	Défaut	Description
label	String	''	Texte du lien
to	String	'#'	URL de destination
variant	String	'default'	Variante du lien (default, primary, b2b, shop, repair)
size	String	'base'	Taille du lien (sm, base, lg)
fontWeight	String	'medium'	Poids de la police (normal, medium, bold)
showLabel	Boolean	true	Afficher ou masquer le texte du lien
badge	String, Number	''	Texte du badge
className	String	''	Classes CSS personnalisées
disabled	Boolean	false	Désactiver le lien
active	Boolean	false	Marquer le lien comme actif
activeClass	String	'font-bold'	Classes CSS pour l'état actif

Composant Champs de formulaire

Variantes

Input standard

Prénom

Input requis

Email *

Input avec bulle d'info

Mot de passe

Input avec info toujours visible

Numéro de téléphone

Format: +33 6 12 34 56 78

Tailles

Petit

Petit input

Moyen (par défaut)

Input moyen

Grand

Grand input

Avec icônes

Input avec icône

Recherche

Input avec suffixe

Prix

€

États

État désactivé

Input désactivé

État d'erreur

L'email n'est pas valide

Validation

Validation par pattern

Code postal

Format: 5 chiffres

Longueur minimale et maximale

Nom d'utilisateur

Entre 3 et 20 caractères

API du composant

Prop	Type	Défaut	Description
modelValue	String, Number	''	Valeur de l'input (v-model)
id	String	auto-généré	ID de l'input
type	String	'text'	Type de l'input (text, email, password, etc.)
placeholder	String	''	Texte d'exemple dans l'input
label	String	''	Libellé de l'input
required	Boolean	false	Indique si l'input est requis
infoText	String	''	Texte d'information supplémentaire
infoTextAlwaysVisible	Boolean	false	Affiche toujours le texte d'info (sans bulle)
icon	Object, Function	null	Icône à afficher dans l'input
disabled	Boolean	false	Désactive l'input
error	Boolean	false	Indique une erreur de validation
errorMessage	String	''	Message d'erreur à afficher
size	String	'medium'	Taille de l'input (small, medium, large)
pattern	String	''	Expression régulière pour la validation
minlength	String, Number	''	Longueur minimale
maxlength	String, Number	''	Longueur maximale
suffixText	String	''	Texte à afficher comme suffixe

Événements

Événements	Description
update:modelValue	Émis lorsque la valeur de l'input change
blur	Émis lorsque l'input perd le focus

Composant Cases à cocher

Variantes

Case à cocher standard

J'accepte les conditions générales

Veuillez lire les conditions avant d'accepter

Case à cocher requise

J'accepte de recevoir la newsletter *

Case à cocher avec bulle d'info

Partager mes données

Case à cocher avec info toujours visible

Activer les notifications

Vous recevrez des notifications par email et SMS

Tailles

Petite

Option petite taille

Moyenne (par défaut)

Option taille moyenne

Grande

Option grande taille

États

État désactivé

Option désactivée

État d'erreur

Vous devez accepter les conditions

Cette option est obligatoire

État coché

Option pré-cochée

API du composant

Prop	Type	Défaut	Description
`modelValue`	Boolean	false	Valeur de la case à cocher (v-model)
`id`	String	auto-généré	ID de la case à cocher
`label`	String	''	Libellé de la case à cocher
`required`	Boolean	false	Indique si la case à cocher est requise
`infoText`	String	''	Texte d'information supplémentaire
`infoTextAlwaysVisible`	Boolean	false	Affiche toujours le texte d'info (sans bulle)
`helpText`	String	''	Texte d'aide/description
`disabled`	Boolean	false	Désactive la case à cocher
`error`	Boolean	false	Indique une erreur de validation
`errorMessage`	String	''	Message d'erreur à afficher
`size`	String	'medium'	Taille de la case à cocher (small, medium, large)

Événements

Événement	Description
`update:modelValue`	Émis lorsque l'état de la case à cocher change

Composant Conteneur

Le composant UIContainer est un élément de mise en page flexible qui permet de structurer le contenu avec différentes options de padding et de largeur maximale.

Variantes

Le conteneur peut être utilisé avec différentes configurations pour s'adapter à vos besoins de mise en page.

Conteneur standard

Contenu du conteneur

Conteneur avec largeur maximale

Conteneur avec largeur maximale moyenne

Conteneur avec padding personnalisé

Conteneur avec grand padding

html

Tailles de padding

Quatre options de padding sont disponibles : padding="none", padding="small", padding="medium" (par défaut) et padding="large".

Sans padding

Conteneur sans padding

Petit padding

Conteneur avec petit padding

Padding moyen (par défaut)

Conteneur avec padding moyen

Grand padding

Conteneur avec grand padding

html

Padding spécifiques

Vous pouvez définir des paddings spécifiques pour chaque côté du conteneur avec paddingTop, paddingBottom, paddingLeft et paddingRight.

Padding vertical uniquement

Conteneur avec padding vertical uniquement

Padding horizontal uniquement

Conteneur avec padding horizontal uniquement

html

Largeurs maximales

Cinq options de largeur maximale sont disponibles : maxWidth="none", maxWidth="small", maxWidth="medium", maxWidth="large" (par défaut) et maxWidth="full".

Petite largeur

Conteneur avec petite largeur maximale

Largeur moyenne

Conteneur avec largeur maximale moyenne

Grande largeur (par défaut)

Conteneur avec grande largeur maximale

Largeur complète

Conteneur avec largeur complète

html

API du composant

Prop	Type	Défaut	Description
`padding`	String	'medium'	Taille du padding (none, small, medium, large)
`paddingTop`	String	null	Padding du haut (none, small, medium, large)
`paddingBottom`	String	null	Padding du bas (none, small, medium, large)
`paddingLeft`	String	null	Padding de gauche (none, small, medium, large)
`paddingRight`	String	null	Padding de droite (none, small, medium, large)
`maxWidth`	String	'large'	Largeur maximale du conteneur (none, small, medium, large, full)
`centerContent`	Boolean	true	Centrer le contenu horizontalement
`fullHeight`	Boolean	false	Prendre toute la hauteur disponible
`className`	String	''	Classes CSS additionnelles

Composant Infobulle

Le composant UITooltip permet d'afficher des informations supplémentaires au survol d'un élément, aidant à clarifier des fonctionnalités ou à fournir des explications contextuelles.

Variantes

Les infobulles peuvent afficher du texte simple ou du contenu personnalisé via un slot.

Infobulle standard

Survolez l'icône pour voir l'infobulle

Infobulle avec contenu personnalisé

Utilise un slot pour le contenu

html

Positions

L'infobulle peut être positionnée à droite, à gauche, en haut ou en bas de l'élément déclencheur avec la prop position.

Position à droite (par défaut)

position="right"

Position à gauche

position="left"

Position en haut

position="top"

Position en bas

position="bottom"

html

Tailles

Trois tailles sont disponibles pour les infobulles : size="small", size="medium" (par défaut) et size="large".

Petite

size="small"

Moyenne (par défaut)

size="medium"

Grande

size="large"

html

Exemples d'utilisation

Les infobulles sont particulièrement utiles pour fournir des informations supplémentaires dans les formulaires, les tableaux de bord ou pour expliquer des fonctionnalités complexes.

Dans un formulaire

Nom d'utilisateur

html

API du composant

Prop	Type	Défaut	Description
`text`	String	''	Texte à afficher dans l'infobulle
`position`	String	'right'	Position de l'infobulle (top, right, bottom, left)
`size`	String	'medium'	Taille de l'infobulle (small, medium, large)

Nom	Description
`default`	Contenu personnalisé de l'infobulle (remplace la prop text)

Composant Layouts

Layout par défaut

Header

Contenu principal

Footer

Le layout par défaut comprend un en-tête, un contenu principal et un pied de page. Il est idéal pour les pages standard du site.

vue

Layout minimal

Contenu principal

Le layout minimal n'inclut que le contenu principal et une section de copyright. Il est parfait pour les pages d'administration, de documentation ou les pages spéciales comme cette page UI Kit.

vue

Utilisation

Pour utiliser un layout spécifique dans une page, ajoutez la configuration definePageMeta dans votre script setup.

vue

Les layouts sont définis dans le dossier layouts/ de votre projet Nuxt.

Composant Text

Taille du texte

La prop size permet de définir la taille du texte. Les valeurs possibles sont : small, medium, large.

Ceci est un petit text

Ceci est un moyen text

Ceci est un grand text

Type du texte

La prop type permet de définir le type du texte. Les valeurs possibles sont : success, danger, warning, info.

Action réussie !

Une erreur est survenue !

Attention ! Cette page est dangereuse !

La statue de la liberté a été construite en France !

Couleur du texte

La prop color permet de définir la couleur du texte. Par défaut, elle est définie sur black. Si un type est défini, la couleur ne sera pas prise en compte.

Ce text à la couleur par défaut 'text-black'

Ce text a été défini avec 'text-red-500'

Décoration du texte

La prop text-decoration-line permet de définir une décoration du texte. Les valeurs possibles sont : overline, line-thought,

Ce text a une ligne sur la tête.

Ce text est barré !

Épaisseur du texte

La prop font-weight permet de définir le poids de la police. Les valeurs possibles sont : light, normal, bold.

Texte léger

Texte normal

Texte gras

Alignement du texte

La prop text-align permet de définir l'alignement du texte. Les valeurs possibles sont : left, center, right.

Je suis à gauche

Et moi au centre

Et moi à droite

Transformation du texte

La prop text-transform permet de transformer le texte en majuscules, minuscules ou capitalisées. Les valeurs possibles sont : uppercase, lowercase, capitalize.

est-ce que tu m'entends ???

Texte en minuscules.

pourquoi un text en capitalize ? Je ne sais pas.

Text en italique

La prop italic permet de définir si le texte doit être en italique. Par défaut, elle est définie sur false.

Ceci est un text tout à fait normal

Oh ! Mais que s'est-il passé ? Je suis tout de travers !

Text souligné

La prop underline permet de définir si le texte doit être souligné. Par défaut, elle est définie sur false.

Ce text n'est pas très important puisqu'il n'est pas souligné.

Ce text contient sûrement une information importante puisqu'il est souligné.

Nombres de lignes

La prop line-clamp-<number> permet de gérer si le texte se brise ou non lorsqu'il atteint la limite de la ligne.

Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui. Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.

Api du composant

Propriété	Type	Défaut	Description
`text`	String	Requis	Le contenu textuel à afficher.
`size`	String	`null`	Taille du texte : `'small'`, `'medium'`, `'large'`.
`type`	String	`null`	Type de message : `'success'`, `'danger'`, `'warning'`, `'info'`.
`color`	String	`null`	Couleur personnalisée du texte si `type` n'est pas défini.
`font-weight`	String	`null`	Épaisseur du texte : `'light'`, `'normal'`, `'bold'`.
`text-align`	String	`null`	Alignement du texte : `'left'`, `'center'`, `'right'`.
`text-transform`	String	`null`	Transformation du texte : `'uppercase'`, `'lowercase'`, `'capitalize'`.
`text-decoration-line`	String	`null`	Style de décoration du texte : `'overline'`, `'line-through'`.
`clamp`	Boolean	`null`	Permet de limiter le texte à un nombre spécifique de lignes.
`italic`	Boolean	`false`	Applique le style italique au texte.
`underline`	Boolean	`false`	Applique le style souligné au texte.

Composant Title

Type du titre

La prop type permet de définir le type de balise pour le titre Les différents choix possibles sont : h1, h2, h3, h4, h5, h6.

Couleur du titre

La prop color permet de définir la couleur du titre. Par défaut, elle est définie sur text-black.

Transformation du titre

La prop text-transform permet de transformer le titre en majuscules, minuscules ou capitalisées. Les valeurs possibles sont : uppercase, lowercase, capitalize.

Titre en italique

La prop italic permet de définir si le titre doit être en italique. Par défaut, elle est définie sur false.

Titre souligné

La prop underline permet de définir si le titre doit être souligné. Par défaut, elle est définie sur false.

Api du composant

Propriété	Type	Défaut	Description
`text`	String	Requis	Le texte à afficher dans le composant.
`type`	String	`'h1'`	Le type de titre à utiliser : `'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'h6'`.
`color`	String	`null`	Classe de couleur personnalisée pour le texte.
`textTransform`	String	`null`	Transformation du texte : `'uppercase'`, `'lowercase'`, `'capitalize'`.
`underline`	Boolean	`false`	Applique une ligne soulignée au texte.
`italic`	Boolean	`false`	Applique le style italique au texte.

Code Blocks

Basic Usage

Code blocks with syntax highlighting and line numbers.

Usage:

Language Support

Code blocks support various programming languages.

PHP

Component API

The CodeBlock component accepts the following props:

Prop	Type	Default	Description
`code`	String	Required	The code to display and highlight.
`language`	String	`'javascript'`	The programming language for syntax highlighting.
`showHeader`	Boolean	`true`	Whether to show the header with language and copy button.
`copyable`	Boolean	`true`	Whether to show the copy button.
`theme`	String	`'github-dark'`	The theme for syntax highlighting.
`lineNumbers`	Boolean	`false`	Whether to show line numbers.

Carrousel

Utilisation de base

vue

Lecture automatique

vue

Sans contrôles

vue

Contenu personnalisé

Diapositive 1

Diapositive 2

Diapositive 3

vue

Plusieurs éléments par diapositive

vue

API du composant

Propriété	Type	Défaut	Description
items	Array	[]	Liste d'objets avec src et alt pour les images (optionnel si utilisation de slots nommés)
autoplay	Boolean	false	Active le défilement automatique
interval	Number	5000	Intervalle entre les transitions (ms)
showControls	Boolean	true	Affiche les boutons de navigation
showIndicators	Boolean	true	Affiche les indicateurs de position
itemsPerSlide	Number	1	Nombre d'éléments par diapositive
gap	Number	0	Espace entre les éléments (en pixels)

Card

Ce composant possède les classes : relative, transition-all, duration-300, overflow-hidden.

html

Tailles de la card

La prop width permet de définir la taille de la card. Les valeurs possibles sont : small, medium, large. full,

La valeur par défaut est : medium.

Petite card

Moyenne card

Large card

Full card

Padding de la card

La prop padding permet de définir le padding de la card. Les valeurs possibles sont : none, small, medium, large.

La valeur par défaut est : medium.

Sans padding

Petit padding

Padding moyen

Grand padding

Margin de la card

La prop margin permet de définir la marge de la card. Les valeurs possibles sont : none, small, medium, large.

La valeur par défaut est : medium.

Sans margin

Petite margin

Margin moyenne

Grande margin

Arrondi de la card

La prop rounded permet de définir le rayon des bords de la card. Les valeurs possibles sont : none, small, medium, large.

La valeur par défaut est : medium.

Sans arrondi

Petit arrondi

Arrondi moyen

Grand arrondi

Shadow de la card

La prop shadow permet de définir l'ombre de la card. Les valeurs possibles sont : none, small, medium, large.

La valeur par défaut est : medium.

Aucune ombre

Petite ombre

Ombre moyenne

Grande ombre

Background de la card

La prop background permet de définir le background de la card.

La valeur par défaut est : bg-white.

Fond blanc

Fond gris clair

Fond bleu

Fond vert

Actions sur la card

La prop action permet de définir une action lors du click sur cette card.

Les classes ajoutés sont : shadow-lg et cursor-pointer. Il est possible de changer le shadow en ajoutant la propriété shadow.

Cliquer sur cette card pour changer le background

API du composant

Prop	Type	Défaut	Description
`width`	String	'full'	Définit la largeur de la carte
`padding`	String	'medium'	Définit l'espace intérieur de la carte
`margin`	String	'medium'	Définit la marge extérieure de la carte
`rounded`	String	'medium'	Définit l'arrondi des bords
`shadow`	String	'medium'	Définit l'intensité de l'ombr
`background`	String	undefined	Définir une couleur de fond personnalisée
`action`	Function	undefined	Fonction appelée lors du clic sur la carte

Composant Select

Le composant UISelect permet de créer des menus déroulants avec sélection simple ou multiple, incluant une fonction de recherche intégrée.

Variantes

Le select peut être utilisé en mode simple ou multiple, avec ou sans recherche.

Select simple

Sélectionnez une option

Choisir une option

Select multiple

Sélectionnez plusieurs options

Choisir des options

Select avec recherche

Rechercher une option

Rechercher...

html

Tailles

Trois tailles sont disponibles pour le select : size="small", size="medium" (par défaut) et size="large".

Petite taille

Select petit

Sélectionner une option

Taille moyenne (par défaut)

Select moyen

Sélectionner une option

Grande taille

Select grand

Sélectionner une option

html

États

État désactivé

Select désactivé

Sélectionner une option

État d'erreur

Select avec erreur

Sélectionner une option

Veuillez sélectionner une option

État requis

Select requis *

Sélectionner une option

html

Options personnalisées

Le select peut utiliser des objets comme options, avec des propriétés personnalisées pour les valeurs et les libellés.

Options avec objets

Select avec options personnalisées

Sélectionner une option

Avec icône

Select avec icône

Sélectionner une option

html

API du composant

Prop	Type	Défaut	Description
`modelValue`	String \| Number \| Array \| Object	null	Valeur(s) sélectionnée(s) (v-model)
`options`	Array	[]	Liste des options disponibles
`valueKey`	String	'value'	Propriété à utiliser comme valeur (pour les objets)
`labelKey`	String	'label'	Propriété à utiliser comme libellé (pour les objets)
`multiple`	Boolean	false	Mode de sélection multiple
`searchable`	Boolean	false	Activation de la recherche
`id`	String	undefined	ID du select (généré automatiquement si non fourni)
`placeholder`	String	'Sélectionner une option'	Texte d'exemple
`label`	String	''	Libellé du select
`required`	Boolean	false	Indique si le select est requis
`infoText`	String	''	Texte d'information supplémentaire
`infoTextAlwaysVisible`	Boolean	false	Affiche toujours le texte d'info (sans bulle)
`helpText`	String	''	Texte d'aide/description
`icon`	Component	null	Icône à afficher dans le select
`disabled`	Boolean	false	Désactive le select
`error`	Boolean	false	Indique une erreur de validation
`errorMessage`	String	''	Message d'erreur à afficher
`size`	String	'medium'	Taille du select (small, medium, large)

Événements

Événement	Description
`update:modelValue`	Émis lorsque la valeur sélectionnée change
`change`	Émis lorsque la sélection change

html

Line Separator

Le composant Line Separator permet de créer des séparateurs visuels entre les sections de contenu.

Exemples de base

Contenu au-dessus du séparateur

Contenu en-dessous du séparateur

Variantes

Le composant Line Separator peut être personnalisé avec différentes variantes de couleur, marge, épaisseur et style.

Couleurs

Marges

Épaisseurs

Styles

API du composant

Prop	Type	Valeur par défaut	Description
color	string	'gray-200'	Couleur de la ligne (gray-100 à gray-900)
margin	string	'medium'	Marge verticale (none, small, medium, large)
thickness	string	'medium'	Épaisseur de la ligne (thin, medium, thick)
style	string	'solid'	Style de la ligne (solid, dashed, dotted)

Composant Table

Le composant UITable est un composant de tableau interactif avec support du tri, de la personnalisation des cellules et des états de chargement.

Utilisation de base

Affichez des données tabulaires avec un simple jeu de colonnes et de données.

Nom	Âge	Email
Jean Dupont	32	jean@example.com
Marie Curie	45	marie@example.com
Pierre Martin	28	pierre@example.com
Sophie Dubois	35	sophie@example.com
Lucas Bernard	41	lucas@example.com
Emma Laurent	29	emma@example.com
Olivier Girard	38	olivier@example.com
Camille Girard	31	camille@example.com
Alexandre Girard	33	alexandre@example.com
Thomas Dubois	37	thomas@example.com

Rows per page:1-10 of 100

html

Personnalisation des cellules

Personnalisez le rendu des cellules en utilisant des slots ou des fonctions de rendu.

Produit	Prix	Stock
T-shirt	€29.99	En stock
Chaussures	€89.99	Rupture
Sac à dos	€49.99	En stock
Pantalon	€59.99	En stock
Veste	€129.99	En stock
Chapeau	€24.99	Rupture
Écharpe	€19.99	En stock

Rows per page:1-7 of 100

html

État de chargement

Affichez un état de chargement pendant le chargement des données.

Nom	Âge	Email

html

État vide

Affichez un message personnalisé lorsque le tableau ne contient aucune donnée.

Nom	Âge	Email
No data available

html

API du composant

Prop	Type	Défaut	Description
`columns`	Array	`[]`	Configuration des colonnes
`data`	Array	`[]`	Données à afficher
`loading`	Boolean	`false`	Affiche un état de chargement
`pagination`	Object	`{ currentPage: 1, totalItems: 0, perPage: 10, showControls: true }`	Configuration de la pagination
`currentSort`	Object	`{ key: null, direction: 'asc' }`	Configuration du tri
`sortable`	Boolean	`false`	Active le tri des colonnes
`emptyText`	String	`'No data available'`	Texte à afficher quand il n'y a pas de données