```
#### Tooltip Examples
Tooltip uses Floating UI for smart viewport-aware positioning with automatic flip and shift behavior.
```razor
```
### Tooltip Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `Content` | `string` | **Required** | Tooltip text |
| `Placement` | `TooltipPlacement` | `Top` | Position relative to trigger |
| `Theme` | `string` | `"dark"` | Visual theme (dark, light) |
| `Trigger` | `string` | `"hover"` | Trigger mode (hover, click) |
| `Arrow` | `bool` | `true` | Show arrow pointer |
| `Animation` | `string?` | `"duration-300"` | CSS transition duration |
| `Class` | `string?` | `null` | Additional CSS classes |
### TooltipPlacement Options
| Value | Description |
|-------|-------------|
| `Auto` | Auto-select best placement |
| `Top` | Above the trigger |
| `Bottom` | Below the trigger |
| `Left` | To the left of trigger |
| `Right` | To the right of trigger |
### Floating UI Behavior
The tooltip automatically:
- **Flips** to opposite side when near viewport edge
- **Shifts** along axis to stay visible
- Updates position on scroll/resize
### Keyboard Support
- **Escape**: Close tooltip (when visible)
- Shows on focus for keyboard accessibility
#### Table Examples
```razor
Product nameColorCategoryPriceEditApple MacBook Pro 17"SliverLaptop$2999Edit
... More rows...
ProductCategoryPrice
@foreach (var product in _products)
{
@product.Name@product.Category@product.Price
}
@code {
private List _products = new()
{
new() { Name = "Apple MacBook Pro 17\"", Category = "Laptop", Price = "$2999" },
new() { Name = "Microsoft Surface Pro", Category = "Tablet", Price = "$999" },
new() { Name = "Magic Mouse 2", Category = "Accessories", Price = "$99" }
};
private void OnSelectionChange(Product product, bool selected)
{
product.IsSelected = selected;
StateHasChanged();
}
private class Product
{
public bool IsSelected { get; set; }
public string Name { get; set; } = string.Empty;
public string Category { get; set; } = string.Empty;
public string Price { get; set; } = string.Empty;
}
}
```
#### Form Component Examples
The available form components are:
- Label - For form field labels with required/disabled states
- TextInput - Text input with sizes, states, addons, and debouncing
- Textarea - Multi-line text input
- Select - Dropdown selection with sizes and states
- Checkbox - Single checkbox with label
- Radio - Radio button groups
- FileInput - File upload input
- ToggleSwitch - Toggle switch with label
- RangeSlider - Range slider with sizes
```razor
```
### TextInput Debouncing
For search-as-you-type scenarios, use the `Behavior` and `DebounceDelay` parameters:
```razor
@code {
private string SearchQuery { get; set; } = "";
// ValueChanged fires 300ms after user stops typing
// Previous pending calls are automatically cancelled
}
```
### InputBehavior Options
| Value | Description |
|-------|-------------|
| `OnChange` (default) | Fire on blur or Enter key - standard form behavior |
| `OnInput` | Fire on every keystroke (subject to DebounceDelay) |
```razor
```
#### Form Validation Examples
The Flowbite Blazor library supports both built-in DataAnnotations validation and custom validation scenarios:
##### Basic Form Validation with DataAnnotations
```razor
@code {
private class RegisterModel
{
[Required]
[EmailAddress]
public string Email { get; set; } = "";
[Required]
[MinLength(8)]
public string Password { get; set; } = "";
}
}
```
##### Form State Management
```razor
Form Status: @(editContext?.IsModified() ?? false ? "Modified" : "Unmodified")
@code {
private EditContext? editContext;
private Model model = new();
protected override void OnInitialized()
{
editContext = new EditContext(model);
}
private void OnNameChanged()
{
// Notify EditContext that field changed (for IsModified tracking)
editContext?.NotifyFieldChanged(editContext.Field(nameof(model.Name)));
}
private void ResetForm()
{
model = new Model();
editContext = new EditContext(model);
}
}
```
### TextInput Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `@bind-Value` | `TValue` | - | Two-way data binding (recommended) |
| `Type` | `string` | `"text"` | HTML input type |
| `Size` | `TextInputSize` | `Medium` | Size variant |
| `Color` | `TextInputColor?` | `null` | Color variant (null = auto-validation colors) |
| `Placeholder` | `string?` | `null` | Placeholder text |
| `Disabled` | `bool` | `false` | Disabled state |
| `Required` | `bool` | `false` | Required field |
| `Shadow` | `bool` | `false` | Shadow effect |
| `HelperText` | `string?` | `null` | Help text below input |
| `Icon` | `IconBase?` | `null` | Left icon |
| `RightIcon` | `IconBase?` | `null` | Right icon |
| `AddonLeft` | `string?` | `null` | Left text addon |
| `AddonRight` | `string?` | `null` | Right text addon |
| `Behavior` | `InputBehavior` | `OnChange` | When to fire ValueChanged |
| `DebounceDelay` | `int` | `0` | Debounce delay (ms) |
| `Pattern` | `string?` | `null` | Regex validation pattern |
| `InputMode` | `string?` | `null` | Mobile keyboard hint |
| `Class` | `string?` | `null` | Additional CSS classes |
The form validation system integrates seamlessly with Blazor's built-in form handling while providing additional features for debouncing, custom validation scenarios, and state management. TextInput, Textarea, and Select components automatically display red/Failure color when validation errors occur (when Color is null). Set an explicit Color to override this automatic behavior. All form components integrate with ValidationMessage components.
#### QuickGrid Examples
Leverage the Microsoft's QuickGrid Blazor componet and achieve Flowbite styling by applying the flowbite-grid CSS class and the Theme="flowbite".
```razor
@* the parent div must have both the grid and flowbite-grid classes *@
This drawer slides in from the left side of the page.
Right Drawer
This drawer slides in from the right side of the page.
Top Drawer
This drawer slides in from the top of the page.
Bottom Drawer
This drawer slides in from the bottom of the page.
@code {
private bool showLeftDrawer = false;
private bool showRightDrawer = false;
private bool showTopDrawer = false;
private bool showBottomDrawer = false;
}
```
#### Toast Examples
__Default Toast:__
```razor
```
__Toast Types:__
The `ToastService` provides helper methods to show different types of toasts.
```csharp
public enum ToastType
{
Default,
Info,
Success,
Warning,
Error
}
```
```razor
```
__Toast Positioning:__
Positioning is controlled by the `Position` parameter on the `` component.
```csharp
public enum ToastPosition
{
TopLeft,
TopCenter,
TopRight,
BottomLeft,
BottomCenter,
BottomRight
}
```
```razor
@code {
private ToastPosition currentPosition = ToastPosition.TopRight;
private void SetPosition(ToastPosition newPosition)
{
currentPosition = newPosition;
ToastService.Show($"Position set to {newPosition}", hostId: "position-demo");
}
}
#### Toolbar Examples
The Toolbar component provides a flexible container for grouping actions, buttons, inputs, and other controls with consistent spacing and layout. It supports left-aligned content and optional right-aligned content.
**Toolbar Parameters:**
- `ChildContent`: Main content area (left side of toolbar)
- `End`: Optional content for the right side of the toolbar
- `Embedded`: When true, removes background and border styling for embedded use (default: false)
**ToolbarButton Colors:**
- ToolbarButtonColor.Gray
- ToolbarButtonColor.Dark
**ToolbarButton Sizes:**
- ToolbarButtonSize.ExtraSmall
- ToolbarButtonSize.Small
- ToolbarButtonSize.Medium
- ToolbarButtonSize.Large
```razor
#### Heading Examples
The Heading component renders semantic HTML headings (h1-h6) with consistent styling.
**Available heading tags:**
- HeadingTag.H1 (default) - text-5xl, font-extrabold
- HeadingTag.H2 - text-4xl, font-bold
- HeadingTag.H3 - text-3xl, font-bold
- HeadingTag.H4 - text-2xl, font-bold
- HeadingTag.H5 - text-xl, font-bold
- HeadingTag.H6 - text-lg, font-bold
**Optional parameters:**
- `Size` (TextSize?) - Override default tag-based sizing
- `Weight` (FontWeight?) - Override default weight
- `Gradient` (GradientColor) - Apply gradient text effect
- `CustomColor` (string?) - Custom Tailwind color classes
**Default colors:**
- Light mode: text-gray-900
- Dark mode: text-white
```razor
Page TitleSection HeadingSubsection Heading
Extra Large H2
Light Heading
Gradient Title
Blue Heading
Large Gradient Title
```
#### Paragraph Examples
The Paragraph component renders paragraph text with flexible styling options.
**Parameters:**
- `Size` (TextSize) - Text size (default: Base)
- `Weight` (FontWeight?) - Font weight
- `Leading` (LineHeight?) - Line height spacing
- `Align` (TextAlign?) - Text alignment
- `Tracking` (LetterSpacing?) - Letter spacing
- `Space` (Whitespace?) - Whitespace handling
- `Gradient` (GradientColor) - Gradient text effect
- `CustomColor` (string?) - Custom color classes
- `FirstLetterUpper` (bool) - Drop cap styling
- `Opacity` (int?) - Opacity level (0-100)
- `Italic` (bool) - Italic styling
- `Underline` (bool) - Underline decoration
**Default colors:**
- Light mode: text-gray-700
- Dark mode: text-gray-400
```razor
This is a paragraph with default styling.
Larger, medium weight paragraph text.
Center-aligned paragraph text.
Paragraph with relaxed line spacing for improved readability.
Italic paragraph text for emphasis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Gradient paragraph text
Custom colored paragraph text.
Paragraph with wider letter spacing.
```
#### Span Examples
The Span component provides inline text styling within larger text blocks.
**Parameters:**
- `Size` (TextSize) - Text size (default: Base)
- `Weight` (FontWeight?) - Font weight
- `Gradient` (GradientColor) - Gradient text effect
- `CustomColor` (string?) - Custom color classes
- `Italic` (bool) - Italic styling
- `Underline` (bool) - Underline decoration
- `LineThrough` (bool) - Strikethrough decoration
- `Uppercase` (bool) - Transform to uppercase
- `Lowercase` (bool) - Transform to lowercase
- `Capitalize` (bool) - Capitalize each word
**Default behavior:**
- No default color (inherits from parent)
- Use `CustomColor` to apply specific colors
```razor
This is regular text with bold text inline.
Regular text with smaller and
larger inline text.
Text with italic,
underline, and
strikethrough.
Transform to uppercase,
LOWERCASE, or
capitalize words.
Inline colors:
blue,
green,
red.
Create gradient highlights inline.
Was $99.99
now $79.99!
```
#### Carousel Examples
The Carousel component allows you to create image slideshows or content carousels with navigation controls and indicators.
**Main Components:**
- `Carousel` - Main container component
- `CarouselItem` - Individual slide wrapper
- `CarouselControls` - Previous/Next navigation buttons
- `CarouselIndicators` - Dot indicators for direct slide navigation
**Available CarouselImageFit options:**
- CarouselImageFit.Cover (default)
- CarouselImageFit.Contain
- CarouselImageFit.Fill
- CarouselImageFit.ScaleDown
- CarouselImageFit.None
**Available CarouselIndicatorPosition options:**
- CarouselIndicatorPosition.Bottom (default)
- CarouselIndicatorPosition.Top
```razor
Custom Content
Another Slide
@code {
private int currentSlide = 0;
}
```
**Key Parameters:**
- `Index` / `@bind-Index` - Current slide index (zero-based)
- `AutoAdvanceInterval` - Auto-advance interval in milliseconds (null = disabled)
- `TransitionDuration` - Transition duration in milliseconds (default: 1000)
- `OnSlideChanged` - Event callback when slide changes
- `ImageSrc` - Image URL for CarouselItem
- `ImageAlt` - Alt text for image
- `ImageFit` - How image fits in container
- `Position` - Indicator position (Top/Bottom)
#### Select Component
Use the `Select` component for native single-select inputs with Flowbite styling, addon support, icons, helper text, and validation states. Pass the available options through standard `
## Icon Packages
Flowbite Blazor provides two icon packages:
1. Core Icons - Built into the main package
2. Extended Icons - Additional icons in a separate package
### Basic Usage
```razor
Important information
```
### List of Icon Components
### Flowbite Icon Blazor Components
```razor
```
## TailwindMerge Integration
Flowbite Blazor uses TailwindMerge.NET to intelligently resolve conflicting Tailwind CSS classes. User-provided classes override component defaults.
### How It Works
Components use `MergeClasses()` in their code-behind to combine base classes with user overrides:
```csharp
// Component internal pattern
private string GetButtonClasses() =>
MergeClasses(
ElementClass.Empty()
.Add("px-4 py-2 rounded-lg") // Component defaults
.Add("bg-blue-500", when: Color == ButtonColor.Primary)
.Add(Class) // User's Class parameter wins
);
```
### Usage in Your Code
When you add a `Class` parameter, TailwindMerge resolves conflicts:
```razor
Content with larger padding
```
### ElementClass Fluent Builder
For custom components, use `ElementClass` for readable conditional classes:
```csharp
// In your component's code-behind
private string GetClasses() => MergeClasses(
ElementClass.Empty()
.Add("base-class")
.Add("conditional-class", when: SomeCondition)
.Add("another-class", when: !SomeCondition)
.Add(Class)
);
```
---
## Slot System
Slots provide fine-grained control over component styling without modifying component source code.
### Available Slot Types
| Component | Slot Class | Available Slots |
|-----------|-----------|-----------------|
| Card | `CardSlots` | Base, Image, Body |
| Dropdown | `DropdownSlots` | Base, Trigger, Menu, Item |
| Modal | `ModalSlots` | Base, Backdrop, Content, Header, Body, Footer |
| AccordionItem | `AccordionItemSlots` | Trigger, Content |
### Usage Pattern
```razor
Card Title
Card content with extra padding
EditDeleteCustom HeaderContent hereFooter content
```
---
## Debounced Input Pattern
For search-as-you-type scenarios, use the `Behavior` and `DebounceDelay` parameters to reduce API calls.
### Basic Usage
```razor
@code {
private string SearchQuery { get; set; } = "";
// Called 300ms after user stops typing
// Previous pending calls are cancelled automatically
}
```
### InputBehavior Options
| Value | Description |
|-------|-------------|
| `OnChange` (default) | Fire on blur or Enter key - standard form behavior |
| `OnInput` | Fire on every keystroke (subject to DebounceDelay) |
### Best Practices
```razor
```
---
## Lazy Service Injection
Flowbite services are lazy-loaded for better performance. Inject them as needed:
```csharp
@inject ClipboardService Clipboard
@inject IFloatingService Floating
@code {
private async Task CopyToClipboard(string text)
{
// Module loads on first use
var success = await Clipboard.CopyToClipboardAsync(text);
}
}
```
---
## Event Handling
Components use standard Blazor event handling:
```razor
@code {
private void HandleClick()
{
// Handle the click event
}
}
@item.Name
```
---
## Dark Mode
Enable dark mode by adding the 'dark' class to any parent element:
```razor
This alert uses dark mode styles
Dark mode card
Content adapts automatically
```
---
## Floating UI Positioning
Dropdown, Tooltip, and Popover components use Floating UI for smart positioning:
```razor
Option 1
...
```
### Floating UI Features
| Feature | Description |
|---------|-------------|
| Flip | Auto-flips placement when near viewport edge |
| Shift | Shifts along axis to stay in viewport |
| Offset | Configurable distance from trigger |
| Auto-update | Recalculates position on scroll/resize |
---
## Keyboard Navigation
Interactive components support full keyboard navigation:
### Dropdown
- `Enter`/`Space`: Open dropdown, select item
- `ArrowDown`/`ArrowUp`: Navigate items
- `Home`/`End`: Jump to first/last item
- `Escape`: Close dropdown
- `Tab`: Close and move focus
- Type-ahead: Type to jump to matching item
### Tooltip
- `Escape`: Close tooltip
### Modal
- `Escape`: Close modal (when Dismissible="true")
- Focus trap: Tab cycles within modal
---
## motion-reduce Support
Components respect the user's reduced motion preference:
```css
/* Applied automatically via Tailwind */
.motion-reduce:transition-none { }
```
Animations are disabled for users with `prefers-reduced-motion: reduce` in their OS settings.
# Scaffold a Flowbite Blazor WebAssembly Standalone App
## Project Structure
PROJECT_DIR_ROOT
|---PROJECT_NAME/
| |---Layout/
| |---Pages/
| | |---Home.razor # @page "/" route
| |---Properties/
| |---tools/
| | |---tailwindcss.exe
| |---wwwroot/
| ...
| ...
| |---PROJECT_NAME.csproj
| |---tailwind.config.js
|---README.md
# Overview
This is an overview with more details in the below sections.
1. Create a new project using dotnet new and add packages
2. Download the Tailwind CSS v4 CLI to the tools folder
3. Configure the csproj file for Flowbite and Tailwind CSS
4. Configure Program.cs with Flowbite services
5. Configure wwwroot/index.html with scripts and styles
6. Configure wwwroot/css/app.css with Tailwind v4 directives
7. Configure _Imports.razor with Flowbite namespaces
8. Configure tailwind.config.js (minimal v4 config)
9. Determine what to do with Pages/Home.razor
## 1. Create a new project
```sh
# pwd is the {{PROJECT_DIR_ROOT}}
dotnet new blazorwasm --empty -o {{PROJECT_NAME}}
cd {{PROJECT_NAME}}
dotnet add package Flowbite --prerelease
dotnet add package BlazorWasmPreRendering.Build -v 5.0.0
cd ..
# pwd is the {{PROJECT_DIR_ROOT}}
```
## 2. Download the Tailwind CSS v4 CLI
__For Windows Platform:__
```sh
# pwd is the {{PROJECT_DIR_ROOT}}
cd {{PROJECT_NAME}}; mkdir tools; cd tools
Invoke-WebRequest -Uri https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe -OutFile tailwindcss.exe -UseBasicParsing
cd ../..
# pwd is the {{PROJECT_DIR_ROOT}}
```
__For MacOS:__
```sh
# pwd is the {{PROJECT_DIR_ROOT}}
cd {{PROJECT_NAME}} && mkdir tools && cd tools
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss
cd ../..
# pwd is the {{PROJECT_DIR_ROOT}}
```
## 3. Configure the csproj file
```xml
{{leave as what the user has chosen, net8.0 or net9.0}}enableenabletruefalse0.0.1-alpha.1truetrue
```
## 4. Configure Program.cs
```csharp
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using PROJECT_NAME;
using Flowbite.Services;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add("#app");
builder.RootComponents.Add("head::after");
// Required for prerendering (BlazorWasmPreRendering.Build)
ConfigureServices(builder.Services, builder.HostEnvironment.BaseAddress);
await builder.Build().RunAsync();
// Extract service-registration to static local function for prerendering
static void ConfigureServices(IServiceCollection services, string baseAddress)
{
services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(baseAddress) });
// Register Flowbite services (TailwindMerge, FloatingService, etc.)
services.AddFlowbite();
}
```
## 5. Configure wwwroot/index.html
```html
PROJECT_NAME