An AI-Native, Zero-NPM, Glassmorphic UI Component Library for Blazor. Built for the era of LLMs and high-performance SaaS applications.
| Aurora Glow Cards | Live Token Streaming | Agentic Tool Calls |
|---|---|---|
 |
 |
 |
| Responsive card layouts with AI-driven gradient borders and breathing glow effects | Real-time token streaming with animated content updates and live AI indicators | Tool-call chains with animated state transitions and contextual feedback |
Most Blazor component libraries are ports of Bootstrap or Material — safe, neutral, indistinguishable. DRYL starts from a different premise: your app has a language model in it, and AI is a first-class state of the UI, not a spinner you bolt on at the end.
- AI-native. Every AI-capable surface accepts a single
Aiparameter that drives a shared visual vocabulary — rotating gradient border, streaming glow, one-shot reveal — across the whole library. - Light & dark, one identity. Translucent glass layers on a deep-dark or luminous-light ground — following the user's system by default, switchable and persisted at runtime.
- Accents glow, never scream. A violet-to-cyan gradient lives in 1px borders, glow rings and tiny indicators — never as a background fill.
- Motion is intentional. Three durations, three easings, system-wide. Nothing flickers, nothing crawls. Every component animates its enter, exit and state changes.
- One token file. Every color, spacing, radius, shadow and duration is a CSS variable in
dryl.css. - ~90 components, zero npm dependencies. No JS framework underneath, no third-party package — just CSS, Razor, and a single hand-written interop file (
dryl.js) for the DOM-level concerns Blazor can't do alone (focus traps, portals, clipboard). - Accessible by default. Keyboard-reachable, ARIA-labeled, visible focus rings — and AI activity announced via
aria-live.
Most libraries make you hand-tune dozens of colors and hope they stay coherent. DRYL flips that: you set a few seeds and the system derives the rest — gradient, soft fills, accent lines, glow rings and the AI aura all stay in sync.
@* One line in your root layout *@
<DrylThemeProvider Theme="DrylThemes.Ember" />Switch at runtime — the whole accent chain glides (and respects
prefers-reduced-motion):
@inject IDrylThemeService Theme
await Theme.SetAccentAsync("#f59e0b", "#f43f5e"); // or Theme.SetThemeAsync(DrylThemes.Verdant)Ships with curated presets — Nebula (default), Ember, Verdant,
Mono — and a dedicated, opt-in AI accent so AI moments can glow in their
own color. The dark glass core stays fixed by design, so a theme can't break the
look. Full guide: THEMING.md.
DRYL targets .NET 8, 9 and 10.
1. Add the package
dotnet add package DRYL.Components2. Register services in Program.cs
builder.Services.AddDrylComponents();3. Reference the assets in your host page (App.razor / _Host.cshtml / wwwroot/index.html)
<head>
<!-- … -->
<link rel="stylesheet" href="_content/DRYL.Components/dryl.css" />
</head>
<body>
<!-- … -->
<script src="_content/DRYL.Components/js/dryl.js"></script>
</body>4. Add the providers once in your root layout
<DrylThemeProvider />
<DrylDialogProvider />
<DrylToastProvider />5. Use components
@using DRYL.Components
<DrylCard>
<DrylButton Variant="ButtonVariant.Primary">Hello DRYL</DrylButton>
</DrylCard>Every surface that can carry AI-generated content accepts a single Ai parameter of type AiState. That parameter drives a consistent, learnable visual vocabulary across cards, tables, dialogs, inputs and more — users see the same rotating gradient border on a card that's streaming tokens as they do on a step being filled by a tool call.
| State | Visual | When to use |
|---|---|---|
None |
Default styling — no AI signal. | Surface is rendered normally, unrelated to AI output. |
Active |
Slow rotating gradient border + breathing accent glow. | Persistent AI-driven surface (a chat panel, an LLM card). |
Thinking |
Faster pulse on border and glow. | A tool call is in flight. |
Streaming |
Moderate pulse; content updates incrementally. | Tokens are arriving from the model. |
Generated |
One-shot accent wash sweep + soft lift. | Reveal moment immediately after generation completes. |
DRYL is a solo effort built in the open, and with the API now frozen for 1.0 it's a great time to get involved. If you want to help:
- Read
CLAUDE.md— the contribution rules (they apply to humans too). - Open an issue before starting work on a new component.
- Every PR must respect the token system. No invented colors, no arbitrary spacings.
DRYL is built and maintained in the open as a solo effort. If it saves you time or you'd like to see it reach a stable 1.0 faster, you can support the work:
- GitHub Sponsors — one-off or recurring.
Sponsorships are appreciated but never required: DRYL is MIT-licensed and will always be free to use. Starring the repo and filing good issues helps just as much.
Found a problem? Open an issue.
DRYL stands on the shoulders of these open-source projects:
- Lucide — the icon set behind
DrylIcon. ISC-licensed. Some Lucide icons themselves derive from Feather Icons (MIT, Cole Bemis). - Inter by Rasmus Andersson — primary UI typeface. SIL Open Font License.
- JetBrains Mono — monospace typeface used for code, IDs and timestamps. SIL Open Font License.
Full license texts for bundled third-party assets are in THIRD_PARTY_NOTICES.md.
MIT — see LICENSE. Use it, fork it, ship it.