DRYL.Components
Alle Projekte

DRYL.Components

Eine AI-native Blazor UI Library mit rund 90 animierten Komponenten, Runtime-Theming und ohne npm-Abhängigkeiten.

BlazorBlazor ServerBlazor WebAssembly.NETC#Razor ComponentsUI Component LibraryDesign SystemAI UIGlassmorphismAccessibilityOpen Source

Nicht einfach ein weiterer Blazor-Komponentenbaukasten.

DRYL.Components ist eine AI-native UI-Komponentenbibliothek für Blazor Server und Blazor WebAssembly. Rund 90 Komponenten bilden ein gemeinsames Designsystem für moderne SaaS-Produkte, interne Tools, Dashboards und KI-gestützte Anwendungen.

Die Bibliothek deckt die grundlegenden Bausteine einer vollständigen Benutzeroberfläche ab: Buttons, Formulare, Navigation, Layouts, Dialoge, Benachrichtigungen, Tabellen, Charts, Date Picker, Autocomplete, File Uploads, Markdown, Codeblöcke, Chat-Oberflächen und viele weitere Komponenten.

DRYL verfolgt dabei eine bewusst eigenständige visuelle Identität. Halbtransparente Glasflächen, indirekte Lichtakzente, feine Farbverläufe und gezielte Animationen ersetzen das typische Aussehen klassischer Bootstrap- oder Material-Oberflächen. Interaktionen, Zustandswechsel und ein- oder ausgeblendete Inhalte gehen fließend ineinander über, statt abrupt zu erscheinen.

KI ist kein nachträglich angebauter Ladeindikator.

KI-generierte Inhalte besitzen andere Zustände als klassische Benutzeroberflächen. Ein Modell kann aktiv sein, nachdenken, Inhalte streamen oder eine Generierung abschließen.

DRYL stellt dafür ein gemeinsames visuelles Vokabular bereit:

None, Active, Thinking, Streaming und Generated

Jede dafür ausgelegte Komponente kann über einen einzelnen Ai-Parameter gesteuert werden. Karten, Eingabefelder, Tabellen, Dialoge, Fortschrittsanzeigen und weitere Oberflächen zeigen KI-Aktivität dadurch konsistent an – ohne für jede Komponente eigene Spinner, Animationen oder Statusdarstellungen entwickeln zu müssen.

Die Bibliothek ist dabei nicht an einen bestimmten Modellanbieter gebunden. Ob OpenAI, Anthropic, lokale Modelle oder eine eigene AI-Infrastruktur verwendet werden, entscheidet weiterhin die Anwendung. DRYL übernimmt die visuelle Ebene.

Ein Designsystem statt einer Sammlung einzelner Widgets.

Farben, Abstände, Radien, Schatten, Typografie und Animationen basieren auf gemeinsamen Design Tokens. Dadurch wirken auch komplexe Anwendungen wie aus einem Guss.

Das integrierte Theme-System unterstützt System, Light und Dark Mode, speichert die Auswahl des Nutzers und ermöglicht Theme-Wechsel zur Laufzeit. Aus wenigen Akzentfarben werden automatisch zusammenpassende Verläufe, Flächen, Rahmen, Glows und AI-Akzente abgeleitet.

Mit Nebula, Ember, Verdant und Mono stehen direkt einsetzbare Presets bereit. Eigene Markenfarben können verwendet werden, ohne jede einzelne Komponente manuell anpassen zu müssen.

Für reale Anwendungen entwickelt.

DRYL unterstützt .NET 8, .NET 9 und .NET 10 und benötigt weder npm noch ein JavaScript-Framework. Ein kleiner eigener Interop-Layer übernimmt ausschließlich Aufgaben, die Blazor nicht direkt lösen kann – etwa Fokussteuerung, Portale oder die Zwischenablage.

Tastaturnavigation, sichtbare Fokuszustände, semantische ARIA-Attribute, aria-live für KI-Aktivitäten und die Berücksichtigung von prefers-reduced-motion sind Teil des gemeinsamen Komponentenfundaments.

Für vollständige Agent-Workflows erweitert das separat erhältliche Paket DRYL.Components.Agents die Bibliothek um Agent Runs, strukturiertes Streaming, Tool Calls, Human-in-the-Loop und interaktive AI-Artefakte.

DRYL.Components passt zu Teams, die moderne, animierte und KI-orientierte Blazor-Anwendungen entwickeln und dafür ein konsistentes Designsystem mit einer klaren eigenen Identität einsetzen möchten.

DRYL.Components passt weniger, wenn ein maximal breites Enterprise-Widget-Ökosystem eines etablierten Drittanbieters benötigt wird oder das Projekt nicht auf Blazor basiert.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.