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 via terminal using .NET CLI or NuGet Package Manager.
Terminal› dotnet add package LumexUIInstall Tailwind CSS
LumexUI is built on top of Tailwind CSS. To install it, follow the official installation guide. Then, modify your app CSS file.
Note: Using Tailwind standalone CLI is recommended if you don't need Node.js or npm.
app.css@import "tailwindcss"; @import "../bin/lumexui/theme"; /* theme file */ @source "../bin/lumexui/*.cs"; /* components styles */Configure startup file
Inject the vital LumexUI services in the
Program.cs.Program.csusing LumexUI.Extensions; // ... builder.Services.AddLumexServices();Include CSS and JS
Include the mandatory static files into the
<head>and the<body>.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> </body> </html>Setup theme provider
Add the
LumexThemeProviderinto yourMainLayout.razorfile to enable theming.MainLayout.razor<LumexThemeProvider />