Installation - LumexUI

Prerequisites

Before you begin, ensure that you have the following:

.NET SDK 8 or later
Tailwind CSS 4.0
An existing Blazor project or create a new one

Install LumexUI

Install LumexUI using the .NET CLI or NuGet Package Manager.
Terminal
› dotnet add package LumexUI
Install Tailwind CSS

LumexUI is built on top of Tailwind CSS. Start by following the official installation guide, then update the app’s CSS file.

Note: The Tailwind standalone CLI is recommended if Node.js or npm are not required.
app.css
@import "tailwindcss"; @import "../bin/lumexui/theme"; /* theme */ @source "../bin/lumexui/*.cs"; /* styles */
Configure startup file

Add the necessary LumexUI services to Program.cs file.
Program.cs
using LumexUI.Extensions; // ... builder.Services.AddLumexServices();

Include CSS and JS

Add the static files to the <head> and <body> sections of the page.

App.razor

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="app.css" rel="stylesheet" />
</head>
<body>
    <script src="_content/LumexUI/js/LumexUI.js" type="module"></script>
    <!-- Other scripts -->
</body>
</html>

Start using LumexUI

All set! Begin integrating and using LumexUI components throughout the project.
Component.razor
@using LumexUI <LumexButton>Click me</LumexButton>

Prerequisites

Install LumexUI

Install Tailwind CSS

Configure startup file

Include CSS and JS

Start using LumexUI