Sysinfocus.AspNetCore.Components 0.0.3.3

dotnet add package Sysinfocus.AspNetCore.Components --version 0.0.3.3
                    
NuGet\Install-Package Sysinfocus.AspNetCore.Components -Version 0.0.3.3
                    
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="Sysinfocus.AspNetCore.Components" Version="0.0.3.3" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Sysinfocus.AspNetCore.Components" Version="0.0.3.3" />
                    
Directory.Packages.props
<PackageReference Include="Sysinfocus.AspNetCore.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 Sysinfocus.AspNetCore.Components --version 0.0.3.3
                    
#r "nuget: Sysinfocus.AspNetCore.Components, 0.0.3.3"
                    
#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 Sysinfocus.AspNetCore.Components@0.0.3.3
                    
#: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=Sysinfocus.AspNetCore.Components&version=0.0.3.3
                    
Install as a Cake Addin
#tool nuget:?package=Sysinfocus.AspNetCore.Components&version=0.0.3.3
                    
Install as a Cake Tool

Sysinfocus simple/ui

a Razor component library for Blazor, inspired by the shadcn/ui components.

Setup Instructions

  1. Download the NuGet package Sysinfocus.AspNetCore.Components to your project.

  2. Add @using Sysinfocus.AspNetCore.Components to your _import.razor file.

  3. Add builder.Services.AddSysinfocus(false); to your Program.cs file.

  4. Add the following CSS to your project's appropriate file as this depends upon the type of project being used.

    /// For .NET 8
    <link rel="stylesheet" href="_content/Sysinfocus.AspNetCore.Components/styles.css" />
    <link rel="stylesheet" href="_content/Sysinfocus.AspNetCore.Components/Sysinfocus.AspNetCore.Components.bundle.scp.css" />
    
    /// For .NET 9
    <link rel="stylesheet" href="@Assets["_content/Sysinfocus.AspNetCore.Components/styles.css"]" />
    <link rel="stylesheet" href="@Assets["_content/Sysinfocus.AspNetCore.Components/Sysinfocus.AspNetCore.Components.bundle.scp.css"]" />
    
    /// For .NET 9 - if UI is initialized in .html page
    <link rel="stylesheet" href="_content/Sysinfocus.AspNetCore.Components/styles.css" />
    <link rel="stylesheet" href="_content/Sysinfocus.AspNetCore.Components/Sysinfocus.AspNetCore.Components.bundle.scp.css" />
    
  5. Add the following initialization code to your MainLayout.razor or any layout file which you host the components.

    @inherits LayoutComponentBase
    @inject Initialization init
    
    <div @onclick="init.HandleMainLayoutClickEvent"> // this is required for some components to close on click outside of its hosting component.
      @Body
    </div>
    
    @code
    {
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
        // This initializes the theme for the components.
        // Then you can use init.ToggleTheme() to toggle between light and dark modes.    
        if (firstRender) await init.InitializeTheme(); 
      }
    }
    
  6. For non-interactive Blazor SSR, you need to add the light or dark class to body tag manually as it can't initialize automatically.

  7. For more information, you can download the samples from this repo which has all these steps done and the projects are ready to explore.

  8. To see the demo of each component, check out Demo

Have issues?

Open an issue on this repo or email to issues@sysinfocus.com

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 was computed.  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 was computed.  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 Sysinfocus.AspNetCore.Components:

Package Downloads
Sysinfocus.AspNetCore.Components.AIChat

AI Chat component for Sysinfocus simple/ui

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.0.3.3 1,151 7/24/2025
0.0.3.2 539 6/10/2025
0.0.3.1 292 5/10/2025
0.0.3 224 4/28/2025
0.0.2.9 337 4/17/2025
0.0.2.8 269 3/29/2025
0.0.2.7 436 3/24/2025
0.0.2.6 989 3/23/2025 0.0.2.6 is deprecated.
0.0.2.5 238 3/12/2025
0.0.2.4 369 2/25/2025
0.0.2.3 243 2/10/2025
0.0.2.2 162 2/3/2025
0.0.2.1 229 1/31/2025
0.0.2 110 1/12/2025
0.0.1.9 252 11/7/2024
0.0.1.8 258 10/7/2024
0.0.1.7 207 9/30/2024
0.0.1.6 171 9/27/2024
0.0.1.5 136 9/21/2024
0.0.1.4 514 9/19/2024
0.0.1.3 131 9/16/2024
0.0.1.2 119 9/16/2024
0.0.1.1 139 9/14/2024
0.0.1 292 9/12/2024

Check the release notes @ https://github.com/Sysinfocus/simple-ui