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
Floating Label (Nouveau)
Veuillez entrer une email valide
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
QR Code
Génération de QR codes avec logo ColisMove
Scanner pour suivre
CM-2024-78542
Scannez pour suivre votre colis
Profil utilisateur
Composants pour afficher et gérer le profil
Avatars
Carte de profil
Jean Dupont
jean.dupont@email.com
En-tête de profil
Jean Dupont
jean.dupont@email.com
+33 6 12 34 56 78
Paris, France
Note
124
Avis
89
Livraisons
Notation et signalement
Noter ce transporteur
Signaler un problème
Menu du profil
Upload de fichiers
Téléchargement de documents et photos
Glissez vos fichiers ici
ou parcourez vos fichiers
Max 10MB • 5 fichiers max
Dashboard
Expéditions
1,234
+12%
Utilisateurs
856
+5%
Revenus
€24.5K
+18%
Litiges
3
-2
Redimensionnez la fenêtre pour voir la navbar mobile • Cliquez sur "Ouvrir en plein écran" pour tester le mode fullscreen
Sélecteur de catégories
Sélection multiple avec badges
Catégories sélectionnées:
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
Carte d'annonce mobile
Affichage compact des annonces pour mobile
Poids disponible: 20.0 KG
Lyon, France
Douala, Cameroun
Isadoramadame
É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