diff --git a/BlazorFluentUI/BlazorFluentUI.csproj b/BlazorFluentUI/BlazorFluentUI.csproj
new file mode 100644
index 0000000..4f5c1bd
--- /dev/null
+++ b/BlazorFluentUI/BlazorFluentUI.csproj
@@ -0,0 +1,13 @@
+
+
+
+ net8.0
+ enable
+ enable
+
+
+
+
+
diff --git a/BlazorFluentUI/Components/App.razor b/BlazorFluentUI/Components/App.razor
new file mode 100644
index 0000000..35b0985
--- /dev/null
+++ b/BlazorFluentUI/Components/App.razor
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+ BlazorFluentUI
+
+
+
+
+ @Body
+
+
+
+
+ Documentation and demos
+ About Blazor
+
+
+
+
+ An unhandled error has occurred.
+
Reload
+
🗙
+
Counter
+
+Counter
+
+
+ Current count: @currentCount
+
+
+Click me
+
+@code {
+ private int currentCount = 0;
+
+ private void IncrementCount()
+ {
+ currentCount++;
+ }
+}
diff --git a/BlazorFluentUI/Components/Pages/Error.razor b/BlazorFluentUI/Components/Pages/Error.razor
new file mode 100644
index 0000000..576cc2d
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/Error.razor
@@ -0,0 +1,36 @@
+@page "/Error"
+@using System.Diagnostics
+
+Error
+
+Error.
+An error occurred while processing your request.
+
+@if (ShowRequestId)
+{
+
+ Request ID: @RequestId
+
+}
+
+Development Mode
+
+ Swapping to Development environment will display more detailed information about the error that occurred.
+
+
+ The Development environment shouldn't be enabled for deployed applications.
+ It can result in displaying sensitive information from exceptions to end users.
+ For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development
+ and restarting the app.
+
+
+@code{
+ [CascadingParameter]
+ private HttpContext? HttpContext { get; set; }
+
+ private string? RequestId { get; set; }
+ private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+ protected override void OnInitialized() =>
+ RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
+}
diff --git a/BlazorFluentUI/Components/Pages/Home.razor b/BlazorFluentUI/Components/Pages/Home.razor
new file mode 100644
index 0000000..96714a2
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/Home.razor
@@ -0,0 +1,7 @@
+@page "/"
+
+Home
+
+Hello, world!
+
+Welcome to your new Fluent Blazor app.
\ No newline at end of file
diff --git a/BlazorFluentUI/Components/Pages/Weather.razor b/BlazorFluentUI/Components/Pages/Weather.razor
new file mode 100644
index 0000000..411cd5e
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/Weather.razor
@@ -0,0 +1,50 @@
+@page "/weather"
+@attribute [StreamRendering]
+
+Weather
+
+Weather
+
+This component demonstrates showing data.
+
+@if (forecasts == null)
+{
+ Loading...
+}
+else
+{
+
+
+
+}
+
+@code {
+ private IQueryable? forecasts;
+
+ protected override async Task OnInitializedAsync()
+ {
+ // Simulate asynchronous loading to demonstrate streaming rendering
+ await Task.Delay(500);
+
+ var startDate = DateOnly.FromDateTime(DateTime.Now);
+ var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
+ forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
+ {
+ Date = startDate.AddDays(index),
+ TemperatureC = Random.Shared.Next(-20, 55),
+ Summary = summaries[Random.Shared.Next(summaries.Length)]
+ }).AsQueryable();
+ }
+
+ private class WeatherForecast
+ {
+ public DateOnly Date { get; set; }
+ public int TemperatureC { get; set; }
+ public string? Summary { get; set; }
+ public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+ }
+}
diff --git a/BlazorFluentUI/Components/Routes.razor b/BlazorFluentUI/Components/Routes.razor
new file mode 100644
index 0000000..f756e19
--- /dev/null
+++ b/BlazorFluentUI/Components/Routes.razor
@@ -0,0 +1,6 @@
+
+
+
+
diff --git a/BlazorFluentUI/Components/_Imports.razor b/BlazorFluentUI/Components/_Imports.razor
new file mode 100644
index 0000000..2353c92
--- /dev/null
+++ b/BlazorFluentUI/Components/_Imports.razor
@@ -0,0 +1,11 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.FluentUI.AspNetCore.Components
+@using Microsoft.JSInterop
+@using BlazorFluentUI
+@using BlazorFluentUI.Components
diff --git a/BlazorFluentUI/Program.cs b/BlazorFluentUI/Program.cs
new file mode 100644
index 0000000..8122f52
--- /dev/null
+++ b/BlazorFluentUI/Program.cs
@@ -0,0 +1,29 @@
+using Microsoft.FluentUI.AspNetCore.Components;
+using BlazorFluentUI.Components;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorComponents()
+ .AddInteractiveServerComponents();
+builder.Services.AddFluentUIComponents();
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+ app.UseExceptionHandler("/Error", createScopeForErrors: true);
+ // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+ app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+
+app.UseStaticFiles();
+app.UseAntiforgery();
+
+app.MapRazorComponents()
+ .AddInteractiveServerRenderMode();
+
+app.Run();
diff --git a/BlazorFluentUI/Properties/launchSettings.json b/BlazorFluentUI/Properties/launchSettings.json
new file mode 100644
index 0000000..2e0b35f
--- /dev/null
+++ b/BlazorFluentUI/Properties/launchSettings.json
@@ -0,0 +1,38 @@
+{
+ "$schema": "http://json.schemastore.org/launchsettings.json",
+ "iisSettings": {
+ "windowsAuthentication": false,
+ "anonymousAuthentication": true,
+ "iisExpress": {
+ "applicationUrl": "http://localhost:41550",
+ "sslPort": 44309
+ }
+ },
+ "profiles": {
+ "http": {
+ "commandName": "Project",
+ "dotnetRunMessages": true,
+ "launchBrowser": true,
+ "applicationUrl": "http://localhost:5231",
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ },
+ "https": {
+ "commandName": "Project",
+ "dotnetRunMessages": true,
+ "launchBrowser": true,
+ "applicationUrl": "https://localhost:7166;http://localhost:5231",
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ },
+ "IIS Express": {
+ "commandName": "IISExpress",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ }
+ }
+ }
diff --git a/BlazorFluentUI/appsettings.Development.json b/BlazorFluentUI/appsettings.Development.json
new file mode 100644
index 0000000..0c208ae
--- /dev/null
+++ b/BlazorFluentUI/appsettings.Development.json
@@ -0,0 +1,8 @@
+{
+ "Logging": {
+ "LogLevel": {
+ "Default": "Information",
+ "Microsoft.AspNetCore": "Warning"
+ }
+ }
+}
diff --git a/BlazorFluentUI/appsettings.json b/BlazorFluentUI/appsettings.json
new file mode 100644
index 0000000..10f68b8
--- /dev/null
+++ b/BlazorFluentUI/appsettings.json
@@ -0,0 +1,9 @@
+{
+ "Logging": {
+ "LogLevel": {
+ "Default": "Information",
+ "Microsoft.AspNetCore": "Warning"
+ }
+ },
+ "AllowedHosts": "*"
+}
diff --git a/BlazorFluentUI/wwwroot/app.css b/BlazorFluentUI/wwwroot/app.css
new file mode 100644
index 0000000..288d428
--- /dev/null
+++ b/BlazorFluentUI/wwwroot/app.css
@@ -0,0 +1,191 @@
+@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
+
+body {
+ --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
+ font-family: var(--body-font);
+ font-size: var(--type-ramp-base-font-size);
+ line-height: var(--type-ramp-base-line-height);
+ margin: 0;
+}
+
+.navmenu-icon {
+ display: none;
+}
+
+.main {
+ min-height: calc(100dvh - 86px);
+ color: var(--neutral-foreground-rest);
+ align-items: stretch !important;
+}
+
+.body-content {
+ align-self: stretch;
+ height: calc(100dvh - 86px) !important;
+ display: flex;
+}
+
+.content {
+ padding: 0.5rem 1.5rem;
+ align-self: stretch !important;
+ width: 100%;
+}
+
+.manage {
+ width: 100dvw;
+}
+
+footer {
+ background: var(--neutral-layer-4);
+ color: var(--neutral-foreground-rest);
+ align-items: center;
+ padding: 10px 10px;
+}
+
+ footer a {
+ color: var(--neutral-foreground-rest);
+ text-decoration: none;
+ }
+
+ footer a:focus {
+ outline: 1px dashed;
+ outline-offset: 3px;
+ }
+
+ footer a:hover {
+ text-decoration: underline;
+ }
+
+.alert {
+ border: 1px dashed var(--accent-fill-rest);
+ padding: 5px;
+}
+
+
+#blazor-error-ui {
+ background: lightyellow;
+ bottom: 0;
+ box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+ display: none;
+ left: 0;
+ padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+ position: fixed;
+ width: 100%;
+ z-index: 1000;
+ margin: 20px 0;
+}
+
+ #blazor-error-ui .dismiss {
+ cursor: pointer;
+ position: absolute;
+ right: 0.75rem;
+ top: 0.5rem;
+ }
+
+.blazor-error-boundary {
+ background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
+ padding: 1rem 1rem 1rem 3.7rem;
+ color: white;
+}
+
+ .blazor-error-boundary::before {
+ content: "An error has occurred. "
+ }
+
+.loading-progress {
+ position: relative;
+ display: block;
+ width: 8rem;
+ height: 8rem;
+ margin: 20vh auto 1rem auto;
+}
+
+ .loading-progress circle {
+ fill: none;
+ stroke: #e0e0e0;
+ stroke-width: 0.6rem;
+ transform-origin: 50% 50%;
+ transform: rotate(-90deg);
+ }
+
+ .loading-progress circle:last-child {
+ stroke: #1b6ec2;
+ stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
+ transition: stroke-dasharray 0.05s ease-in-out;
+ }
+
+.loading-progress-text {
+ position: absolute;
+ text-align: center;
+ font-weight: bold;
+ inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
+}
+
+ .loading-progress-text:after {
+ content: var(--blazor-load-percentage-text, "Loading");
+ }
+
+code {
+ color: #c02d76;
+}
+
+@media (max-width: 600px) {
+ .header-gutters {
+ margin: 0.5rem 3rem 0.5rem 1.5rem !important;
+ }
+
+ [dir="rtl"] .header-gutters {
+ margin: 0.5rem 1.5rem 0.5rem 3rem !important;
+ }
+
+ .main {
+ flex-direction: column !important;
+ row-gap: 0 !important;
+ }
+
+ nav.sitenav {
+ width: 100%;
+ height: 100%;
+ }
+
+ #main-menu {
+ width: 100% !important;
+ }
+
+ #main-menu > div:first-child:is(.expander) {
+ display: none;
+ }
+
+ .navmenu {
+ width: 100%;
+ }
+
+ #navmenu-toggle {
+ appearance: none;
+ }
+
+ #navmenu-toggle ~ nav {
+ display: none;
+ }
+
+ #navmenu-toggle:checked ~ nav {
+ display: block;
+ }
+
+ .navmenu-icon {
+ cursor: pointer;
+ z-index: 10;
+ display: block;
+ position: absolute;
+ top: 15px;
+ left: unset;
+ right: 20px;
+ width: 20px;
+ height: 20px;
+ border: none;
+ }
+
+ [dir="rtl"] .navmenu-icon {
+ left: 20px;
+ right: unset;
+ }
+}
diff --git a/BlazorFluentUI/wwwroot/favicon.ico b/BlazorFluentUI/wwwroot/favicon.ico
new file mode 100644
index 0000000..e189d8e
Binary files /dev/null and b/BlazorFluentUI/wwwroot/favicon.ico differ
diff --git a/BlazorFluentUIPractice.sln b/BlazorFluentUIPractice.sln
new file mode 100644
index 0000000..aae9700
--- /dev/null
+++ b/BlazorFluentUIPractice.sln
@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.5.002.0
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorFluentUI", "BlazorFluentUI\BlazorFluentUI.csproj", "{DDEFC9E7-F7D5-4ADA-B733-FBF26821676D}"
+EndProject
+Global
+ GlobalSection(SolutionConfigurationPlatforms) = preSolution
+ Debug|Any CPU = Debug|Any CPU
+ Release|Any CPU = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(ProjectConfigurationPlatforms) = postSolution
+ {DDEFC9E7-F7D5-4ADA-B733-FBF26821676D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+ {DDEFC9E7-F7D5-4ADA-B733-FBF26821676D}.Debug|Any CPU.Build.0 = Debug|Any CPU
+ {DDEFC9E7-F7D5-4ADA-B733-FBF26821676D}.Release|Any CPU.ActiveCfg = Release|Any CPU
+ {DDEFC9E7-F7D5-4ADA-B733-FBF26821676D}.Release|Any CPU.Build.0 = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(SolutionProperties) = preSolution
+ HideSolutionNode = FALSE
+ EndGlobalSection
+ GlobalSection(ExtensibilityGlobals) = postSolution
+ SolutionGuid = {48AA7620-6AE4-454B-90B7-6E39699F75D9}
+ EndGlobalSection
+EndGlobal