Prerequisites
Before you begin, ensure that you have the following:
- .NET SDK 8 or later
- Tailwind CSS 3.4
- An existing Blazor project or create a new one
Please be aware that LumexUI isn't fully compatible with Tailwind CSS v4.0 at this time. If this is the version you plan on using, proceed at your own risk. More information can be found in this Github conversation.
Install LumexUI
Install LumexUI via terminal using .NET CLI.
Terminal› dotnet add package LumexUIInstall Tailwind CSS
LumexUI is built on top of Tailwind CSS. To install, follow the official installation guide. Then, modify the
Note: thetailwind.config.jsfile.PATH_TO_NUGETis the NuGet package path on the machine.tailwind.config.jsconst lumexui = require("{PATH_TO_NUGET}/theme/plugin"); /** @type {import("tailwindcss").Config} */ module.exports = { content: [ // ... "{PATH_TO_NUGET}/theme/components/*.cs" ], theme: { extend: {}, }, plugins: [lumexui], };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="output.css" rel="stylesheet" /> </head> <body> <script src="_content/LumexUI/js/LumexUI.js" type="module"></script> <!-- Blazor framework assets --> </body> </html>Import library's namespace
Modify
_Imports.razorfile to easily access components throughout your app._Imports.razor@using LumexUISetup theme provider
Add the
LumexThemeProviderinto yourMainLayout.razorfile to enable theming.MainLayout.razor<LumexThemeProvider />Use the components
Now you are all set up to start using LumexUI components in your app!
Index.razor<LumexButton>Click Me</LumexButton>