Solid Glass
Ein von Glas inspiriertes Design-System, zugeschnitten auf React-basierte KI-Anwendungsschnittstellen.
Haptische, physische und technische UI-Komponenten auf Basis von shadcn/ui und Tailwind CSS.
Solid Glass ist ein spezialisiertes Design-System und CSS-Theme, das speziell für KI-Anwendungen entwickelt wurde. Es schließt die Lücke zwischen flachem Design und übermäßig transparentem Liquid Glass und bietet Ihnen lesbare Texte kombiniert mit subtilen Kanteneffekten und physischer Tiefe.
Was es ist
Es liefert ein einzelnes Stylesheet zur Definition von Farben, drei Glasstärken, Animationen und shadcn/ui-Variablennamen sowie maßgeschneiderte UI-Komponenten wie Status-Glyphen, Diff-Ansichten und Reasoning-Boxen. Sie können Themes über die integrierten Regler der Create-Seite konfigurieren und gesamte Agent-Workspace-Blöcke direkt in Ihr React-Projekt einbinden.
Für wen
Es eignet sich für Frontend-Entwickler und Designer, die KI-Schnittstellen, Chat-UIs oder Agent-Workspaces entwickeln und eine ruhige, gut lesbare Ästhetik wünschen. Es ist weniger geeignet für Teams, die traditionelle Unternehmens- oder rein flache Webdesign-Stile suchen.
Wichtige Funktionen
Solid Glass-Ästhetik
Bietet ein zurückhaltendes Finish, das Klarheit und Stabilität anstelle starker Lichtbrechung betont.
Agent-Workspace-Komponenten
Beinhaltet Status-Glyphen, Composer-Boxen, Diff-Ansichten und Reasoning-Anzeigen von Haus aus.
shadcn/ui-Integration
Arbeitet direkt mit bestehenden shadcn/ui-Komponenten zusammen, indem data-slots über eine einzige CSS-Datei angesprochen werden.
Interaktive Create-Seite
Ermöglicht das Anpassen von Materialreglern wie Stärke, Tönung, Unschärfe und Radius zur Generierung eigener CSS-Variablen.
Startklar in 3 Schritten
Unser ehrliches Fazit
Stärken
- Ein einzelnes Stylesheet integriert sich sauber in bestehende shadcn/ui- und Tailwind-Setups
- Speziell zugeschnitten auf streamende KI-Antworten und Agenten-Statusfeedback
- Enthält vorgefertigte Agent-Workspace-Blöcke für schnelles Prototyping
- Bietet eine interaktive Create-Seite zum Einstellen benutzerdefinierter Materialeigenschaften
Schwächen
- Erfordert eine bestehende React 19- und Tailwind CSS 4-Umgebung für die Implementierung
- Überschreibt Standard-Farbvariablen, was eine manuelle Bereinigung der standardmäßigen shadcn-Init-Templates erfordert
- Nischen-Ästhetik passt möglicherweise nicht zum Branding traditioneller, nicht auf KI ausgerichteter Anwendungen
Preise & Lizenz
Kostenlos im Rahmen seiner Lizenz, ohne erwähnte kostenpflichtige Hosting-Optionen im Repository. Die einzigen Kosten sind Ihre eigene Entwicklungszeit für die Integration und Gestaltung Ihrer Anwendung.
Stellen für Deutschsprachige
880 offene Remote-Stellen im KI-Training, aktualisiert am 15. November 2026; die meisten zahlen $20–$175 pro Stunde. 12 davon suchen Deutschsprachige. Zekai listet sie kostenlos; die Bewerbung läuft über die Plattform des Arbeitgebers.
Alternativen
Diese bewerteten KI-Tools erledigen die Aufgabe sofort — aus unserem bewerteten Verzeichnis.
Nutze es, oder lass es uns einrichten
FAQ
Wie unterscheidet sich Solid Glass von Liquid Glass?
Liquid Glass ist fast durchsichtig, sodass Leser gegen den Hintergrund ankämpfen müssen, um Text zu erkennen. Solid Glass beschränkt die Transparenz auf eine Kontur, was eine hohe Lesbarkeit für dichten Text und streamende KI-Antworten gewährleistet.
Muss ich meine bestehenden shadcn/ui-Komponenten anpassen?
Nein. Das Stylesheet findet jeden Teil Ihrer bestehenden shadcn/ui-Komponenten über data-slot-Attribute und vorhandene Klassen, ohne dass Komponenten umgeschrieben werden müssen.
Kann ich die Eigenschaften des Glasmaterials anpassen?
Ja. Die mitgelieferte Create-Seite ermöglicht es Ihnen, Stärke, Tönung, Diagrammfarbe, Typ, Radius, Rand und Unschärfe anzupassen, um Ihre eigenen CSS-Variablen zu generieren.
