AllSpice.Flowbite.Blazor 0.2.1-beta

AllSpice.Flowbite.Blazor

Flowbite component library for ASP.NET Blazor 10.0, providing a comprehensive set of UI components styled with TailwindCSS v4. This library is an upgraded and maintained version, bringing Flowbite's beautiful design system to the modern Blazor ecosystem.

Installation

1. Install the NuGet Package

dotnet add package AllSpice.Flowbite.Blazor --prerelease

2. Install Tailwind CSS v4

Install Tailwind CSS v4 CLI (no config file needed):

npm install -D @tailwindcss/cli@latest

3. Configure Tailwind CSS v4

Tailwind CSS v4 uses CSS-first configuration - no tailwind.config.js needed!

Create or update your main CSS file (e.g., wwwroot/css/app.css):

@import "tailwindcss";
@plugin "flowbite/plugin";

That's it! Tailwind CSS v4 automatically discovers your content files.

4. Build Tailwind CSS

Add a build script to your package.json:

{
  "scripts": {
    "build:css": "@tailwindcss/cli -i ./wwwroot/css/app.css -o ./wwwroot/css/app.min.css --minify"
  }
}

Or use MSBuild targets (see your project's .csproj for examples).

5. Add Static Asset References

Add to your wwwroot/index.html:

<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="_content/AllSpice.Flowbite.Blazor/flowbite.min.css" />
<script src="_content/AllSpice.Flowbite.Blazor/flowbite.js"></script>

6. Add Namespace Imports

Add to your _Imports.razor:

@using Flowbite.Base
@using Flowbite.Components
@using Flowbite.Components.Accordion
@using Flowbite.Components.BottomNavigation
@using Flowbite.Components.Carousel
@using Flowbite.Components.Chat
@using Flowbite.Components.Tabs
@using Flowbite.Components.Table
@using Flowbite.Services
@using Flowbite.Icons

7. Register Services

In your Program.cs:

using Flowbite.Services;

// ... existing code ...
builder.Services.AddFlowbite();

Basic Usage

<Button Color="ButtonColor.Primary" Size="ButtonSize.Large">
    Click me!
</Button>

<Alert Color="AlertColor.Info">
    This is an info alert!
</Alert>

<Tooltip Text="This is a tooltip">
    <Button>Hover me</Button>
</Tooltip>

<Accordion Mode="AccordionMode.Collapse">
    <AccordionItem DefaultOpen="true">
        <HeaderContent>
            <span>What is Flowbite?</span>
        </HeaderContent>
        <ChildContent>
            <p>Flowbite is an open-source library...</p>
        </ChildContent>
    </AccordionItem>
</Accordion>

Available Components

Core UI Components

• Accordion - Collapsible content sections with smooth animations
• Alert - Contextual feedback messages with multiple color variants
• Avatar - User profile pictures or initials with status indicators
• Badge - Small count and labeling components
• Breadcrumb - Navigation aid showing page hierarchy
• Button - Customizable buttons with various styles, sizes, and states
• Card - Flexible content containers with headers, bodies, and footers
• Dropdown - Interactive dropdown menus with keyboard navigation
• Modal - Dialog boxes and overlays
• Navbar - Responsive top navigation bars
• Sidebar - Responsive side navigation with collapsible sections
• Spinner - Loading indicators with multiple sizes
• Tooltip - Hover tooltips for any element

Navigation Components

• BottomNavigation - Fixed bottom navigation bar for mobile apps
• Breadcrumb - Page hierarchy navigation
• Navbar - Top navigation with responsive menu
• Sidebar - Side navigation with collapsible items

Form Components

• Checkbox - Checkbox inputs with validation states
• FileInput - File upload inputs with preview
• Label - Form labels with validation styling
• Radio - Radio button groups
• RangeSlider - Range input sliders
• Select - Dropdown select inputs
• Textarea - Multi-line text inputs
• TextInput - Text input fields with validation
• ToggleSwitch - Toggle switch components

Advanced Components

• Carousel - Image and content carousels with indicators
• Chat - Chat interface components with messages, input, and actions
• Combobox - Searchable dropdown comboboxes
• Drawer - Slide-out drawers and panels
• Table - Data tables with sorting and filtering
• Tabs - Tabbed interfaces with multiple panels
• Timeline - Timeline components for events and activities
• Toast - Toast notifications with auto-dismiss
• Toolbar - Toolbar components with actions and buttons

Utility Components

• CodeBlock - Syntax-highlighted code blocks
• DarkMode - Dark mode toggle component
• Skeleton - Loading placeholders (text, image, video)
• Toolbar - Action toolbars

Typography Components

• Heading - Semantic heading components
• Paragraph - Styled paragraph text
• Span - Inline text styling

Layout Components

• Layout Components - Pre-built layout structures

Icon Components

• Flowbite.Icons - Core icon set included with the main package
• Flowbite.ExtendedIcons - Additional icons available in separate package

Component Categories

Sub-Namespaces

For components in sub-namespaces, add specific imports:

@using Flowbite.Components.Accordion       // Accordion, AccordionItem
@using Flowbite.Components.BottomNavigation  // BottomNavigation, BottomNavigationItem
@using Flowbite.Components.Carousel        // Carousel, CarouselItem
@using Flowbite.Components.Chat            // Chat components
@using Flowbite.Components.Tabs            // Tabs, Tab, TabPanel
@using Flowbite.Components.Table           // Table components

Features

• ✅ .NET 10.0 - Built for the latest .NET and Blazor
• ✅ Tailwind CSS v4 - Modern CSS-first configuration
• ✅ Flowbite v4 - Latest Flowbite design system
• 🎨 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
• 🚀 Native Blazor Events - Seamless integration with Blazor's event system
• 🎯 Strong Typing - Full type safety and IntelliSense support
• 📖 XML Documentation - Comprehensive inline documentation

Additional Icons Package

Looking for more icons? Install the extended icons package:

dotnet add package AllSpice.Flowbite.Blazor.ExtendedIcons --prerelease

Then add to your _Imports.razor:

@using Flowbite.Icons.Extended

Requirements

• .NET 10.0 or later
• Blazor WebAssembly or Blazor Server
• Tailwind CSS v4.x

Documentation

For detailed documentation, examples, and component APIs, visit our GitHub repository.

License

This project is licensed under the MIT License.

Author

Afnan Bashir - AllSpice Technologies

This project is based on Flowbite Blazor, originally created by Todd Schavey (PeakFlames).