Découvrons Daisy UI (et mettons Bootstrap au placard)

⚠️ Trigger warning : Si vous êtes adeptes de Bootstrap prenez une camomille avant de lire cet article.

Daisy UI, présentation

Daisy UI est ce dont on appelle une librairie, plus précisément une librairie de composants. Par ce terme voyez des éléments d’UI réutilisables de part et d’autre de votre site ou votre application (comme des boutons, des inputs, …).

Le but d’une librairie de ce type est de vous fournir des composants réutilisables, simples à intégrer, et ainsi de vous gagner un temps précieux de développement, tout en vous proposant une expérience de personnalisation.
Bref, ne pas réinventer la roue, et telle est la motivation de l’équipe derrière Daisy Ui.

Encore une librairie ?

En effet, le paysage du développement frontend s’est peuplé de nombreuses librairies au fil des années, entre le mal aimé Bootstrap, le complexe Material UI, le très trendy Shadcn UI, et d’autres, le choix est parfois difficile lorsqu’on souhaite éviter de passer des heures à créer ses propres composants.

Certes, mais là où Daisy UI tire sa pétale du jeu c’est dans l’équilibre entre simplicité d’utilisation, et liberté de customisation. Et ça c’est essentiellement lié au fait que cette librairie est entièrement basée sur Tailwind CSS 💙

Et Tailwind CSS c’est chouette ! A condition bien sûr que l’on ai déjà de bonnes bases en CSS ! Il est toujours utile de le rappeler.

Qu’est ce que Daisy UI a de plus que les autres ?

Avant de répondre à cette question faisons un bref topo des solutions connues à ce jour, afin de mieux comprendre pourquoi j’aime tant Daisy UI, et pourquoi vous allez l’aimer.

• Bootstrap : Ne perdons pas de temps sur Bootstrap, cette librairie a eu son heure de gloire, jadis. A ce jour je vois aucun intérêt à se faire du mal avec Bootstrap, même pour du prototypage à la va-vite. Et puis Benjamin Code résume mieux cela que moi.
• Material UI : Lib basée sur le fameux Material Design de Google, Material UI propose une multitude de composants avec la possibilité de les personnaliser à sa guise. A condition de passer du temps à le faire … En effet, je bosse depuis deux ans sur un projet utilisant Material UI et il m’arrive souvent; par dépit, de créer mes composants à la main en pur CSS, car cela me prend parfois moins de temps que de customiser un composant proposé par Material UI. Le pire, c’est que selon le composant, les options varient du tout au tout.
• Shadcn UI : Le petit nouveau dont tout le monde parle. Alors je vous vois venir en me disant qu’il s’agit pas d’une librairie. Oui, en effet, chaque component est un package que l’on installe selon ses besoins, mais la finalité reste la même.
  A son sujet je n’ai pas trop d’avis pour le moment, j’ai essayé d’échapper au ‘Shiny Object’ pour le moment. J’ai créé une page avec, mais sans aller plus loin. Néanmoins je vous laisse essayer Shadcn UI, qui a d’excellents retours, et qui pourrait facilement remplacer un Material UI en perte de vitesse.

Les petits plus de Daisy UI

• Comme indiqué précédement Daisy UI se base sur Tailwind CSS pour mettre en forme ses différents composants. Ce qui est déjà un réel avantage. En effet, si vous êtes déjà familiers avec Tailwind et ses classes utilitaires vous allez vite pouvoir intégrer et customiser les composants proposés par cette bibliothèque ! 🎨
• La légèreté. Contrairement à d’autres bibliothèques comme Material UI ou Bootstrap, Daisy UI utilise pas (ou alors très peu) de JavaScript. 🪁
• Ne dépend qu’aucun framework ! Que vous utilisez React, Vue, Angular, Laravel, … peu importe, Daisy UI s’affranchit de tout cela. Contrairement à Material UI qui par exemple dépend de React, et demande de ce fait des compétences supplémentaires. ⚙️
• Une gestion des thèmes juste KAWAII ! (voir paragraphe suivant) 🥺

Vous voyez, beaucoup d’avantages autour de Daisy UI ! Mais à mes yeux le plus important reste la manière dont les thèmes peuvent être gérés.

Customisation et theming

Personnalisation

Vu que Daisy UI utilise Tailwind CSS sous le capot la personnalisation des différents composants est facilitée, prenons l’exemple de bouton de type CTA (Call To Action).

Cet élément est le bouton de base fourni par Daisy UI, et voici son code

<a role="button" onClick={handleButtonClick}  className="btn btn-primary">{btnText}</a>

Les classes btn btn-primary récupèrent les variables du composant bouton, à savoir la couleur bleu de background, la taille de font, …

Si je veux par exemple le rendre plus imposant et lui ajouter une ombre couleur citron vert (pourquoi pas), il me suffit d’ajouter la classe btn-lg (propre à Daisy UI), ainsi que la classe Tailwind correspondant à l’ombre discutable.
Ce qui nous donne ceci :

<a role="button" onClick={handleButtonClick} className="btn btn-primary btn-lg shadow-lg shadow-lime-700">{btnText}</a>

Theming

Oubliez vos themeProvider et autres éléments verbeux permettant de swticher entre différents thèmes, ici avec Daisy UI les choses sont simplifiées à l’extrême pour intégrer cette fonctionnalité bien souvent demandée ! 😎

Ici on indique dans le fichier de configuration (tailwind.config.js) Tailwind le ou les thèmes que l’on souhaite utiliser dans notre site / application.

module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "dark", "cupcake", "bumblebee", "synthwave", "corporate", "retro", "cyberpunk", "valentine", "halloween", "garden", "forest", "aqua", "lofi", "pastel", "fantasy", "wireframe", "black", "luxury", "dracula", "cmyk", "autumn", "business", "acid", "lemonade", "night", "coffee", "winter"],
  },
};

Ou bien si vous passez directement par le fichier .css (nouvelle version de Tailwind) :

@plugin "daisyui" {
   themes: light --default, dark --prefersdark;
 }

Il vous suffit ensuite d’indiquer le thème sélectionné dans votre balise html via l’attribut data-theme :

<html data-theme="synthwave">
  <body>
    <button class="btn">Coucou</button>
  </body>
</html>

Et voilà ! C’est simple comme bonjour !

Oui, mais si je veux switcher d’un thème à l’autre ?

C’est tout aussi simple, on fait une petite fonction permettant de switcher sur un thème (exemple en React) :

const switchTheme = (theme) => {
  document.documentElement.setAttribute("data-theme", theme);
};

Puis on ajoute par exemple dans le DOM un élément permettant à la magie d’opérer 🧙

<button onClick={() => switchTheme("dark")}>Dark</button>
<button onClick={() => switchTheme("light")}>Light</button>

Bien sûr, ceci est un exemple basique, mais la logique est là !

Bonus : créez votre propre thème ! 🌈

Vous avez deux solutions pour créer votre propre thème avec Daisy UI :

• La première consiste à modifier les variables de Daisy UI directement dans votre fichier .css, comme vous le faites peut être déjà avec Tailwind.
• La seconde, je vous laisse découvrir 😎

Conclusion et expérience personnelle

J’avoue être un partisan du « Do it yourself » quand il s’agit de créer des composants de type UI, quitte à passer des heures à créer des prototypes, à écrire du css à la main. Mais bien souvent je me retrouve avec des résultats proches de ce que la majorité des librairies proposent. Ce qui est pas étonnant puisque ces éléments respectent des règles établies en ce qui concerne l’UX/UI. On ne peut pas faire preuve de trop fantaisie sur des composants réutilisables qui plus est; permettent bien souvent des interactions importantes sur notre site ou application (un CTA mal positionné, trop en retrait, et cela fait des ventes en moins).

Mais bien souvent on connait ce type de librairies par le prisme de Bootstrap ou de Material UI; ce qui a tendance à nous donner une fausse image de celles ci, et pire; nous rebuter quant à leur utilisation. Cela a été longtemps mon cas, jusqu’à ce que je découvre des librairies plus friendly comme Daisy UI et Shadcn UI que j’ai un peu essayé et qui partage un peu la même philosophie !

A mon sens ces librairies permettent de gagner du temps sur des projets où l’efficacité et le fonctionnel priment sur le côté « artistique ». Tout comme Tailwind ne remplacera jamais une feuille de style complète pour votre site en mode creative developper. Mais pour le reste, ces librairies sont un atout à ne pas négliger dans votre stack. Excepté pour Bootstrap 😊