shadcn/ui remplace Radix par Base UI comme option par défaut

• À partir de juillet 2026, shadcn/ui fera de Base UI le flux par défaut pour les nouveaux projets et la documentation, tournant ainsi la page du choix par défaut de Radix en place depuis son lancement en 2023
• Base UI a atteint la version stable 1.6.0 et plus de 6 millions de téléchargements hebdomadaires, et il est aussi choisi deux fois plus souvent que Radix dans les projets créés avec shadcn/create
• Radix n’est pas abandonné : les applications existantes peuvent rester en l’état, et à l’exception des composants exclusifs à Base UI, les mises à jour et nouveaux composants continueront d’être proposés
• La migration est fournie non pas sous forme de codemod, mais comme une skill d’agent, permettant une transition progressive composant par composant des composants modifiés et de leurs usages, avec un rapport dans .migration/ et des commits git conservés
• Avec l’ajout de composants d’interface de chat, d’un registry basé sur des dépôts GitHub, de shadcn eject et du nouveau style Rhea, le périmètre de shadcn/ui s’élargit à la distribution de composants et à la composition d’interfaces produit dans son ensemble

---

Base UI devient la bibliothèque de composants par défaut

• À partir de juillet 2026, Base UI devient la bibliothèque de composants par défaut de shadcn/ui
• Lors de son lancement en janvier 2023, shadcn/ui a été conçu sur la base de Radix, qui représentait alors une option offrant des composants headless sans style, une API, l’accessibilité et une expérience d’usage en application réelle
• Base UI est une nouvelle bibliothèque créée par les auteurs de Radix, et shadcn/ui a recréé tous ses composants pour Base UI en conservant son abstraction existante
• En décembre 2025, npx shadcn create permettait déjà de choisir entre les deux bibliothèques, puis en janvier 2026, la documentation de Base UI a été finalisée

Pourquoi changer la valeur par défaut

• Stabilité et flux d’usage de Base UI

  • La version de Base UI est 1.6.0
  • Les téléchargements hebdomadaires dépassent 6 millions
  • L’équipe Base UI publie régulièrement de nouveaux composants utiles
  • Les nouveaux projets shadcn/ui utilisent déjà Base UI
  • Les projets générés avec shadcn/create choisissent Base UI plutôt que Radix dans un rapport de 2:1
  • shadcn/ui officialise donc ce choix comme nouvelle valeur par défaut

Ce qui change pour les nouveaux projets et la documentation

• Dans un nouveau projet, l’exécution de npx shadcn init fera de Base UI l’option par défaut
• shadcn/create affichera Base UI en premier
• Dans la documentation, les pages de composants s’ouvriront par défaut sur l’onglet Base UI, avec accès à la documentation Radix en un clic

Ce que les utilisateurs de Radix doivent savoir

• Radix continue d’être pris en charge

  • shadcn/ui maintient la prise en charge de Radix
  • À l’exception des composants disponibles uniquement dans Base UI, toutes les mises à jour et tous les nouveaux composants seront proposés pour les deux bibliothèques
  • Les applications existantes n’ont pas besoin de migrer
  • Radix est une bibliothèque mature et éprouvée
  • shadcn/ui continue lui-même à utiliser Radix en production et ne migre pas non plus ses propres projets
  • Si vous préférez Radix pour un nouveau projet, vous pouvez utiliser un flag
  • Si un script ou une CI exécutant shadcn init en mode non interactif s’attend à Radix, il faudra ajouter -b radix pour conserver le comportement actuel
  • Lors de la création d’un registry, il est possible de fournir le réglage registry:base pour verrouiller une bibliothèque précise
  • Les éléments sans ce réglage seront désormais initialisés avec Base UI
  • Base UI est recommandé pour les nouveaux projets

Comment se déroule la migration vers Base UI

• La migration n’est pas obligatoire, mais une skill est disponible si vous le souhaitez
• Vous pouvez demander à un agent de code quelque chose comme :
  • migrate accordion to base-ui
• L’approche par défaut est une migration progressive
  • Les composants et leurs usages sont migrés un par un
  • Le projet reste en état green et déployable en continu
  • Les deux bibliothèques coexistent pendant les travaux
  • Il est possible d’interrompre puis de reprendre plus tard
  • Vous pouvez aussi demander la migration complète du projet en une seule fois

Pourquoi avoir choisi une skill plutôt qu’un codemod

• Les composants shadcn/ui sont du code possédé et modifié par l’utilisateur : un codemod peut convenir à des composants non modifiés, mais casser sur des composants personnalisés
• La skill intègre une vérification manuelle des renommages, changements de props et différences de comportement pour les deux bibliothèques
• L’agent identifie les changements faits par l’utilisateur et les répercute dans la cible de migration
• Les changements pouvant être traités mécaniquement sont appliqués à l’ensemble du code
  • Exemple : asChild devient render
• Les changements de comportement ne sont pas patchés discrètement : ils sont signalés, et la décision finale revient à l’utilisateur

Ce que laisse la migration

• Chaque exécution laisse trois résultats
  • Du code fonctionnel : une vérification de types et un build sont lancés avant d’annoncer le succès
  • Un rapport par composant : dans .migration/ à la racine du projet, avec les changements, les éléments laissés intacts et une checklist de vérification manuelle
  • Un historique git propre : un commit par composant est laissé sur la branche, et pour revenir en arrière, il suffit de supprimer la branche
• Un exemple de rapport est .migration/accordion.md, avec les sections suivantes
  • Changed
  • Left alone
  • Behavior changes
  • Verify by hand
• Comme l’avancement est conservé dans les fichiers et l’historique git sans état caché, le travail peut être repris depuis n’importe quel agent ou session
• Cela fonctionne avec Claude Code, Cursor et les agents prenant en charge les skills
• Sur un projet réel testé, 36 composants sur plus de 60 utilisaient Radix, la migration complète a pris environ 25 minutes, pour environ 10 000 tokens par composant
• Le build est passé proprement et les personnalisations ont été conservées

Ajout de composants pour les interfaces de chat

• En juin 2026, de nouveaux composants ont été ajoutés pour construire des interfaces de chat
  • MessageScroller
  • Message
  • Bubble
  • Attachment
  • Marker
• Cette première étape apporte les briques essentielles de la couche conversationnelle
  • défilement
  • ligne de message
  • bulle
  • pièce jointe
  • marqueur
• MessageScroller est un conteneur de défilement dédié aux conversations
  • anchored turns
  • streamed replies
  • saved thread restore
  • prepended history
  • jump-to-message
  • scroll controls
  • visibility tracking
• MessageScroller ne gère ni les messages, ni l’état de l’IA, ni l’envoi, ni la persistance, ni l’état du modèle ; le renderer de contenu est fourni par l’utilisateur
• MessageScroller est aussi proposé comme composant headless sans style dans @shadcn/react

Rôle de Message, Bubble, Attachment et Marker

• Message organise une ligne de conversation
  • avatar
  • alignement
  • en-tête
  • contenu
  • pied de message
  • gestion des messages groupés
• Bubble affiche la surface du message
  • variants
  • alignement
  • reactions
  • links
  • buttons
  • prise en charge de contenu repliable
• Attachment affiche des fichiers et des images
  • media
  • metadata
  • upload state
  • actions
  • avec un full-card trigger qui conserve des actions cliquables séparées
• Marker affiche des mises à jour d’état, des notes système, des lignes de séparation et des séparateurs étiquetés
  • streaming state
  • tool activity
  • date breaks
• Ces composants sont conçus de manière modulaire afin de pouvoir être combinés dans des chats IA, des boîtes de réception de support, des fils d’équipe, des conversations de groupe et des interfaces conversationnelles produit

Utilitaires CSS pour le chat et @shadcn/react

• Deux nouveaux utilitaires CSS ont été ajoutés
  • scroll-fade : ajoute un fade indiquant le défilement sur les bords d’un conteneur scrollable
  • shimmer : ajoute un shimmer à des textes d’état en direct comme "Thinking…", "Generating response…", l’exécution d’outils ou les marqueurs de streaming
• Les deux utilitaires sont inclus dans shadcn/tailwind.css
  • Ils sont déjà présents dans les projets initialisés avec npx shadcn@latest init
• @shadcn/react est un nouveau package pour des composants React headless sans style
  • Le premier primitive est @shadcn/react/message-scroller
  • Les composants du registry les enveloppent avec le style shadcn/ui, tandis que les comportements de défilement comme anchoring, auto-follow, prepend preservation, scroll commands et visibility sont gérés par le package
• Cette approche permet de fournir le comportement sans lier l’implémentation à un style visuel, et de tester en un seul endroit la logique d’interaction complexe
• Compatible avec Radix comme avec Base UI

Lien avec AI Elements

• Les nouveaux composants de chat ne remplacent pas AI Elements
• Les composants et patterns d’interface IA de AI Elements restent utilisables
• Cette version se concentre sur l’intégration progressive des briques essentielles du chat dans shadcn/ui
• Si vous utilisez déjà les composants AI Elements, il n’est pas nécessaire de réécrire votre application
• Vous pouvez essayer la version shadcn/ui si vous recherchez une abstraction plus récente, un style actualisé et une prise en charge à la fois de Radix et de Base UI

Utiliser un dépôt GitHub comme registry

• Depuis juin 2026, il est possible d’utiliser un dépôt GitHub public comme registry
• Il suffit d’ajouter registry.json à la racine du dépôt et de définir les éléments à distribuer pour que les utilisateurs puissent installer directement depuis GitHub via la CLI shadcn
• Le GitHub registry est un source registry
  • Il n’est pas nécessaire d’exécuter shadcn build
  • Il n’est pas nécessaire de publier des fichiers JSON d’items générés
  • Il n’est pas nécessaire de mettre en place un serveur de registry
• La CLI lit le registry.json à la racine, résout les entrées include, trouve l’élément demandé et installe les fichiers correspondants
• Les éléments du registry ne se limitent pas aux composants
  • components
  • hooks
  • utilities
  • design tokens
  • feature kits
  • conventions de projet
  • instructions pour agents
  • configuration de tests
  • workflows CI
  • workflows de release
  • templates
  • codemods
  • kits de migration
  • et autres fichiers de projet peuvent être distribués
• Les adresses de GitHub registry fonctionnent avec les mêmes commandes que les adresses de registry existantes
  • list
  • search
  • view
  • install

shadcn eject et shadcn/tailwind.css

• Avec la prise en charge à la fois de Radix et de Base UI, il fallait un emplacement pour les utilitaires Tailwind partagés dont dépendent les deux bibliothèques
  • Exemple : des variants personnalisés comme data-open: et data-closed:
  • Exemple : un utilitaire comme no-scrollbar
• Pendant le travail sur le support RTL, certains bugs étaient aussi plus simples à corriger à un seul endroit qu’à dupliquer dans tous les composants
• C’est pour cela que shadcn/tailwind.css a été créé
  • Lors de init, @import "shadcn/tailwind.css" est ajouté au fichier CSS global
  • Cela fonctionne comme un import CSS tel que tw-animate-css
  • En production, c’est une petite dépendance tree-shaken et résolue au build
• Si vous ne voulez pas de dépendance CSS au package shadcn, vous pouvez utiliser shadcn eject
  • shadcn/tailwind.css est inline dans le fichier CSS global
  • La dépendance shadcn est supprimée du projet
• Dans un monorepo, la commande doit être exécutée dans le workspace qui contient components.json et le fichier CSS global

Nouveau style Rhea

• En mai 2026, un nouveau style shadcn/ui nommé Rhea a été ajouté
• Rhea est une version plus compacte de Luma, avec un espacement réduit et des surfaces plus denses, pensée pour des interfaces produit focalisées
• Rhea conserve la douceur et les formes de Luma tout en resserrant boutons, champs, menus, cartes et listes
• L’option consistant à ajuster --spacing de Luma n’a pas été retenue
  • Comme --spacing agit comme un multiplicateur, le modifier change dans toute l’application la signification de classes Tailwind familières comme p-2, w-4 ou m-16
• Rhea est fourni comme style distinct, ce qui permet d’ajuster directement la taille des composants, les gaps et la densité, tout en gardant une échelle d’utilitaires sous-jacente prévisible
• Rhea peut être utilisé avec Radix comme avec Base UI dans shadcn/create

[GN⁺]

Avis de Hacker News

• Dans ce texte, le style propre à Claude se ressent assez nettement, au point que ça devient fatigant et crée une certaine distance
  Si même un billet important de lancement produit ne mérite pas qu’un humain y consacre toute son attention, je ne sais plus où tracer la limite

  • Le texte transmettait efficacement les informations nécessaires et semblait avoir été rédigé et structuré de façon agréable à lire pour un humain
    S’il a été écrit avec l’IA et que cela a permis de consacrer plus de temps au développement de cet excellent logiciel open source, j’y vois plutôt une bonne chose
  • Je vois exactement ce que tu veux dire. J’utilise souvent Claude et plannotator, et c’est devenu bien meilleur après avoir demandé un guide de style précis
    En prenant comme prompt de départ « le style de la référence MSDN de l’époque CD et du blog de Raymond Chen », ma capacité à assimiler les plans produits par l’IA a beaucoup augmenté ; c’est un style humble, perspicace et respectueux du lecteur, que je recommande vivement
  • J’ai lu le billet, et il ne m’a pas paru écrit par une IA
    Ce serait assez drôle si quelqu’un de l’équipe venait dire qu’il a été écrit par un humain
  • Sérieusement, je me demande pourquoi c’est important. Il se peut qu’ils aient rédigé un brouillon, puis relu les formulations de Claude avant de publier
    Je ne comprends pas pourquoi il faudrait absolument « prendre en flagrant délit » chaque fois que l’IA aide dans le travail, et ce n’est pas une entreprise du Fortune 500, c’est un projet open source. Les ressources sont limitées, et l’anglais n’est peut-être pas leur langue maternelle
  • Au contraire, je pense que ce n’est pas quelque chose qu’il faut accepter sans broncher. La façon dont c’est utilisé et présenté aujourd’hui relève presque de la tromperie et du mensonge
    Je crois qu’une culture de collaboration a besoin de confiance et de vérité, et je ne veux pas de textes où une IA ment en disant « je l’ai fait / je l’ai dit »
    Par exemple, si ce texte a vraiment été écrit par Claude, pourquoi prétendre que quelqu’un de l’équipe s’exprime directement avec des formules comme « I said » ou « I meant it » ? C’est une usurpation d’identité et c’est trompeur. Dans une culture qui protège la collaboration et l’honnêteté, il faudrait dire « mon humain a dit », ou au minimum indiquer correctement qu’il s’agit d’une IA agissant au nom d’un humain

• Pour des applications banales, je me demande si les gens préfèrent la méthode copier-coller de shadcn à des bibliothèques UI traditionnelles comme Mantine
  Le copier-coller facilite les modifications, mais crée aussi de nouveaux problèmes. Là où il suffisait simplement d’augmenter un numéro de version, on a maintenant besoin d’un agent IA de mise à niveau

  • Dire qu’il suffit de « simplement augmenter le numéro de version » sous-estime énormément les casse-têtes que Material UI a créés ces dernières années
    Dans une très grosse application, pas une application banale, chaque mise à jour majeure bouleversait fortement l’API et imposait des migrations fastidieuses. Depuis le passage à shadcn, il est devenu plus simple de ne mettre à niveau qu’un seul composant et d’ajouter librement de nouveaux composants. Avec Material UI, pour utiliser une nouvelle fonctionnalité quelque part, il fallait tout adapter à la nouvelle API ; avec shadcn, on peut le faire sélectivement
  • Je n’ai jamais compris l’approche copier-coller. Shadcn sent simplement la mode du moment, et même après l’avoir copié et utilisé moi-même, je ne vois pas ce qu’il a d’extraordinaire
    Cela dit, chacun peut l’utiliser avec plaisir, et l’un des avantages de l’IA est que HN n’est plus autant saturé de discussions sur les frameworks JavaScript qu’avant
  • Sur les nouveaux projets, je penche de plus en plus vers le vendoring
    Utiliser une bibliothèque UI toute faite est plus simple à court terme, mais elle est généralement trop complexe, implémente des fonctionnalités inutiles, se modifie difficilement quand on veut se différencier des innombrables applications qui utilisent la même bibliothèque, et ces modifications cassent subtilement lors des mises à jour. À mon avis, la meilleure approche est de créer sa propre bibliothèque UI. On la possède, on la réutilise entre plusieurs projets, on conserve le même style visuel si on le souhaite, et on n’ajoute que les fonctionnalités nécessaires
  • Mantine est excellent. On peut construire presque n’importe quoi rapidement, puis l’étendre ensuite ou personnaliser entièrement le thème et les composants individuels
    Il y a une courbe d’apprentissage, mais elle ne me semble pas énorme
  • Dans beaucoup de systèmes, ce n’est presque jamais vraiment « juste augmenter le numéro de version ». Ce n’est possible que lorsque la bibliothèque de composants fait exactement ce qu’on veut
    En pratique, les composants ne fournissent souvent pas complètement le comportement nécessaire, et les gens ajoutent fréquemment du CSS par-dessus. Si l’alternative est plusieurs heures de travail, deux lignes de CSS sont très tentantes, mais ces deux lignes doivent elles aussi être validées à chaque nouvelle fonctionnalité de la bibliothèque de composants. Quand ces rustines CSS s’accumulent, la mise à niveau devient un projet à part entière

• Ce qui me gêne avec ces toolkits UI populaires, c’est qu’ils rendent beaucoup trop de div
  En regardant Base UI, presque tous les composants semblent « rendre un élément », alors que pour un accordéon, il existe des éléments natifs comme details/summary qui peuvent faire la même chose. Je ne suis pas un évangéliste du web natif, et je pense que les API web, en particulier HTML, ont beaucoup de défauts, mais l’abus de div est aussi un problème

• J’ai utilisé Shadcn et je l’aime globalement, mais les boutons radio basés sur Radix étaient un peu excessifs. Il existe aussi des options qui reposent sur des solutions tout aussi gonflées
  https://news.ycombinator.com/item?id=46688971

  • Ma principale critique envers Shadcn et la plupart des bibliothèques UI actuelles, c’est qu’elles réinventent la roue pour la millième fois
    J’essaie Ark UI sur un projet perso, et il y a des composants vraiment utiles, comme la saisie de tags : https://ark-ui.com/docs/components/tags-input
    Le composant d’onglets / « segment group » possède un indicateur actif animé qui doit être assez délicat à implémenter : https://ark-ui.com/docs/components/segment-group
    Mais il y a aussi des boutons « cliquer pour copier » inutilement complexes ou réimplémentés, et tout cela rend une soupe de div avec un balisage verbeux : https://ark-ui.com/docs/components/clipboard, https://ark-ui.com/docs/components/collapsible

• Il est intéressant de voir que les travaux de migration passent des codemods aux LLM
  Même si les codemods sont plus déterministes, je me demande si leur époque touche à sa fin

  • Je me demande ce que ça donnerait d’utiliser un LLM pour créer un codemod déterministe
    On pourrait ensuite exécuter le codemod, ajouter d’autres garde-fous déterministes et itérer, puis réinjecter le résultat dans le LLM pour améliorer le codemod
  • Le cadrage de l’article original relève d’une façon de penser dangereuse. Le codemod lui-même peut exister ou non
    Ce qu’il faut, ce n’est pas un fichier de skill pour LLM, mais de la documentation pour les humains. Il suffit d’écrire un guide de migration destiné aux humains. Il faudra sans doute un peu de temps avant de réaliser qu’au final, le fichier de skill et la documentation devraient être la même chose
  • Je me demande ce que codemod signifie ici
  • À mon avis, les deux se complètent parfaitement, et ce sera encore le cas à l’avenir
    Pour les règles souples, je continue d’utiliser un fichier AGENTS.md, et pour les règles strictes, des règles de linter personnalisées ; c’est selon moi une façon de tirer parti du meilleur des deux mondes

• J’aimerais utiliser shad-CN, mais à chaque fois je finis par revenir à Mantine
  C’est bien plus rapide que de se souvenir de quels contextes il faut brancher

• Je me demande si ce changement apporte de meilleurs résultats aux utilisateurs, comme une réduction de la taille du bundle
  Ou si c’est plutôt un changement qui améliore la qualité de vie des mainteneurs de Shadcn

• Je me demande quel est l’équivalent de shadcn/ui pour Angular
  PrimeNG ayant récemment changé de licence, je cherche une alternative adaptée à de nouveaux projets

  • Deux tentatives[1] pour faire remonter le changement de licence de PrimeNG sur HN ont échoué, mais si vous utilisez les bibliothèques de composants de PrimeTek, vous devriez être au courant de ce changement
    PrimeNG, PrimeReact et PrimeVue passent toutes en code entièrement fermé, et à partir de 2027, la licence d’utilisation continue coûtera 800 dollars par poste développeur[2]. Les dépôts existants sont archivés[3]. PrimeFaces reste open source, mais il est désormais développé et maintenu par des développeurs bénévoles indépendants, qui ne sont pas des employés de PrimeTek
    [1]: https://hn.algolia.com/?q=The+Next+Chapter+of+PrimeTek
    [2]: https://primeui.dev/nextchapter
    [3]: https://github.com/primefaces/primeng
  • Même situation. Au travail, nous avons utilisé PrimeNG dans plusieurs applications, et nous risquons d’être bloqués sur Angular 21 tant que nous n’aurons pas trouvé de remplaçant approprié
    Cela dit, un groupe a forké PrimeNG et prévoit de le maintenir. Le nouveau nom n’est pas encore décidé
    https://github.com/openng-org/open-prime
  • https://spartan.ng/
  • Je travaille sur Lily Design System en réponse au fait qu’un système similaire à Shadcn n’est pas encore disponible directement dans plusieurs stacks comme Svelte, Angular ou Nunjucks
    Tout est gratuit et open source ; si vous envoyez des retours ou des suggestions, il sera facile de les ajouter à Lily
    https://lilydesignsystem.github.io
  • https://www.zardui.com

• Les anciens guides de style skeuomorphiques me manquent
  Le dernier était, je crois, Blueprint

• L’URL devrait être https://ui.shadcn.com/docs/changelog/2026-07-base-ui-default