Skip to main content
STUDS builds on Blazor to provide a streamlined UI design system. To integrate it into your project, follow these steps.

​
Step 1: Install the Studs.Blazor package from NuGet

To add STUDS to your Blazor project, install the Studs.Blazor package from NuGet. This package contains the necessary components and styles to get you started. .NET CLI 
dotnet add package Studs.Blazor
Package Manger 
NuGet\Install-Package Studs.Blazor
Add by PackageReference 
<PackageReference Include="Studs.Blazor" Version="3.0.0" />

​
Step 2: Import the Namespace

To use STUDS in your Blazor project, add the following line to your _Imports.razor file: 
@using Studs
@using Studs.Blazor

​
Step 3: Add the STUDS CSS

​
How to install @studs/styles

  • Package Manager Installation
  • CDN
Install @studs/styles using your prefered package manager.
npm install @studs/styles@latest

​
Order of Imports

Ensure that the @studs/styles is applied before any other styles to avoid conflicts. This will provide base styling for your project. The order should be:
  1. @studs/styles
  2. Any additional app-specific styles.

​
How to add @studs/styles to your Blazor Application

In your wwwroot/index.html file, add the following line to the <head> section: 
<link
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,100,1,200"
      rel="stylesheet"
    />
<link href="node_modules/@studs/styles/public/css/studs-styles.css" rel="stylesheet" />
<link rel="stylesheet" href="_content/Studs.Blazor/css/studs.css">

​
Step 4: Include the Studs.Blazor JS

Open the App.razor file of your application. Add this code after the last <script> tag: 
<script src="_content/Studs.Blazor/Studs.Blazor.js"></script>

​
Step 5: Use a STUDS Component

<StudsButton Click="@ButtonClicked" Text="Button"></StudsButton>
@code {
  void ButtonClicked()
  {
    // Handle the Click event of StudsButton
  }
}

​
Step 6: Use Dialog, Notification, ContextMenu and Tooltip components

Open the MainLayout.razor file and include: 
<StudsComponents />
Set the @rendermode attribute to the render mode of your application e.g. InteractiveServer, InteractiveWebAssembly or InteractiveAuto. Open the Program.cs file and include:
builder.Services.AddStudsComponents();
⌘I