### Installing Tailwind CSS CLI (Mac/Linux) Source: https://github.com/themesberg/flowbite-blazor/blob/develop/CONTRIBUTING.md This command downloads the Tailwind CSS CLI executable for macOS/Linux, makes it executable, and moves it to the tools directory. This allows Tailwind CSS to be used for styling components. ```bash 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 ``` -------------------------------- ### Installing TailwindCSS and Initializing Configuration Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/Flowbite/nuget.md Installs TailwindCSS as a development dependency using npm and initializes the TailwindCSS configuration file. This setup allows you to use TailwindCSS classes to style your Blazor components. ```Bash npm install -D tailwindcss npx tailwindcss init ``` -------------------------------- ### Button Component Examples Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/DemoApp/wwwroot/llms-ctx.md This example demonstrates various Button component configurations, including different colors, styles (outline), loading states, link buttons, and full-width buttons. It showcases the use of ButtonColor, ButtonStyle, and other properties to customize the button's appearance and behavior. ```razor ``` -------------------------------- ### FileInput Component Example (Razor) Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/DemoApp/wwwroot/llms-docs/sections/01-14-forms.md Demonstrates the usage of the FileInput component with parameters for setting the Id, HelperText, Color, Disabled status, and Shadow effect. ```razor ``` -------------------------------- ### Installing Tailwind CSS CLI (Windows) Source: https://github.com/themesberg/flowbite-blazor/blob/develop/CONTRIBUTING.md This PowerShell script downloads the Tailwind CSS CLI executable for Windows, and saves it as tailwindcss.exe in the tools directory. This allows Tailwind CSS to be used for styling components. ```powershell mkdir ./tools -Force; ` cd ./tools; ` Invoke-WebRequest -Uri "https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe" ` -OutFile "tailwindcss.exe" ` -UseBasicParsing ; ` cd .. ``` -------------------------------- ### Comprehensive Sidebar Example in Blazor Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/DemoApp/wwwroot/llms-docs/sections/01-09-sidebar.md This example demonstrates a comprehensive sidebar with logos, icons, dropdowns, item grouping, responsiveness, and a CTA region with a button. It utilizes various Flowbite-Blazor components such as Sidebar, SidebarLogo, SidebarItemGroup, SidebarItem, SidebarCollapse, SidebarCTA, and Button. ```razor
Flowbite Dashboard Overview Reports Users Products Settings Help Center
Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.
``` -------------------------------- ### Comprehensive Sidebar Example in Blazor Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/DemoApp/wwwroot/llms-ctx.md This example demonstrates a comprehensive sidebar with logos, icons, dropdowns, item grouping, responsiveness, and a CTA region with a button. It utilizes various Flowbite-Blazor components such as Sidebar, SidebarLogo, SidebarItemGroup, SidebarItem, SidebarCollapse, and Button. ```razor
Flowbite Dashboard Overview Reports Users Products Settings Help Center
Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.
``` -------------------------------- ### Avatar Component Examples Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/DemoApp/wwwroot/llms-ctx.md Demonstrates different Avatar component configurations, including different sizes and the use of status indicators. It showcases how to set the size, rounded corners, image source, and alt text. ```razor
``` -------------------------------- ### Card Component Examples Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/DemoApp/wwwroot/llms-ctx.md This example demonstrates various Card component configurations, including a basic card with a CTA button, a card with an image, a horizontal card layout, and an e-commerce product card. It showcases the use of ImgSrc, ImgAlt, Horizontal, and other properties to customize the card's appearance and content. ```razor
Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far.

Card with image

Here are the biggest enterprise technology acquisitions of 2021 so far.

Horizontal card layout

Perfect for news articles or blog post previews.

Apple Watch Series 7 GPS
5.0
$599
``` -------------------------------- ### Basic QuickGrid with Flowbite Theme Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/DemoApp/wwwroot/llms-ctx.md This example demonstrates a basic QuickGrid implementation with Flowbite styling. It defines several PropertyColumn components to display data from a collection of Pokemon objects, setting the Theme to "flowbite" and applying text-xs class. ```razor
``` -------------------------------- ### Breadcrumb Component Example Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/DemoApp/wwwroot/llms-ctx.md This example demonstrates a basic Breadcrumb component with three items: Home, Category, and Current Page. It uses the Breadcrumb, BreadcrumbItem, and HomeIcon components to create a navigation trail. ```razor Home Category Current Page ``` -------------------------------- ### Install Flowbite.Blazor.ExtendedIcons NuGet Package Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/Flowbite.ExtendedIcons/nuget.md This command installs the Flowbite.Blazor.ExtendedIcons NuGet package into your Blazor project. The --prerelease flag includes pre-release versions of the package. ```PowerShell dotnet add package Flowbite.Blazor.ExtendedIcons --prerelease ``` -------------------------------- ### Create Blazor WebAssembly Project Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/DemoApp/wwwroot/llms-docs/sections/04-quickstart.md Creates a new Blazor WebAssembly project, adds Flowbite and BlazorWasmPreRendering.Build packages using dotnet CLI. ```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}} ``` -------------------------------- ### Configure Program.cs Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/DemoApp/wwwroot/llms-docs/sections/04-quickstart.md Configures the Program.cs file to add Flowbite services and configure prerendering. ```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(); // Required for prerendering (BlazorWasmPreRendering.Build) // extract the service-registration process to the static local function. static void ConfigureServices(IServiceCollection services, string baseAddress) { services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(baseAddress) }); services.AddFlowbite(); } ``` -------------------------------- ### Multi-Level Sidebar Example in Blazor Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/DemoApp/wwwroot/llms-ctx.md This example demonstrates a multi-level sidebar with deep nested navigation, suitable for complex application hierarchies. It uses Sidebar, SidebarItem, and SidebarCollapse components to create a nested menu structure. ```razor Dashboard Profile General Permissions Authentication Encryption Backup Notifications Help ``` -------------------------------- ### Installing Flowbite Blazor NuGet Package Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/Flowbite/nuget.md Installs the Flowbite.Blazor NuGet package into your Blazor project. This command adds the necessary Flowbite Blazor components to your project, enabling you to use them in your Blazor views. ```PowerShell dotnet add package Flowbite.Blazor --prerelease ``` -------------------------------- ### Textarea Component Example (Razor) Source: https://github.com/themesberg/flowbite-blazor/blob/develop/src/DemoApp/wwwroot/llms-docs/sections/01-14-forms.md Shows how to use the Textarea component with parameters for setting the Id, Rows, Placeholder, Required status, Disabled status, HelperText, and Shadow effect. ```razor