Composants SDK
Galerie interactive des composants UI haute performance. Explorez, testez et intégrez nos primitives métier de qualité entreprise en toute simplicité.
Titre 1 (Heading 1)
text-4xl font-bold tracking-tight
Titre 2 (Heading 2)
text-3xl font-semibold tracking-tight
Titre 3 (Heading 3)
text-2xl font-semibold tracking-tight
Titre 4 (Heading 4)
text-xl font-semibold tracking-tight
Ceci est un paragraphe standard utilisé pour le contenu textuel régulier. Il a un interligne confortable et une taille de police par défaut.
leading-7
Classes Sémantiques (Design System)
Body Medium SemiBold (15px)
.text-body-medium-semibold
Body Small Bold (14px)
.text-body-small-bold
Body Small SemiBold (14px)
.text-body-small-semibold
Body Caption Medium (12px)
.text-body-caption-medium
Utilitaires Standards
Texte secondaire ou d'aide.
Texte très petit pour les métadonnées.
Navigation & Actions Communes
Fichiers & Organisation
Communication & Sécurité
Interface & Éditeur
Mise en Forme de Texte & Tri
États des Inputs (Input Groups)
Sélection & Zone de texte
OTP Input (6 caractères)
Membres de l'équipe 5
| Nom | Rôle | Statut | Actions |
|---|---|---|---|
CP Caroline PETITc.petit@petit-sas.fr | Lecture seule | En attente | |
MR Marc RENAULTmarc.renault@batifranc.fr | Chargé de dossier | Actif | |
SM Sophie MORRINsophie.morrin@batifranc.fr | Chargé de dossier | Actif | |
LB Lucie BERNARDlucie.bernard@batifranc.fr | Lecture seule | Actif | |
JD Jean DUPONTjean.dupont@batifranc.fr | Administrateur | Actif |
Closing let timepoint exploratory illustration. Savvy run version points
Contrat.pdf
PDF • 1.5 MB
Bilan_2025.docx
DOCX • 2.1 MB
Badges de statut (Système)
Avatar Initials
Simple (Email)
L'utilisateur reçoit un code par email
Alternative (Email ou SMS)
L'utilisateur reçoit un code par email
L'utilisateur reçoit un code par sms
Action Poursuivre
L'utilisateur poursuit le flow de création de son compte Dataroom
Aucune donnée disponible
Créez votre première entrée pour commencer l'exploration.
Pilotez vos dossiers de financement.
Accédez à votre console BATIFRANC pour piloter les dossiers, les utilisateurs et la conformité.
Phase Status Badge
Doc Count Pill
Stat Badge
Upload Progress Bar
contrat-crylia-v2.pdf
En cours d'importation – 67%
Document Status Icons
import { AuthFormField, AuthPasswordField, AuthPhoneField } from '@/features/auth/components'
AuthFormField — states
Adresse email invalide
AuthPasswordField — states
Minimum 12 caractères requis
AuthPhoneField — French flag prefix
Numéro de téléphone invalide
AuthPasswordChecklist — live reactive
Tapez dans le champ mot de passe ci-dessus
- -Min. 12 caractères
- -Min. 1 majuscule
- -Min. 1 chiffre
- -Min. 1 caractère spécial
AuthDivider — séparateur entre sections
import { AuthOtpInput } from '@/features/auth/components'
État normal
État erreur (bordures rouges)
État désactivé
import { AuthOtpStep } from '@/features/auth/components' — channel: 'email' | 'sms'
Canal email (interactif — cliquer Continuer pour voir l'erreur)
Vérification
Veuillez saisir le code reçu par email :
Canal SMS (état initial)
Vérification
Veuillez saisir le code reçu par SMS :
import { AuthAlert } from '@/features/auth/components'
AuthBackLink (router) · AuthStepBackButton (state) · AuthFormHeader
AuthBackLink — Next.js Link (navigation router)
Retour à la connexionAuthStepBackButton — onClick (navigation par état)
AuthFormHeader
Se connecter
Bienvenue sur Dataroom, connectez-vous.
import { AuthSuccessScreen } from '@/features/auth/components' — props: title, description, ctaLabel, ctaHref
Admin — création compte
Votre compte est créé !
Félicitations, votre espace sécurisé est dorénavant actif.
Admin — reset mot de passe
Mot de passe modifié !
Vous pouvez désormais vous connecter avec votre nouveau mot de passe.