DRYL.Components

Why DRYL?

Most Blazor component libraries are ports of Bootstrap or Material — safe, neutral, indistinguishable. They were designed for the apps of 2014. Your app has a language model in it.

DRYL starts from that reality. AI is not a spinner you bolt on at the end — it is a first-class state of the UI. Every AI-capable surface accepts a single Ai parameter, and that one parameter drives a shared visual vocabulary across the whole library: a rotating gradient border while the model thinks, an accelerated glow while tokens stream, a one-shot accent wash the moment the answer lands. Users learn the language once and feel where the AI is working — on a card, a table, a dialog, an input — without ever reading a label.

And it looks the part:

• Dark only. Translucent glass layers stacked on pure black. No light theme, no toggle — dark is the design.
• Accents glow, never scream. A violet-to-cyan gradient lives in 1px borders, glow rings and tiny indicators — never in shouting background fills.
• Motion is intentional. Three durations, three easings, system-wide. Nothing flickers, nothing crawls.
• One token file. Every color, spacing, radius, shadow and duration is a CSS variable in dryl.css. Re-tune the entire visual language in one place.
• 86 components, zero JavaScript dependencies. No npm, no JS framework underneath — just CSS, Razor, and minimal interop. One approved .NET dependency (Markdig) for Markdown rendering.
• Accessible by default. Keyboard-reachable, ARIA-labeled, visible focus rings — and AI activity announced via aria-live, so the glow is never the only signal.