DRYL.Components 2.20.1

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package DRYL.Components --version 2.20.1
                    


                    

                
NuGet\Install-Package DRYL.Components -Version 2.20.1
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="DRYL.Components" Version="2.20.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="DRYL.Components" Version="2.20.1" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="DRYL.Components" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add DRYL.Components --version 2.20.1
                    


                    

                
#r "nuget: DRYL.Components, 2.20.1"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package DRYL.Components@2.20.1
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=DRYL.Components&version=2.20.1
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=DRYL.Components&version=2.20.1
                    


                            Install as a Cake Tool

DRYL Components

GitHub Stars NuGet Downloads CI License: MIT .NET Sponsor

An AI-Native, Zero-NPM, Glassmorphic UI Component Library for Blazor. Built for the era of LLMs and high-performance SaaS applications.

Live Demo

</div>

Aurora Glow Cards Live Token Streaming Agentic Tool Calls
DRYL — Cards Aurora Glow DRYL — Chat Streaming DRYL — Function Call
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

Why DRYL?

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 Ai parameter 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.

Make it yours — theming

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.

Quick start

DRYL targets .NET 8, 9 and 10.

1. Add the package

dotnet add package DRYL.Components

2. 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>

AI Mode — first-class citizen

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.

The five states

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.

Contributing

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:

  1. Read CLAUDE.md — the contribution rules (they apply to humans too).
  2. Open an issue before starting work on a new component.
  3. Every PR must respect the token system. No invented colors, no arbitrary spacings.

Support DRYL

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:

Sponsor

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.

Credits

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.

License

MIT — see LICENSE. Use it, fork it, ship it.

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on DRYL.Components:

Package Downloads
DRYL.Components.Agents

Companion package for DRYL.Components: bridges the Microsoft Agent Framework to DRYL's AI vocabulary — automatic AiState from an agent run, structured streaming UI (DrylAiGenerate<T>), ready-made DrylDialog-backed human-in-the-loop tool functions, and display tools that let the model answer with live DRYL components inline in the chat (DrylDisplayTools + DrylAgentAttachments).

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
2.20.1 36 7/30/2026
2.20.0 69 7/29/2026
2.19.0 76 7/28/2026
2.18.0 101 7/26/2026
2.17.1 90 7/26/2026
2.17.0 98 7/26/2026
2.16.1 92 7/26/2026
2.15.0 104 7/25/2026
2.13.0 108 7/25/2026
2.12.0 107 7/25/2026
2.11.0 110 7/25/2026
2.10.0 119 7/22/2026
2.9.0 118 7/20/2026
2.8.3 97 7/16/2026
2.8.2 96 7/16/2026
2.8.0 92 7/12/2026
2.7.1 106 7/12/2026
2.7.0 96 7/12/2026
2.5.0 101 7/12/2026
2.4.2 95 7/12/2026
Loading failed

See CHANGELOG.md at https://github.com/Zimpi/DRYL.Components/blob/main/CHANGELOG.md