AndreGoepel.Design.Blazor
1.0.1
dotnet add package AndreGoepel.Design.Blazor --version 1.0.1
NuGet\Install-Package AndreGoepel.Design.Blazor -Version 1.0.1
<PackageReference Include="AndreGoepel.Design.Blazor" Version="1.0.1" />
<PackageVersion Include="AndreGoepel.Design.Blazor" Version="1.0.1" />
<PackageReference Include="AndreGoepel.Design.Blazor" />
paket add AndreGoepel.Design.Blazor --version 1.0.1
#r "nuget: AndreGoepel.Design.Blazor, 1.0.1"
#:package AndreGoepel.Design.Blazor@1.0.1
#addin nuget:?package=AndreGoepel.Design.Blazor&version=1.0.1
#tool nuget:?package=AndreGoepel.Design.Blazor&version=1.0.1
AndreGoepel.Design.Blazor
An app-neutral design system for Blazor: an emerald-accented light/dark token palette, a Radzen reskin, self-hosted fonts, and a small set of shell / login building blocks. It has no dependency on any application — consume it from any Blazor app or library to get a consistent look without pulling in unrelated stacks.
Extracted from the marten-identity project, where it originated as the "AppFoundation" UI.
Install
dotnet add package AndreGoepel.Design.Blazor
Use
Reference the stylesheets after Radzen's material-base.css, and load the
theme + nav scripts, in your host page (App.razor):
<link rel="stylesheet" href="_content/AndreGoepel.Design.Blazor/css/fonts.css" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css" />
<link rel="stylesheet" href="_content/AndreGoepel.Design.Blazor/css/design.css" />
<script src="_content/AndreGoepel.Design.Blazor/js/theme.js"></script>
<script src="_content/AndreGoepel.Design.Blazor/js/nav.js"></script>
Then build with Radzen components and the ag-* helper classes, and use the shell:
<AppShell BrandName="Acme">
<Sidebar>@* NavLinks + ag-nav-section groups *@</Sidebar>
<TopbarActions><ThemeToggle /></TopbarActions>
<ChildContent>@Body</ChildContent>
</AppShell>
What's inside
- Design tokens (
--ag-*) for light + dark, and a remap of Radzen's--rz-*variables onto them. ag-*helper classes — cards, buttons, badges, forms, grids, empty states, the app shell, and the login card.- Components —
AppShell,AppPageTitle,LoginShell,AppIcon,ThemeToggle, and the cascadingBreadcrumbState. - Self-hosted fonts (Manrope / Space Grotesk / JetBrains Mono) — nothing is
fetched from Google at runtime. Regenerate with
scripts/fetch-fonts.py.
See DESIGN.md for the full guidelines.
License
MIT © André Göpel
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | 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. |
-
net10.0
- Radzen.Blazor (>= 11.1.0)
NuGet packages (2)
Showing the top 2 NuGet packages that depend on AndreGoepel.Design.Blazor:
| Package | Downloads |
|---|---|
|
AndreGoepel.Marten.Identity.Blazor
Blazor Server UI components for AndreGoepel.Marten.Identity — login, registration, 2FA, passkeys, and user/role administration pages built with Radzen. |
|
|
AndreGoepel.AppFoundation
Reusable Blazor management frontend (layout, navigation, setup, and admin shell) for AndreGoepel.AppFoundation-based applications. |
GitHub repositories
This package is not used by any popular GitHub repositories.