Flowbite Blade

Laravel Blade components for Flowbite. 60+ UI components, 80+ pre-built blocks, dark mode, and Tailwind CSS v4 — all as composable Blade components.

Documentation: flowbite-laravel.com

Installation

composer require themesberg/flowbite-laravel-components

Or get started even faster with the Flowbite Laravel Starter Kit which includes authentication, layouts, dark mode, and everything pre-configured:

laravel new my-app --using=themesberg/flowbite-laravel-starter-kit

Manual setup

Add the Flowbite theme and plugin to your resources/css/app.css:

@import 'tailwindcss';
@import 'flowbite/src/themes/default';
@plugin 'flowbite/plugin';

@source '../../vendor/themesberg/flowbite-blade/resources/views/**/*.blade.php';
@source '../../vendor/themesberg/flowbite-blade/src/**/*.php';

Quick Start

<x-fwb.button>Click me</x-fwb.button>

<x-fwb.alert color="green">
    Operation successful!
</x-fwb.alert>

<x-fwb.card title="Card title">
    <p class="text-body">Card content.</p>
</x-fwb.card>

Components

All components use the x-fwb. prefix.

Core UI

Component	Alias	Sub-components
Accordion	x-fwb.accordion	.item
Alert	x-fwb.alert
Avatar	x-fwb.avatar	.group
Badge	x-fwb.badge
Button	x-fwb.button	.group
Card	x-fwb.card
Indicator	x-fwb.indicator
Pricing Card	x-fwb.pricing-card	.feature
Progress	x-fwb.progress
Rating	x-fwb.rating
Spinner	x-fwb.spinner

Navigation

Component	Alias	Sub-components
Breadcrumb	x-fwb.breadcrumb	.item
Bottom Nav	x-fwb.bottom-nav	.item
Navbar	x-fwb.navbar	.brand, .link
Pagination	x-fwb.pagination
Sidebar	x-fwb.sidebar	.item, .group
Tabs	x-fwb.tabs	.item

Overlays & Interactive

Component	Alias
Drawer	x-fwb.drawer
Dropdown	x-fwb.dropdown + .item
Modal	x-fwb.modal
Popover	x-fwb.popover
Speed Dial	x-fwb.speed-dial
Toast	x-fwb.toast
Tooltip	x-fwb.tooltip

Data Display

Component	Alias	Sub-components
Carousel	x-fwb.carousel
Chat Bubble	x-fwb.chat-bubble
Gallery	x-fwb.gallery	.image
List Group	x-fwb.list-group	.item
Skeleton	x-fwb.skeleton
Table	x-fwb.table	.head, .row, .cell
Timeline	x-fwb.timeline	.item

Forms

Component	Alias
Checkbox	x-fwb.checkbox
File Input	x-fwb.file-input
Floating Label	x-fwb.floating-label
Input	x-fwb.input
Radio	x-fwb.radio
Range	x-fwb.range
Select	x-fwb.select
Textarea	x-fwb.textarea
Toggle	x-fwb.toggle

Content & Layout

Component	Alias	Sub-components
Banner	x-fwb.banner
Footer	x-fwb.footer
Jumbotron	x-fwb.jumbotron
Kbd	x-fwb.kbd
Stepper	x-fwb.stepper	.item
Video	x-fwb.video

Layouts

Layout	Alias
Admin	x-fwb.layouts.admin
Auth	x-fwb.layouts.auth
Settings	x-fwb.layouts.settings

Blocks

Pre-built page sections available as x-fwb.blocks.{category}.{name}.

Marketing (34 blocks)

Hero, header, footer, pricing, CTA, features, testimonials, social proof, FAQ, contact form, blog, portfolio, team, newsletter, error pages, login/register forms, and more.

<x-fwb.blocks.marketing.hero
    title="We invest in the world's potential"
    primaryButtonText="Learn more"
/>

<x-fwb.blocks.marketing.pricing title="Our plans">
    <x-fwb.pricing-card title="Starter" price="29" period="/month">
        <x-fwb.pricing-card.feature>10 users</x-fwb.pricing-card.feature>
    </x-fwb.pricing-card>
</x-fwb.blocks.marketing.pricing>

Application (28 blocks)

CRUD tables, modals, drawers, forms, filters, navigation, dashboard shell, and more.

<x-fwb.blocks.application.crud-products />
<x-fwb.blocks.application.crud-create-modal id="create-modal" />

Ecommerce (24 blocks)

Product pages, shopping cart, checkout, order tracking, payment forms, reviews, and more.

<x-fwb.blocks.ecommerce.shopping-cart />
<x-fwb.blocks.ecommerce.checkout />

Publisher (2 blocks)

Blog templates and comment sections.

<x-fwb.blocks.publisher.blog-template />

Composition Pattern

Components use parent-child composition:

<x-fwb.accordion>
    <x-fwb.accordion.item title="Question 1">Answer 1</x-fwb.accordion.item>
    <x-fwb.accordion.item title="Question 2">Answer 2</x-fwb.accordion.item>
</x-fwb.accordion>

<x-fwb.table>
    <x-fwb.table.head :columns="['Name', 'Email', 'Role']" />
    <x-fwb.table.row>
        <x-fwb.table.cell>John Doe</x-fwb.table.cell>
        <x-fwb.table.cell>john@example.com</x-fwb.table.cell>
        <x-fwb.table.cell>Admin</x-fwb.table.cell>
    </x-fwb.table.row>
</x-fwb.table>

<x-fwb.gallery :grid="3">
    <x-fwb.gallery.image src="/img/photo-1.jpg" alt="Photo 1" />
    <x-fwb.gallery.image src="/img/photo-2.jpg" alt="Photo 2" />
    <x-fwb.gallery.image src="/img/photo-3.jpg" alt="Photo 3" />
</x-fwb.gallery>

Configuration

Publish the config file:

php artisan vendor:publish --tag=flowbite-blade-config

// config/flowbite-blade.php
return [
    'prefix' => 'fwb',           // Component alias prefix
    'default_color' => 'blue',   // Default color for buttons, badges, etc.
    'default_size' => 'md',      // Default size for inputs, buttons, etc.
    'layout' => 'admin',         // Default layout
];

Customizing Views

Publish all blade views to customize them:

php artisan vendor:publish --tag=flowbite-blade-views

Views are published to resources/views/vendor/flowbite-blade/.

Icons

This package depends on flowbite-blade-icons for icons:

{{-- Outline icons --}}
<x-fwb-o-envelope class="w-5 h-5" />

{{-- Solid icons --}}
<x-fwb-s-envelope class="w-5 h-5" />

{{-- Inside components --}}
<x-fwb.button fwb-icon="s-plus">Add item</x-fwb.button>

Requirements

• PHP 8.2+
• Laravel 12+
• Tailwind CSS v4
• Flowbite 4

License

MIT