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.
Features#
Core Features
- 🎨 Tailwind CSS v4 Integration - CSS-first configuration with @theme directive
- 🌙 Dark Mode Support - Automatic dark mode through Tailwind CSS classes
- ♿ Built-in Accessibility - ARIA attributes and full keyboard navigation support
- 📱 Responsive Design - Mobile-first components that work everywhere
- 🚀 Native Blazor Events - Seamless integration with Blazor's event system
- 🎯 Strong Typing - Full type safety and IntelliSense support
- 📦 No Node.js Required - Simple MSBuild integration for Tailwind CSS
- 🔌 Extended Icons - Optional package for additional icon components
New in v0.2.x
- 🔀 TailwindMerge Integration - Automatic class conflict resolution via MergeClasses()
- 🎰 Slot System - Fine-grained component customization with typed slot classes
- 📍 Floating UI Positioning - Smart viewport-aware positioning for Dropdown, Tooltip, and Popover
- ⏱️ Debounced Input - Built-in debouncing for TextInput search scenarios
- 🎬 Animation State Machine - Smooth height-based animations for SidebarCollapse
- ⚡ Lazy JavaScript Modules - On-demand loading of JS modules for better performance
- 🎯 motion-reduce Support - Respects user's reduced motion preferences
Getting started#
Select from the Button immediately below to learn how to get started with Flowbite Blazor and start leveraging the interactive Blazor components coupled with Flowbite and Tailwind CSS.
Troubleshooting#
Common Issues
Styles Not Loading
- Ensure app.min.css is properly linked in your HTML
- Verify @source paths in app.css are correct for your project structure
- Check if the MSBuild Tailwind CSS task ran successfully
- Check browser console for CSS loading errors
Components Not Rendering
- Verify Flowbite services are registered via builder.Services.AddFlowbite()
- 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
- Tailwind v4 uses selector-based dark mode by default (no config needed)
- Verify dark: prefix in component classes
- Check if dark mode class is properly toggled on html tag
Customization
Tailwind CSS v4 uses CSS-first configuration. Customize your theme directly in your app.css file using the @theme directive:
@@import "tailwindcss";
@@theme {
--color-primary-50: #f0f9ff;
--color-primary-100: #e0f2fe;
--color-primary-200: #bae6fd;
--color-primary-300: #7dd3fc;
--color-primary-400: #38bdf8;
--color-primary-500: #0ea5e9;
--color-primary-600: #0284c7;
--color-primary-700: #0369a1;
--color-primary-800: #075985;
--color-primary-900: #0c4a6e;
--color-primary-950: #082f49;
}
@@source "../../Flowbite/Components";
@@source "../Pages";
@@source "../Layout";
Contributing
We welcome contributions! Please check our contributing guidelines for details on how to get started.