Getting Started

Installation

Follow the steps below to get started with LumexUI quickly!

Prerequisites

Before you begin, ensure that you have the following:

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.


  1. Install LumexUI

    Install LumexUI via terminal using .NET CLI.

    Terminal
    › dotnet add package LumexUI
    
  2. 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.

    Note: the PATH_TO_NUGET is the NuGet package path on the machine.
    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],
    };
    
  3. Configure startup file

    Inject the vital LumexUI services in the Program.cs.

    Program.cs
    using LumexUI.Extensions;
    
    builder.Services.AddLumexServices();
    
  4. 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>
    
  5. Import library's namespace

    Modify _Imports.razor file to easily access components throughout your app.

    _Imports.razor
    @using LumexUI
    
  6. Setup theme provider

    Add the LumexThemeProvider into your MainLayout.razor file to enable theming.

    MainLayout.razor
    <LumexThemeProvider />
    
  7. 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 🗙