bext/ui, Design System
La bibliothèque de composants de bext et PRISM, adaptée de shadcn/ui : des composants à copier dans son projet, documentés un par un, avec blocs, graphiques en SVG, thèmes et mode sombre.
Une bibliothèque de composants pour PRISM
bext/ui est la bibliothèque de composants d’interface de bext. Elle reprend shadcn/ui, son apparence et sa démarche, pour PRISM, le moteur de rendu de bext : chaque composant est une fonction qui renvoie du HTML, rendu côté serveur.
Nous avons développé les composants, la commande qui les copie dans un projet et le site ui.bext.dev, qui documente chaque composant avec son aperçu, son code et ses propriétés. Le site présente aussi des blocs prêts à copier, des graphiques dessinés en SVG, des outils de thème et des écrans d’exemple.
Le projet en bref
- Besoin
- Donner à PRISM une bibliothèque de composants complète.
- Ce que nous avons livré
- Des composants rendus côté serveur, copiés dans le projet par la commande bext ui, chacun documenté avec un aperçu, le code et ses propriétés.
- Résultat
- Des blocs, des graphiques en SVG, des outils de thème et le mode sombre, réunis sur ui.bext.dev.
Des composants que l’on copie dans son projet
bext/ui est la bibliothèque de composants d’interface de bext. Elle reprend shadcn/ui, son apparence et sa démarche, en l’adaptant à PRISM : chaque composant est une fonction qui renvoie du HTML, rendu côté serveur.
La bibliothèque ne s’installe pas comme une dépendance. Le développeur choisit les composants dont il a besoin et leur code est copié dans son application, où il peut le modifier. Un composant se compose de son balisage, des jetons de couleur partagés et, s’il est interactif, d’un îlot commun qui réagit à des attributs data-ui.
La commande bext ui prépare le projet, ajoute les composants avec leurs dépendances et montre ce qui a changé dans la bibliothèque depuis la copie. Une équipe peut aussi servir son propre registre de composants, sous forme de fichiers JSON statiques, et l’utiliser avec les mêmes commandes.
Faites glisser le schéma pour le voir en entier.
Une page de documentation par composant
Chaque composant a sa page : un aperçu en direct, le code, l’installation par la ligne de commande ou à la main, des exemples d’usage et la référence de ses propriétés. Certaines pages ajoutent l’anatomie du composant et des notes sur le clavier et l’accessibilité.
Les composants sont rangés par catégorie, de la mise en page aux formulaires, aux fenêtres et aux tableaux de données. Une catégorie réunit les éléments des assistants IA : conversation, zone de saisie, appels d’outils, raisonnement et suivi de sous-agents.
Des guides accompagnent l’installation dans une application PRISM, le thème et le mode sombre. Une recherche au clavier donne accès à toutes les pages.
Thèmes, couleurs et mode sombre
Les composants n’utilisent pas de couleurs fixes mais des jetons, comme la couleur principale ou le fond, définis en variables CSS. La même classe reste juste en clair et en sombre, et changer de thème revient à changer ces variables.
La page Thèmes applique une couleur, un rayon d’angle et un mode à une série de composants, puis donne le CSS à copier. L’atelier Create va plus loin : couleur de base, couleurs des graphiques, polices des titres et du texte, jeu d’icônes et rayon, avec des préréglages, un tirage au hasard et l’annulation.
Un nuancier complète l’ensemble, pour étendre les jetons avec d’autres couleurs.
Faites glisser le schéma pour le voir en entier.
Blocs, graphiques et exemples
Les blocs sont des sections complètes, rangées par catégorie : IA, application, authentification et marketing. Chacun s’affiche en aperçu, avec un onglet pour le code et un bouton pour le copier.
Les graphiques sont dessinés en SVG, sans bibliothèque de graphiques : aires, barres, courbes, secteurs, radar et jauges, chacun avec le code qui le produit.
Des exemples montrent enfin des écrans entiers bâtis avec les composants : un tableau de bord, des cartes, un écran de connexion, des pages de réglages et un lecteur de musique.
Le site, page par page
30 pages capturées sur ui.bext.dev le 25 septembre 2026, sur ordinateur et sur téléphone. Cliquez sur un aperçu pour l’agrandir, puis faites défiler à l’intérieur pour découvrir toute la page. Les flèches permettent de changer de page.
- Accueil et documentation 7 pages
- Les composants 8 pages
- Blocs et graphiques 6 pages
- Thèmes et exemples 9 pages
Accueil et documentation
La présentation de la bibliothèque, l’installation, la ligne de commande et les thèmes.
7 pages, 6 vues mobiles
Les composants
Une page par composant : aperçu, code, installation, usage et propriétés.
8 pages, 8 vues mobiles
Blocs et graphiques
Des sections complètes prêtes à copier, et des graphiques dessinés en SVG.
6 pages, 5 vues mobiles
Thèmes et exemples
Le choix des couleurs et des polices, puis des écrans complets bâtis avec les composants. Données fictives.
9 pages, 9 vues mobiles
Les fonctions de la bibliothèque
Les fonctions développées pour bext/ui, des composants à la documentation et aux thèmes.
Composants
- Composants PRISM rendus côté serveur, sous forme de fonctions
- Code copié dans le projet, modifiable ligne à ligne
- Catégories : mise en page, formulaires, retours, navigation, superpositions, données, révélation et IA
- Comportements interactifs portés par un îlot partagé
- Composants pour les assistants IA : conversation, saisie, appels d’outils, raisonnement, sous-agents
Documentation
- Une page par composant, avec aperçu et code
- Installation par la ligne de commande ou à la main
- Exemples d’usage et référence des propriétés
- Guides d’installation, de thème et de mode sombre
- Recherche au clavier dans tout le site
- Site en clair ou en sombre
Outils
- Commande bext ui : init, add et diff
- Suivi des changements de la bibliothèque depuis la copie
- Registre de composants en JSON statique, servi depuis sa propre adresse
- Fichier de configuration bext-ui.json
Thèmes
- Jetons de couleur en variables CSS, en clair et en sombre
- Page Thèmes : couleur, rayon et mode, avec le CSS à copier
- Atelier Create : couleurs, graphiques, polices, icônes et rayon
- Préréglages, tirage au hasard et annulation
- Nuancier des couleurs, valeur copiée au clic
Blocs et graphiques
- Blocs IA, application, authentification et marketing
- Aperçu, code et copie pour chaque bloc
- Graphiques en SVG, sans bibliothèque de graphiques
- Aires, barres, courbes, secteurs, radar et jauges
Exemples
- Tableau de bord
- Cartes, authentification et formulaires de réglages
- Lecteur de musique
Technologies utilisées
Tailwind CSS
JavaScript- Rendu : PRISM, composants rendus côté serveur par le moteur bext
- Styles : classes utilitaires compatibles Tailwind v4 et jetons en variables CSS
- Interactivité : un îlot JavaScript partagé, piloté par des attributs data-ui
- Graphiques : SVG généré côté serveur
- Distribution : commande bext ui et registre en JSON statique
Pour un projet du même type
Le site a pu évoluer depuis notre intervention.
