Flowbite Blazor

Flowbite Blazor - UI Component Library

Learn more about the free and open-source Flowbite Blazor UI components and start building modern web applications using Blazor components based on Tailwind CSS

Flowbite Blazor is a free and open-source UI component library based on the core Flowbite components and built with Blazor components and interactivity handling.

This library features hundreds of interactive elements such as navbars, dropdowns, modals, and sidebars all handled by Blazor and based on the utility classes from Tailwind CSS.

Getting started#

Learn how to get started with Flowbite Blazor and start leveraging the interactive Blazor components coupled with Flowbite and Tailwind CSS.

Setup Tailwind CSS#

Follow these steps to set up Tailwind CSS in your Blazor project:

Create a postcss.config.js file in your project root:


module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Create a tailwind.config.js file:


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './**/*.{razor,html,cshtml}',
    '../Flowbite/**/*.{razor,html,cshtml}'
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

Create or update your wwwroot/css/app.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Add the CSS file to your _Host.cshtml or index.html:

<link href="css/app.min.css" rel="stylesheet" />

Note: Tailwind CSS processing is handled automatically through MSBuild during the build process. No npm or node.js installation is required.

Install Flowbite Blazor#

Install the Flowbite Blazor NuGet package:

dotnet add package Flowbite --version 0.0.1-alpha --prerelease

Update your tailwind.config.js to include Flowbite styles:


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './**/*.{razor,html,cshtml}',
    '../Flowbite/**/*.{razor,html,cshtml}'
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

Add Flowbite services in your Program.cs:


using Flowbite;

builder.Services.AddFlowbiteServices();

Add the Flowbite using statements in _Imports.razor:

@using Flowbite
@using Flowbite.Components

Try it out#

Now you can start using Flowbite Blazor components in your .razor files. Here's a simple example:

@page "/counter"

<div class="p-4">
    <h1 class="text-2xl font-bold mb-4">Counter</h1>
    
    <p class="mb-4">Current count: @currentCount</p>
    
    <Button Color="ButtonColor.Primary" @onclick="IncrementCount">
        Click me
    </Button>
</div>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Troubleshooting#

Common Issues

Styles Not Loading

Ensure app.min.css is properly linked in your HTML
Verify tailwind.config.js content paths are correct
Check if the MSBuild Tailwind CSS task ran successfully
Check browser console for CSS loading errors

Components Not Rendering

Verify Flowbite services are registered in Program.cs
Check _Imports.razor includes Flowbite namespaces
Ensure component parameters are properly set
Look for errors in browser console or Visual Studio output

Dark Mode Issues

Confirm darkMode: 'class' in tailwind.config.js
Verify dark: prefix in component classes
Check if dark mode class is properly toggled on html tag

Next steps#

Dark Mode

Flowbite Blazor supports dark mode out of the box. To implement dark mode in your app:

// Add dark class to html tag
document.documentElement.classList.add('dark');

Or toggle dynamically:

// Check user preference
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.classList.add('dark')
}

Customization

Customize components by extending your tailwind.config.js theme:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... other shades
          900: '#0c4a6e',
        },
      },
    },
  },
}

Contributing

We welcome contributions! Please check our contributing guidelines for details on how to get started.