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#
- 🎨 TailwindCSS Integration - Beautiful, responsive designs out of the box
- 🌙 Dark Mode Support - Automatic dark mode through TailwindCSS classes
- ♿ Built-in Accessibility - ARIA attributes and keyboard navigation included
- 📱 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 TailwindCSS
- 🔌 Extended Icons - Optional package for additional icon components
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 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
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.