bytosUI
Marque Blanche
Un socle visuel cohérent et personnalisable. Tous les tokens sont des variables CSS — modifiez :root pour adapter l'identité en quelques secondes.
Sélectionnez un composant ou une fondation dans la barre latérale pour l'explorer.
Couleurs
Palette construite autour d'une couleur primaire, secondaire et d'états sémantiques.
Primaire
--color-primary--color-primary-light--color-primary-darkSecondaire
--color-secondary--color-secondary-light--color-secondary-darkTertiaire
--color-tertiary--color-tertiary-light--color-tertiary-darkÉtats sémantiques
Neutres
Typographie
Google Sans Flex — police variable, une échelle modulaire et des graisses expressives.
--font-sans
Google Sans Flex
Alphabet
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 — & @ # ! ?
Graisses
Espacements
Échelle de 4 px — base de la grille Tailwind (1 unit = 4px).
Rayons & Ombres
Tokens visuels pour les coins et la profondeur.
Border Radius
Ombres
shadow-sm
shadow-md
shadow-lg
shadow-xl
Formulaires
Champs, états et messages d'aide.
Votre prénom et nom de famille.
Le mot de passe doit faire au moins 8 caractères.
Préférences
Dropdown List
Sélection simple, multiple et avec recherche.
Sélection simple
Avec recherche
Multi-sélection
Avec groupes
Date Picker
Cliquez sur l'icône calendrier pour ouvrir le sélecteur.
Légende
Aperçu du calendrier
Badges & Tags
Étiquettes sémantiques et labels de statut.
Badges sémantiques
Soft (fond clair)
Tags (avec fermeture)
Statuts avec point
Cards
Conteneurs polyvalents pour structurer l'information.
Card simple
Titre de la carte
Description courte donnant du contexte sur le contenu de cette carte.
Card avec image
Contenu après un visuel d'en-tête.
Chiffre d'affaires
+12 %84 320 €
vs mois précédent
Card interactive
Survol pour l'effet d'ombre. Cliquable.
Jean Dupont
ActifDéveloppeur Full-Stack · jean@example.com
Alertes & Notifications
Retours contextuels pour informer, avertir ou signaler une erreur.
Information
Une mise à jour est disponible. Rechargez la page pour appliquer les changements.
Enregistré avec succès
Vos modifications ont bien été prises en compte.
Attention
Votre abonnement expire dans 7 jours. Pensez à le renouveler.
Erreur critique
Impossible de se connecter au serveur. Vérifiez votre connexion internet.
Toast / Notification flottante
Checkbox
Cases à cocher avec tous les états et variantes de groupe.
États
Avec description
Toggle Switch
Groupe avec "Tout sélectionner"
Radio
Sélection unique dans un groupe d'options.
États
Avec description
Radio Cards
Starter
Jusqu'à 3 projets, 1 utilisateur.
9 € / mois
Pro
Projets illimités, 10 utilisateurs.
29 € / mois
Enterprise
Sur mesure, SLA garanti.
Sur devis
Pill Group
Icônes
Bibliothèque Heroicons
intégrée via iconify-icon. Usage :
<iconify-icon icon="heroicons:home"></iconify-icon>
Variantes (même icône — home)
Outline (24px)
heroicons:home
Solid (24px)
heroicons:home-solid
Mini (20px)
heroicons:home-20-solid
Micro (16px)
heroicons:home-16-solid
Tailles
Couleurs sémantiques
Icônes courantes (outline)
Découvrez les 300+ icônes sur heroicons.com.
Exemples dans les composants
Toast
Notifications transitoires empilables. Cliquez sur un bouton pour tester.
Variantes
Modifications enregistrées
Votre profil a été mis à jour avec succès.
Échec de l'envoi
Impossible de contacter le serveur. Réessayez.
Stockage presque plein
Il reste moins de 5% d'espace disponible.
Nouvelle mise à jour disponible
La version 2.4 inclut plusieurs améliorations.
Démo interactive
API : showToast(type, title, description, duration?)
— types : success, error, warning, info.
Tooltip
Info-bulles contextuelles déclenchées au survol, au focus clavier ou au clic.
Positions (survol)
Déclenchement
Hover / Focus clavier (Tab)
Focus sur un champ
Click (toggle)
Variantes visuelles
Usages courants
Le paiement sera effectué via SEPA Single Euro Payments Area — virement européen standard sous 2 jours ouvrés.
Progress Bar
Indicateurs de progression linéaires et circulaires.
Tailles
Couleurs sémantiques
Variantes animées
Avec rayures (téléchargement en cours)
Indéterminé (progression inconnue)
Segmenté — étapes
Démo interactive
rapport-annuel-2026.pdf
0% · 0 Mo / 24 Mo
Circulaire
Tabs
Navigation par onglets : souligné, pilules, segmenté, vertical.
Souligné (défaut)
Tableau de bord récapitulant les indicateurs clés du projet : utilisateurs actifs, revenus, conversion.
Analyse détaillée avec graphiques interactifs et filtres par période.
Gestion des membres de l'équipe, rôles et permissions.
Configuration générale de l'application : langue, notifications, intégrations.
Pilules
Données agrégées sur les dernières 24 heures.
Données agrégées sur les 7 derniers jours.
Données agrégées sur le mois en cours.
Données agrégées sur l'année en cours.
Segmenté
Affichage en grille — idéal pour les aperçus visuels.
Affichage en liste compacte avec métadonnées inline.
Affichage tabulaire avec colonnes triables et densité élevée.
Vertical (side nav)
Informations du profil
Mettez à jour votre nom, votre adresse email et votre photo de profil.
Sécurité du compte
Mot de passe, authentification à deux facteurs et sessions actives.
Préférences de notification
Choisissez les événements pour lesquels vous souhaitez recevoir un email.
Plan & facturation
Gérez votre abonnement, consultez vos factures et modifiez votre moyen de paiement.
Clés API
Créez et gérez des jetons d'accès pour l'API bytosUI.
Modal
Boîtes de dialogue superposées : confirmation, formulaire, alertes.
Ouvrir un modal
Tailles disponibles
SM
max-width: 360px
MD (défaut)
max-width: 480px
LG
max-width: 640px
XL
max-width: 860px
Fermeture : clic en dehors, bouton ✕, ou touche Echap.
Slider
Sélection d'une valeur dans une plage définie — mono-poignée et double poignée (range).
Simple
Avec bornes min/max
Par paliers (step = 25)
Tailles
Couleurs
Désactivé
Range (double poignée)
Textarea
Zone de saisie multi-lignes avec états, compteur, auto-resize et toolbar.
Basique
Entre 50 et 500 caractères recommandés.
États
Le contenu contient des caractères non autorisés.
Votre message a été vérifié avec succès.
Compteur de caractères
L'indicateur passe en orange puis rouge à l'approche de la limite.
Auto-resize (grandit avec le contenu)
La hauteur s'ajuste à chaque saisie, sans barre de redimensionnement.
Avec toolbar (rich text look)
File Selector
Sélection de fichiers : bouton simple, dropzone, avatar et liste de fichiers.
Bouton simple
Dropzone (glisser-déposer)
Avatar / Photo de profil
Photo de profil
JPG, PNG ou GIF. 2 Mo max.
Aperçu : liste de fichiers
rapport-annuel-2026.pdf
capture-dashboard.png
demo-produit.mp4
assets-v2.zip
video-brute.mov
Data Table
Tableau de données complet : tri, sélection multiple, recherche, pagination, actions par ligne.
Table complète — utilisateurs
| Utilisateur | Rôle | Statut | Dernière connexion | Actions |
|---|
Variante compacte (densité élevée)
| Produit | SKU | Stock | Prix | État |
|---|---|---|---|---|
| Casque Bluetooth Pro | CBT-01 |
128 | 149,00 € | En stock |
| Clavier mécanique TKL | KBD-TKL |
12 | 89,50 € | Stock faible |
| Souris ergonomique | MSE-ERG |
0 | 45,00 € | Rupture |
| Station d'accueil USB-C | DOCK-USBC |
67 | 119,00 € | En stock |
État vide
Aucune donnée pour le moment
Vos futurs utilisateurs apparaîtront ici.
Divider
Séparateurs horizontaux et verticaux — pleins, pointillés, avec texte ou icône.
Horizontal — styles
Plein (défaut)
Tireté
Pointillé
Épais (2px)
Très épais (3px)
Couleurs
Neutre (défaut)
Primaire
Secondaire
Succès
Warning
Danger
Avec contenu (texte / icône / chip)
Vertical (inline)
1 284
Utilisateurs
92%
Satisfaction
48k€
MRR
Dans un formulaire
Pagination
Navigation paginée : numérotée, compacte, avec ellipses, sélecteur de taille.
Numérotée — interactive
Avec ellipses (> 7 pages)
Variante « bordered » (continue)
Compact
Minimal (prev / next textuels)
Avec sélecteur de taille et résumé
Avatar
Représentation visuelle d'un utilisateur : image, initiales, icône, statut et groupes empilés.
Tailles
Types de contenu
Couleurs d'initiales
Pleines
Soft (teintées)
Indicateur de statut
Avec nom & rôle
Thibaut Pouyet
Designer · thibaut@bytos.design
Marie Lefèvre
Product Manager
Sophie Nakamura
Admin · Équipe produit
Groupe empilé
Différentes tailles