Design System ColisMove
Un système de design moderne avec une palette orange, noir et blanc. Construit sur ShadCN et Tailwind CSS v4.
Statistiques
124
Livraisons
2,341
Réservations
€8.5K
Revenus
1,892
Utilisateurs
Suivi des colis
Colis CM-2024-78542
En transit
Départ
Paris
Est. 15 Jan
Lyon
CM-2024-78541
CM-2024-78540
Historique récent
Documents importants
CM-2024-78539
Électronique
CM-2024-78538
Historique de suivi
Poids
2.5 kg
Livraison
15 Jan
Colis reçu
Pris en charge à l'entrepôt de Paris
En transit
Départ vers le centre de tri Lyon
Centre de tri
Arrivé au centre de tri de Lyon
En livraison
Prévu pour livraison
Indicateurs de progression
Progress linéaires
Barres de progression avec variantes et labels
Basique avec valeur
Avec labels et description
Téléchargement
78% Fichiers en cours...
Espace utilisé
92% Stockage presque plein
Onglets
Styles d'onglets
Variantes solides avec couleurs ColisMove
Default
Solid
Solid Primary (orange actif)
Tailles
Exemple fonctionnel
Onglets avec contenu
Jean Dupont
Paris → Lyon
Marie Laurent
Marseille → Nice
Composants
Boutons
Différentes variantes et tailles de boutons
Badges de statut
Avec icônes automatiques selon le variant
Solid (fond plein) - Recommandé
Statuts prédéfinis
Soft (fond clair)
Outline (bordure)
Tailles
Contrôles de formulaire
Inputs avec icônes, variants et états
Inputs avec icônes
Mot de passe avec indicateur
Mot de passe fort
Variants
États
Adresse email invalide
Choisissez un nom unique
Création d'annonce
Formulaire multi-étapes pour publier une annonce de transport
Authentification
Nouveaux composants
Spinners et chargement
Indicateurs de chargement de différentes tailles
Stepper
Indicateur de progression pour formulaires multi-étapes
Trajet
Détails
Catégories
Confirmation
Sélecteurs de date
Date simple et plage de dates
Numéro de téléphone
Input avec sélecteur de pays intégré
Mot de passe
Input avec indicateur de force et règles de validation
Saisie de code
Pour les codes de dépôt et livraison à 5 chiffres
Entrez le code à 5 chiffres
Sélecteur de catégories
Sélection multiple avec badges
Exemple de badges:
Portefeuille
Affichage du solde et actions
1 250,50 €
45,00 € en attente
Boutons de copie
Copier du texte dans le presse-papiers
Dialogues de confirmation
Demandes de confirmation pour actions importantes
États vides et erreurs
Affichage quand il n'y a pas de données
Aucune annonce
Vous n'avez pas encore créé d'annonce de transport.
Erreur de chargement
Impossible de charger vos réservations.
Palette de couleurs
Primary
Orange ColisMove
Noir
Textes et cards
Blanc
Background et cards
Success
Confirmations