4 bonnes raisons d'utiliser Chakra UI dans votre prochain projet
Mateusz Wójcik
19 janv. 2021・4 min de lecture
Qu’est-ce que Chakra UI ?
La page d’accueil de Chakra UI indique que c’est une bibliothèque de composants simple, modulaire et accessible, qui permet de créer des applications React rapidement. Après avoir livré quelques projets où nous avons utilisé Chakra, je confirme cette description. Concevoir des interfaces n’a jamais été aussi rapide et pratique.
Vous connaissez peut-être des bibliothèques comme Material UI, Ant Design ou React Bootstrap. Et vous vous demandez peut-être pourquoi vous auriez besoin d’une autre bibliothèque UI alors qu’il existe déjà de nombreuses options éprouvées. Eh bien, Chakra se distingue principalement par ses excellentes fonctionnalités intégrées, son accessibilité et son haut niveau de personnalisation.
Les avantages de Chakra UI
Facile à personnaliser
L’un des plus grands atouts de Chakra UI est que vous pouvez l’adapter très facilement à vos besoins de design. En général, on commence par un thème personnalisé pour définir les couleurs, les tailles de police, les breakpoints pour le responsive, les ombres, et bien plus encore ! Cela offre déjà beaucoup de flexibilité pour créer des interfaces avancées, mais ce n’est pas tout.
Chaque composant que vous utilisez accepte de nombreuses props que vous pouvez exploiter pour le styliser.
Par exemple, examinons l’usage simple du composant `<Button>` dans Chakra UI :
```jsx <Button colorScheme="teal" variant="outline" size="lg" isLoading={loading} loadingText="Loading"> Click me </Button>Avec ce bout de code, Chakra rendra un bouton avec les styles fournis par le thème.
Mais voyons maintenant comment modifier son style avec quelques props :
```jsx <Button colorScheme="red" variant="solid" size="md" isLoading={false}> Click me </Button>Dans cet extrait, nous passons le color scheme du bouton à une palette rouge et changeons sa variant pour obtenir un fond plein. Nous redimensionnons aussi le bouton en medium et définissons isLoading à false.
Voyons cela. D’abord, nous changeons le color scheme du bouton pour utiliser une palette teal. Ensuite, nous modifions sa variant pour n’avoir qu’une bordure au lieu d’un fond complet. Puis nous rendons tout le bouton plus grand. Au-delà du style, on peut aussi changer le comportement du bouton. Quand la valeur de “isLoading” est true, nous masquons l’icône et affichons un loader qui accepte quelques props. L’icône comme le loader font aussi partie de Chakra UI !
Si vous avez déjà utilisé TailwindCSS, très populaire ces derniers temps, ou Styled System, vous verrez des similitudes. Tailwind est un ensemble de classes CSS pour composer des composants. De leur côté, Styled System et Chakra fournissent des composants prêts à l’emploi, dont vous pouvez ajuster des styles précis via des props. Toutes ces solutions ont leurs adeptes et leurs détracteurs. Ces derniers pointent un inconvénient majeur : le code peut perdre en lisibilité à cause du grand nombre de classes/props. Bien sûr, cela peut poser problème, c’est pourquoi il est essentiel de garder nos composants concis.
Prise en charge du dark mode
Le dark mode devient une composante essentielle de notre vie numérique. On peut l’utiliser sur nos smartphones, nos ordinateurs portables et, bien sûr, sur les sites web. Même si tous les projets n’exigent pas forcément un dark mode, c’est appréciable que Chakra simplifie son implémentation. Par défaut, la plupart des composants de Chakra sont compatibles dark mode. Il suffit d’un peu de configuration et le tour est joué ! Il est aussi possible d’utiliser le system color mode : si l’utilisateur règle le dark mode par défaut sur son appareil, votre site l’adoptera automatiquement.
Responsive facilité
Chakra UI gère le responsive nativement. Vous n’avez pas besoin d’ajouter des media queries manuellement, Chakra UI propose des valeurs sous forme d’objets et de tableaux pour définir des styles responsives. À noter qu’il utilise “@media(min-width)” pour garantir une approche mobile-first.
Vous pouvez définir vos propres breakpoints dans la configuration du thème, ou utiliser ceux par défaut.
Regardons à quoi ressemble l’implémentation de la réactivité dans un composant `<Text>` basique :
```jsx <Text fontSize={["24px", null, "56px"]} textAlign={["center", null, "left"]}> Responsive Text </Text>Avec l’extrait ci-dessus, “<Text>” aura “24px” et sera centré sur tous les breakpoints.
Au lieu d’une seule valeur, nous passons un tableau de valeurs. Chakra prendra “24px” depuis la prop “fontSize” et “center” depuis “textAlign”, et les appliquera pour les écrans entre 0 et 30em (valeurs par défaut dans la config du thème). Notez ensuite le “null” : nous ne voulons pas changer les styles dans la plage 30em à 48em (toujours les breakpoints par défaut), donc nous passons null pour éviter de générer du CSS inutile. Aux derniers indices des tableaux, nous définissons “56px” et “left”, de sorte que notre texte adopte ce style pour toute taille d’écran supérieure à 48em.
Personnellement, je ne suis pas un grand fan de cette notation par tableau. Elle rend plus difficile l’identification des styles appliqués à chaque breakpoint.
Heureusement, on peut utiliser la syntaxe par objet :
```jsx <Text fontSize={{ base: "24px", md: "56px" }} textAlign={{ base: "center", md: "left" }} > Responsive Text </Text>La syntaxe change, mais le comportement reste identique.
Accessible
Nous ne le répéterons jamais assez : l’accessibilité est essentielle. Une part importante de la population vit avec un handicap, il est donc crucial de créer des interfaces accessibles. Nous devons généralement implémenter plusieurs recommandations WCAG, mais heureusement, des éléments comme les outlines appropriés et la navigation au clavier sont déjà pris en charge par Chakra. Bien sûr, ce n’est pas tout, et il faut aussi penser à la structure hiérarchique des titres ou aux attributs alt des images.
BONUS : Récemment, Chakra UI a ajouté la prise en charge des langues RTL. Désormais, il est bien plus simple de créer des composants couvrant à la fois les langues RTL et LTR.
Conclusion
Comme vous pouvez le voir, Chakra UI tient ses promesses de modularité et d’accessibilité. En plus de cela, elle est vraiment légère (375 kB minifiée, 101 kB minifiée et compressée en gzip, en gardant à l’esprit qu’en plus du core de Chakra il faut installer Emotion). D’après mon expérience, c’est l’une des meilleures bibliothèques de composants pour React !
Si vous souhaitez en savoir plus sur les bibliothèques de composants, ou déterminer laquelle convient le mieux à votre projet, nous serons ravis d’échanger avec vous. Écrivez-nous à hello@start-up.house
Digital Transformation Strategy for Siemens Finance
Cloud-based platform for Siemens Financial Services in Poland
Vous aimerez peut-être aussi...
Comment nous avons intégré SWR dans un projet et pourquoi nous l’avons adoré
SWR, une bibliothèque de Hooks pour React dédiée au data fetching à distance, offre une solution à la fois simple et puissante pour la mise en cache, la revalidation et la récupération des données dans les applications React. Découvrez comment SWR élimine la complexité de la gestion des slices d’état, accélère le développement et améliore les performances de l’UI. Parcourez des exemples d’implémentation de SWR et découvrez ses intégrations.
Kamil Polok
09 juin 2021・6 min de lecture
Comment générer un PDF à partir de code HTML dans une application React ou Node.js
Générer des PDF à partir de HTML peut s’avérer délicat, mais avec les bonnes méthodes, vous pouvez obtenir les résultats souhaités. Explorez différentes solutions, des règles CSS d’impression aux bibliothèques comme html2canvas, jsPDF et Puppeteer. Comprenez les avantages et les inconvénients de chaque approche pour trouver la meilleure solution pour votre projet. Contactez‑nous à hello@start-up.house pour plus d’informations et d’assistance. Bonne chance dans vos projets de génération de PDF !
Eugene Zolotarenko
20 mai 2021・6 min de lecture
Boostez vos connaissances tech grâce aux blogs tech de référence
Les blogs technologiques ont évolué, passant de plateformes de discussion informelles à des médias d’actualité numériques influents, qui livrent des éclairages sur des sujets variés comme l’IA, la réalité virtuelle (VR), la cybersécurité et le développement d’applications mobiles. Destinés autant aux passionnés qu’aux professionnels, ils fournissent des informations essentielles, des analyses et des prévisions sur les tendances et les avancées technologiques, façonnant notre manière de comprendre et d’interagir avec le monde numérique.
Marek Pałys
21 oct. 2023・15 min de lecture
Agents d'IA pour l'optimisation des prix et des promotions
Comment des agents autonomes fixent les prix en temps réel et ciblent avec précision les promotions — en protégeant la marge plutôt que d’accorder des remises à tous ceux qui auraient payé le plein tarif.
Marek Pałys
28 août 2026・10 min de lecture
Comprendre les bases : BaseModel vs ActiveRecord Validator dans Rails
BaseModel et ActiveRecord Validator sont des outils essentiels dans Rails pour garantir l’intégrité des données. Tandis que BaseModel centralise la logique complexe commune, ActiveRecord Validator offre une validation simple et intégrée pour les attributs individuels. Découvrez leurs différences et quand utiliser chacun pour un développement Rails plus efficace.
Marek Pałys
10 oct. 2024・8 min de lecture
Maîtriser le SEO : comment structurer votre HTML pour améliorer votre positionnement
Maîtriser des structures HTML optimisées pour le SEO est essentiel pour améliorer votre classement sur les moteurs de recherche. Ce guide couvre les balises HTML clés, les données structurées et les meilleures pratiques pour renforcer la visibilité et les performances de votre site. Mettez ces techniques en œuvre pour rendre votre site davantage optimisé pour les moteurs de recherche.
Marek Majdak
10 juil. 2024・7 min de lecture
Récemment ajoutés
Comment Startup House a réduit à 2 minutes le processus de demande de crédit-bail pour Siemens Financial Services
Le leasing, c’était autrefois des formalités papier, des contrôles de crédit manuels et des décisions qui n’arrivaient qu’aux heures de bureau. Pour Siemens Financial Services Poland, Startup House a remplacé tout cela par SimplyLease Online : une demande en ligne que les clients remplissent en environ 2 minutes et une décision de crédit automatisée rendue en environ 7 minutes, à toute heure. Cette étude de cas montre comment la plateforme a été conçue dans le cadre des standards de sécurité de Siemens Group, comment elle se connecte aux systèmes Siemens et à des fournisseurs de données externes, et ce qu’a apporté un partenariat qui dure depuis 2016. Elle se conclut par trois enseignements applicables à presque tous les produits de financement ou de crédit.
Alexander Stasiak
06 oct. 2026・5 min de lecture
Une plateforme de cybersécurité pour clients du Fortune 500 a réduit de 95 % le temps d’onboarding client grâce à un agent IA développé par Startup House
Une plateforme de gestion des cyberrisques, à laquelle font confiance des entreprises du Fortune 500, avait un problème bien connu : ses clients l’appréciaient, mais ne l’ouvraient qu’une fois par trimestre, et l’onboarding nécessitait 45 minutes de configuration guidée. Startup House a créé Aria, un agent IA intégré au produit, avec une interface à quatre niveaux qui s’adresse aux membres du conseil d’administration, aux DAF et aux RSSI dans un seul et même espace. L’onboarding a chuté de 95 % pour passer sous les 2 minutes, l’exploration des données est devenue entièrement en libre-service, et la plateforme s’est muée en outil d’aide à la décision au quotidien. Cette étude de cas décrit l’interface, l’architecture d’isolation des tenants et explique pourquoi rien de tout cela n’a nécessité de modifier la base de code principale de la plateforme.
Marek Pałys
05 oct. 2026・5 min de lecture
IA et projets numériques de Startup House : 5 chiffres clés
Les promesses sont faciles dans le développement logiciel, c’est pourquoi cet article s’en tient aux chiffres. Il passe en revue cinq résultats issus de projets clients menés par Startup House, allant d’une réduction de 95 % du temps d’onboarding grâce à un agent d’IA intégré à une baisse de 40 % des coûts de développement pour Omnipack. Chaque section précise quel type de travail a permis d’obtenir ce résultat et renvoie à l’étude de cas publique correspondante. La section finale met en avant trois principes communs à ces projets, à reprendre que vous collaboriez avec nous ou non.
Alexander Stasiak
04 oct. 2026・5 min de lecture
Développement logiciel Healthtech chez Startup House : des projets axés sur la conformité et des résultats concrets
Dans les logiciels de santé, la conformité réglementaire est soit un choix d’architecture, soit une adaptation a posteriori. Cet article montre à quoi ressemble son intégration dès le premier jour à travers trois projets Startup House : une plateforme commerciale pour Siemens Healthineers, présente dans plus de 60 pays ; un MVP pour les soins liés à la démence, affiné au fil de 7 sessions de tests utilisateurs avec des patients et des aidants ; et Doogie, une vitrine IA conforme à HIPAA, développée en 2 mois. Il explique aussi comment le RAG garantit la traçabilité des réponses cliniques de l’IA jusqu’à des sources vérifiées, et pourquoi les données des patients ne sont jamais utilisées pour entraîner les modèles. Pour les entreprises MedTech et les plateformes SaaS de santé, c’est un aperçu concret de ce que signifie une ingénierie qui met la conformité au premier plan, au-delà du label.
Marek Pałys
03 oct. 2026・5 min de lecture
Développement EdTech chez Startup House : ce que nous avons créé et ce que cela a changé
Les plateformes EdTech échouent plus souvent pour des raisons d’UX que techniques : les apprenants abandonnent, le contenu ne passe pas à l’échelle et le ROI reste invisible. Cet article montre comment Startup House évite ces écueils grâce à une livraison par phases et à de vrais tests utilisateurs, avec deux projets à l’appui. Graspify est passée d’une idée ambitieuse à une plateforme de microlearning qui a formé des centaines d’employés lors d’un événement d’entreprise, et LITTLEWINE a obtenu en 2 semaines un périmètre prêt à présenter aux investisseurs à partir de 10 entretiens utilisateurs. Nous abordons aussi des outils d’apprentissage basés sur l’IA qui ne répondent qu’à partir de contenus approuvés et peuvent être mis en ligne en à peine 2 semaines.
Alexander Stasiak
02 oct. 2026・5 min de lecture
IA dans la fintech : projets, leçons apprises et résultats de Startup House
Les clients des fintechs attendent une rapidité de niveau grand public, tandis que les régulateurs exigent un contrôle de niveau bancaire. Cet article montre comment Startup House a géré cette tension à travers trois projets : des décisions de crédit automatisées 24 h/24 et 7 j/7 pour Siemens Financial Services, une plateforme de gestion des risques cyber qui a augmenté le chiffre d’affaires de 150 % en un an, et une équipe de fintech climatique pour CHOOOSE constituée en 2 semaines. Chaque projet s’accompagne de la leçon qu’il nous a enseignée. L’article se termine par cinq règles pour l’IA dans la finance, de la nécessité de fonder chaque réponse sur des données vérifiées jusqu’à l’intégration de l’isolation des tenants dans l’architecture.
Marek Pałys
01 oct. 2026・5 min de lecture
Prêt à centraliser votre savoir-faire avec l'IA ?
Entrez dans un nouveau chapitre de la gestion des connaissances — où l'assistant IA devient le pilier central de votre expérience de support numérique.
Collaborez avec une équipe reconnue par des entreprises de premier plan.
