Learn how to get started with the free and open-source Flowbite Blazor component library based on the utility classes from Tailwind CSS
Quickly scaffold a new Flowbite Blazor Web or Desktop application using the CLI
- If needed, download and install the .NET SDK
- Install the .NET Templates from NuGet. This allows you scaffold new projects
- Scaffold a new a Standalone WASM Web Application (i.e. client-side only)
- Before building, one must install the Tailwind CSS CLI application. Copy the commands below to download the standalone exe to the project's ./tools directory.
- Build and run the project via `watch` (to allow hot reloading). The build console output will state the URL being served (e.g. http://localhost:5269)
dotnet new install Flowbite.Blazor.Templates
dotnet new flowbite-blazor-wasm -o MyUnicornApp && cd MyUnicornApp
mkdir ./tools && cd ./tools && curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.8/tailwindcss-macos-arm64 && chmod +x tailwindcss-macos-arm64 && mv tailwindcss-macos-arm64 tailwindcss && cd ..
dotnet watch
Required Configuration
Service Registration
Register Flowbite services in your Program.cs:
using Flowbite.Services;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
// ... other configuration
builder.Services.AddFlowbite();
await builder.Build().RunAsync();
This registers TailwindMerge, Floating UI, clipboard, focus management, modal, drawer, and toast services.
Floating UI Script
For Dropdown, Tooltip, and Popover positioning, add the Floating UI script to your index.html before the closing </body> tag:
<script src="https://cdn.jsdelivr.net/npm/@@floating-ui/dom@@1.6.13/dist/floating-ui.dom.umd.min.js"></script>
What's Next?
Check out our components documentation to learn more about available components and their usage. For a more detailed setup guide, visit the introduction page.
AI Support? 🤖
Point your favorite AI coding assistant to our single file documentation page for it to quickly learn about the available .NET templates, Blazor components, and their usage.