Solid Glass
Un système de design d'inspiration vitrée conçu sur mesure pour les interfaces d'applications d'IA basées sur React.
Des composants d'interface utilisateur tactiles, physiques et techniques construits sur shadcn/ui et Tailwind CSS.
Solid Glass est un système de design spécialisé et un thème CSS créé spécifiquement pour les applications d'IA. Il comble le fossé entre le design plat et le verre liquide excessivement transparent, vous offrant un texte lisible ainsi que de subtils reflets sur les bords et une profondeur physique.
Qu'est-ce que c'est
Il fournit une feuille de style unique définissant les couleurs, trois épaisseurs de verre, le mouvement et les noms de variables shadcn/ui, ainsi que des composants d'interface adaptés tels que des glyphes d'état, des vues de diff et des boîtes de raisonnement. Vous pouvez configurer des thèmes à l'aide des cadrans de sa page Create intégrée et déployer des blocs d'espace de travail d'agent entiers directement dans votre projet React.
Pour qui
Il convient aux développeurs front-end et aux designers créant des interfaces d'IA, des interfaces de chat ou des espaces de travail d'agents qui souhaitent une esthétique calme et lisible. Il ne convient pas aux équipes recherchant des styles de design web traditionnels d'entreprise ou purement plats.
Fonctionnalités clés
Esthétique Solid Glass
Fournit une finition sobre mettant l'accent sur la clarté et la stabilité plutôt que sur une forte réfraction.
Composants d'espace de travail d'agent
Comprend des glyphes d'état, des boîtes de composition, des vues de diff et des affichages de raisonnement prêts à l'emploi.
Intégration de shadcn/ui
Fonctionne directement avec les composants shadcn/ui existants en ciblant les data-slots via un seul fichier CSS.
Page Create interactive
Permet d'ajuster les cadrans de matière tels que l'épaisseur, la teinte, le flou et le rayon pour générer des variables CSS personnalisées.
Opérationnel en 3 étapes
Notre verdict honnête
Ses atouts
- Une seule feuille de style s'intègre proprement aux configurations shadcn/ui et Tailwind existantes
- Conçu spécifiquement pour les réponses d'IA en streaming et le retour d'état des agents
- Comprend des blocs d'espace de travail d'agent pré-construits pour un prototypage rapide
- Fournit une page Create interactive pour régler finement les propriétés de matériau personnalisées
Ses limites
- Nécessite un environnement existant React 19 et Tailwind CSS 4 pour l'implémentation
- Écrase les variables de couleur par défaut, nécessitant un nettoyage manuel des modèles d'initialisation standard de shadcn
- Le style esthétique de niche peut ne pas correspondre à l'image de marque d'applications traditionnelles non basées sur l'IA
Tarifs & licence
Gratuit sous sa licence, sans options hébergées payantes mentionnées dans le référentiel. Le seul coût est votre propre temps d'ingénierie pour intégrer et styliser votre application.
Missions pour francophones
880 missions ouvertes à distance en entraînement d’IA, mises à jour le 15 novembre 2026 ; la plupart paient $20–$175 de l’heure. 8 d’entre elles demandent des francophones. Zekai les liste gratuitement ; la candidature se fait sur la plateforme de l’employeur.
Alternatives
Ces outils IA évalués font le même travail instantanément — depuis notre annuaire noté.
Utilisez-le, ou laissez-nous l'installer
FAQ
En quoi Solid Glass diffère-t-il du verre liquide ?
Le verre liquide est presque transparent, obligeant les lecteurs à lutter contre l'arrière-plan pour la visibilité du texte. Solid Glass limite la transparence à un contour, garantissant une lisibilité élevée pour les textes denses et les réponses d'IA en streaming.
Dois-je modifier mes composants shadcn/ui existants ?
Non. La feuille de style trouve chaque partie de vos composants shadcn/ui existants en utilisant des attributs data-slot et des classes existantes sans nécessiter de réécriture de composants.
Puis-je personnaliser les propriétés du matériau en verre ?
Oui. La page Create incluse vous permet d'ajuster l'épaisseur, la teinte, la couleur de graphique, le type, le rayon, le contour et le flou pour générer vos propres variables CSS.
