Blazority

Blazority

Blazority is a Blazor component library based on Clarity UI. It's components are easy to use, pure components built using Blazor, with little to no JavaScript.

Getting Started

Install Blazority Nuget Package in your project via Package Manager CLI or UI:


                    Install-Package Blazority

Add the following using statements in your _Imports.razor file:


                    @using Blazority

Add the following stylesheets in the head section of your Index file (like _Host.cshtml):

                
                    <link rel="stylesheet" href="_content/Blazority/lib/clr/ui/clr-ui.min.css" />
<link rel="stylesheet" href="_content/Blazority/lib/clr/icons/clr-icons.min.css" />
<link rel="stylesheet" href="_content/Blazority/blazority.min.css" />

Add the following scripts near the bottom portion of your body tag in the same Index file:

                
                    <script src="_content/Blazority/lib/webcomponents/custom-elements/custom-elements.min.js"></script>
<script src="_content/Blazority/lib/clr/icons/clr-icons.min.js"></script>
<script src="_content/Blazority/blazority.min.js"></script>

In your _Host.cshtml (Blazor Server) or index.html (Blasm Wasm), set light or dark theme on body element.

                
                    <!--For light theme-->
<body cds-theme="light"></body>
<!--For dark theme-->
<body cds-theme="dark"></body>

If you already have Clarity and above mentioned dependencies loaded through other means, simply skip them from instructions.