Créer de meilleures interfaces utilisateur : pourquoi ShadCN et Radix méritent votre attention

Quand il s'agit de créer des applications React modernes, évolutives et visuellement attrayantes, ShadCN et Radix sont les meilleurs amis d'un développeur.

Ces outils visent à vous faciliter la vie tout en garantissant que votre interface utilisateur est élégante, accessible et entièrement sous votre contrôle. Décomposons-les de manière décontractée et sans chichi.

ShadCN : pas seulement une autre bibliothèque

Qu’est-ce que ShadCN ?

ShadCN n'est pas votre bibliothèque de composants ou votre framework d'interface utilisateur typique.

Il s'agit plutôt d'une collection de composants réutilisables que vous pouvez copier et coller directement dans votre projet.

Ouais, vous possédez littéralement le code une fois que vous l'avez collé dans votre dépôt.

Pourquoi est-ce cool ?

• Aucune mise à jour forcée : vos composants ne changent pas comme par magie à moins que vous ne les mettiez à jour. Tant que vos dépendances sont verrouillées sur des versions spécifiques, votre interface utilisateur reste solide.
• À l'épreuve du temps : bien sûr, si les navigateurs décident de rendre obsolète quelque chose dans 10 ans, vous devrez peut-être le corriger. Mais bon, c'est un problème avec n'importe quel code.
• Logique minimale : ShadCN ne réinvente pas la roue. Il s'appuie principalement sur Radix UI et d'autres bibliothèques pour le gros du travail.

Temps de comparaison

Interface utilisateur ShadCN Interface utilisateur matérielle (MUI) Conception de fourmis ête>

	ShadCN UI	Material UI (MUI)	Ant Design
GitHub Stars	78k	94k	93k
Bundle Size	NIL	93.7kb	429kb
Components	48	66	65
Maturity	Young and fast-growing	Established library	Established library
Best For	Small or personal projects	Small to large projects	Small to large projects

Étoiles GitHub<script> // Detect dark theme var iframe = document.getElementById('tweet-1879560380336521537-907'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1879560380336521537&theme=dark" } </script> 78 000 94 000 93 000 Taille du paquet NIL 93,7 Ko 429 Ko Composants 48 66 65 Maturité Jeune et en pleine croissance Bibliothèque établie Bibliothèque établie Meilleur pour Petits projets ou projets personnels Petits et grands projets Petits et grands projets

Extras à explorer

• Thèmes : Thèmes ShadCN
  

• Blocs : Blocs ShadCN
  

• Cartes : Cartes ShadCN
  

---

Radix : l'épine dorsale de l'interface utilisateur moderne

Qu’est-ce que l’interface utilisateur Radix ?

Radix est un ensemble de primitives d'interface utilisateur sans style et accessibles

pour React.

Considérez-le comme les éléments de base de vos composants d'interface utilisateur personnalisés.

Lancé en novembre 2020, Radix a rapidement gagné en popularité parmi les développeurs qui aiment avoir un contrôle total sur leurs conceptions.

Pourquoi Radix Rocks

• L'accessibilité d'abord
 : Il est construit selon les normes WAI-ARIA, vous n'avez donc pas à vous soucier des petites choses.
• Hautement composable
 : vous pouvez utiliser uniquement les pièces dont vous avez besoin sans ajouter de ballonnement inutile.
• Liberté sans style
 : Stylisez vos composants comme vous le souhaitez. Un vent arrière ? CSS simple ? Le choix vous appartient.
• Utilisation dans le monde réel : Même Vercel
utilise les primitives Radix. (Cela veut dire quelque chose !)

Études de cas

Découvrez les études de cas de Radix, y compris la mise en œuvre de Vercel.

Temps de comparaison

	Radix UI	Headless UI (Tailwind)	Base UI (MUI)
GitHub Stars	16k	26k	2k
Bundle Size	248b	33.8kb	48.7kb
Components	28	10	20
Playground	✅	❌	❌

Interface utilisateur Radix Interface utilisateur sans tête (Tailwind) Interface utilisateur de base (MUI) ête> <script> // Detect dark theme var iframe = document.getElementById('tweet-1879560380336521537-907'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1879560380336521537&theme=dark" } </script>Étoiles GitHub 16 000 26 000 2k Taille du paquet 248b 33,8 Ko 48,7 Ko Composants 28 10 20 Aire de jeux ✅ ❌ ❌

Alerte podcast !

Vous voulez en savoir plus ? Découvrez

Bonus : composants générés par l'IA avec V0

Connaissiez-vous la V0 ? Il s’agit de l’outil d’IA générative de type chatbot de Vercel pour créer des composants d’interface utilisateur.

Propulsé par ShadCN UI et Tailwind CSS, il génère du code de composant en fonction de vos invites.

Parfait lorsque vous manquez de temps mais que vous souhaitez des composants élégants et fonctionnels.

Pensées finales

ShadCN et Radix constituent une combinaison idéale pour les développeurs qui souhaitent des composants accessibles, personnalisables et légers.

Ils sont parfaits pour les projets personnels et principalement évolutifs pour des applications plus importantes.

Avec les thèmes, blocs et graphiques ShadCN, vous prenez une longueur d'avance pour créer quelque chose de génial.

À propos, j'ai utilisé ShadCN pour créer LiveAPI, un outil de génération de documents API très pratique permettant aux développeurs backend de générer de la documentation API en quelques clics.

Cela ne prend que 2 à 4 clics et ne nécessite pas d'installer Swagger ou de rédiger des documents manuellement. Vérifiez-le !

Vite contre Webpack : la confrontation avec le bundle JavaScript

Athreya alias Maneshwar ・ 10 janvier

#webdev #javascript #programmation #débutants

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!