AccueilUI Kit - Composants
uiuiFigmaAccordionAccordion de type Tamagui.uiFigmaWeb onlyActionMenuMenu contextuel affichant une liste d'actions sous forme de liste de liens.uiAutocompleteChamp de saisie avec autocomplétion. Supporte multi-sélection, groupes, création d'options.uiExperimentalAutocompleteAddressChamp adresse basé sur Autocomplete. Le consommateur fournit les suggestions via onSearchChange/suggestions.uiFigmaAvatarAvatar avec image ou texte, de différentes tailles. Composant de type Avatar (tamagui).uiFigmaBadgeDifférents variants de badges. Composant de type Typography.uiExperimentalBottomSheetBottom sheet modaluiFigmaBreadcrumbsFil d'Ariane construit à partir de la navigation Expo Router. Tous les éléments sauf le dernier (page en cours) sont cliquables.uiFigmaButtonBoutons de type Pressable (React Native) avec différentes tailles et variants.uiFigmaCardCarte avec header, section et actions. Composant de type Box.uiCheckboxCase à cocher avec label, gestion des états et variants de taille.uiFigmaCounterBadge numérique indiquant un compteur. Utilisé dans les onglets.uiExperimentalDateInputChamps de saisie de date.uiFigmaDividerSéparateur horizontal. Équivalent à la balise <hr>.uiWeb onlyDocumentViewerViewer de documents (PDF, Image)uiWeb onlyDragAndDropFileZone de dépôt de fichiers par glisser-déposer ou clic.uiDurationInputSaisie d'une durée au format HH:MM (ex. 06:15 pour 6 heures 15 minutes).uiEmailFieldChamp email avec label. Clavier email, lowercase automatique.uiEmailInputInput email brut (sans label). Clavier email, lowercase automatique.uiFigmaEmpty StateÀ utiliser quand une liste d'objet est videuiFileFieldChamp de sélection de fichier avec label et validation MIME.uiFilterDateModal de selection d’année/moisuiFormControlEléments de construction de champs de saisie (label, input, helper text).uiGridGrille basique sur 12 colonnes (mobile et web). À utiliser avec Grid.Column.uiFigmaWeb onlyHeaderEn-tête statique avec un logo carré et le titre de l'application à gauche, et un contenu libre à droite.uiInputButtonAdornmentBouton icône avec bordure latérale, à placer en début ou fin d'input.uiInputHeadingRegroupe le label et le hint avec le bon espacement vertical.uiFigmaListItemPermet d’afficher les données d’une ressource.uiFigmaPropsLucideIconIcône de la librairie Lucide (lucide.dev/icons).uiNumberFieldChamp numérique avec label et boutons +/- sur web.uiOtpFieldChamp OTP (code à 4 chiffres) avec label.uiPageHeaderEn-tête de page : fil d’Ariane, puis titre à gauche et actions à droite. Le titre est est H1.uiPasswordFieldChamp mot de passe avec label et bascule de visibilité.uiPhoneFieldChamp téléphone avec label.uiPhoneInputInput téléphone brut (sans label). Clavier numérique téléphone.uiFigmaPopoverZone cliquable avec ouverture d’un Popover (Tamagui Popover).uiWeb onlyPriceInputInput montant avec symbole de devise (€). Masque les flèches du champ numérique.uiProgressBarBarre de progressionuiRadioGroupGroupe de boutons radio avec variantes liste et card.uiFigmaResourceListPermet d’afficher une liste d'items avec un header et un footeruiSelectSélecteur mono-valeur natif avec label, hint et états d'erreur/succès.uiSelectMultipleSélection multiple via une liste déroulante (web) ou un stub natif.uiFigmaSidebarNavigation primaire latérale. Se transforme en menu burger sur mobile. À utiliser avec SidebarItem et SidebarGroup.uiExperimentalSignatureComposant de signature par le doigt ou la souris. Différent entre web et mobile. La hauteur doit être fixe.uiSpinnerIndicateur de chargement animé disponible en trois tailles.uiSwitchInterrupteur avec label, supportant les modes contrôlé et non-contrôlé.uiFigmaTabsComposant d’onglets (tabs) basé sur tamagui.uiFigmaTagDifférents tags. Composant de type Typography.uiTextareaFieldChamp textarea multiline avec label.uiTextareaInputInput multiline. Étend TextField avec multiline activé par défaut.uiTextFieldChamp de saisie texte avec label, hint, caption d'erreur et de succès.uiTextInputArrayListe dynamique de champs texte avec ajout et suppression.uiTimeInputSaisie d'une heure d'horloge au format HH:MM (ex. 09:30 pour 9h30 du matin).uiFigmaToastToaster Tamagui. Fournit le provider global et le hook useToast.uiFigmaToolbarBottomNavNavigation bottom de type TabsExpo. À utiliser dans les layouts de navigation.uiFigmaMobile onlyToolbarTopLa ToolbarTop est un composant de navigation et d'action. A utiliser uniquement sur Mobile. Elle dispose de 3 variantes : default, large et compactLarge.Alveole UI Kit — v1.8.4