Getting Started

Installation

Follow the steps below to get started with LumexUI quickly!

Prerequisites

Before you begin, ensure that you have the following:

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

Install LumexUI

Install LumexUI via terminal using .NET CLI.
Terminal
› dotnet add package LumexUI --prerelease

Install Tailwind CSS

LumexUI is built on top of Tailwind CSS. To install, follow the official installation guide. Then, modify the tailwind.config.js file.

tailwind.config.js

const 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.cs
using LumexUI.Extensions; builder.Services.AddLumexService();

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/LumexUI.js"></script>
       <script src="_framework/blazor.webassembly.js"></script>
   </body>
   </html>

Import library's namespace

Modify _Imports.razor file to easily access components throughout your app.
_Imports.razor
@using LumexUI
Setup theme provider

Add the LumexThemeProvider into your MainLayout.razor file 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>

An unhandled error has occurred. Reload 🗙