PHPackages themesberg/flowbite-laravel-components - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. themesberg/flowbite-laravel-components ActiveLibrary[Templating & Views](/categories/templating) themesberg/flowbite-laravel-components ====================================== Flowbite UI components for Laravel Blade 1.0.2(2mo ago)146↓78.3%1MITBladePHP ^8.2 Since Feb 24Pushed 2mo agoCompare [ Source](https://github.com/themesberg/flowbite-laravel-components)[ Packagist](https://packagist.org/packages/themesberg/flowbite-laravel-components)[ RSS](/packages/themesberg-flowbite-laravel-components/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (10)Versions (4)Used By (1) Flowbite Blade ============== [](#flowbite-blade) Laravel Blade components for [Flowbite](https://flowbite.com). 60+ UI components, 80+ pre-built blocks, dark mode, and Tailwind CSS v4 — all as composable Blade components. **Documentation:** [flowbite-laravel.com](https://flowbite-laravel.com) Installation ------------ [](#installation) ``` composer require themesberg/flowbite-laravel-components ``` Or get started even faster with the [Flowbite Laravel Starter Kit](https://github.com/themesberg/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 [](#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 ----------- [](#quick-start) ``` Click me Operation successful! Card content. ``` Components ---------- [](#components) All components use the `x-fwb.` prefix. ### Core UI [](#core-ui) ComponentAliasSub-componentsAccordion`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 [](#navigation) ComponentAliasSub-componentsBreadcrumb`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 [](#overlays--interactive) ComponentAliasDrawer`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 [](#data-display) ComponentAliasSub-componentsCarousel`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 [](#forms) ComponentAliasCheckbox`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 [](#content--layout) ComponentAliasSub-componentsBanner`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 [](#layouts) LayoutAliasAdmin`x-fwb.layouts.admin`Auth`x-fwb.layouts.auth`Settings`x-fwb.layouts.settings`Blocks ------ [](#blocks) Pre-built page sections available as `x-fwb.blocks.{category}.{name}`. ### Marketing (34 blocks) [](#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. ``` 10 users ``` ### Application (28 blocks) [](#application-28-blocks) CRUD tables, modals, drawers, forms, filters, navigation, dashboard shell, and more. ``` ``` ### Ecommerce (24 blocks) [](#ecommerce-24-blocks) Product pages, shopping cart, checkout, order tracking, payment forms, reviews, and more. ``` ``` ### Publisher (2 blocks) [](#publisher-2-blocks) Blog templates and comment sections. ``` ``` Composition Pattern ------------------- [](#composition-pattern) Components use parent-child composition: ``` Answer 1 Answer 2 John Doe john@example.com Admin ``` Configuration ------------- [](#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 ----------------- [](#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 ----- [](#icons) This package depends on [`flowbite-blade-icons`](https://github.com/themesberg/flowbite-blade-icons) for icons: ``` {{-- Outline icons --}} {{-- Solid icons --}} {{-- Inside components --}} Add item ``` Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 12+ - Tailwind CSS v4 - Flowbite 4 License ------- [](#license) MIT ### Health Score 41 — FairBetter than 89% of packages Maintenance85 Actively maintained with recent releases Popularity13 Limited adoption so far Community8 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~7 days Total 3 Last Release 69d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/19ce7305c373d4ab9f6633a2d2ddb3693ae27a1fdd2897244a6e3e4c9760d581?d=identicon)[DomThomas-Dev](/maintainers/DomThomas-Dev) --- Top Contributors [![domthomas-dev](https://avatars.githubusercontent.com/u/17202290?v=4)](https://github.com/domthomas-dev "domthomas-dev (20 commits)") --- Tags laravelcomponentsbladetailwindcssflowbite ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/themesberg-flowbite-laravel-components/health.svg) ``` [![Health](https://phpackages.com/badges/themesberg-flowbite-laravel-components/health.svg)](https://phpackages.com/packages/themesberg-flowbite-laravel-components) ``` ### Alternatives [tightenco/jigsaw Simple static sites with Laravel's Blade. 2.2k438.5k29](/packages/tightenco-jigsaw)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[area17/blast Storybook for Laravel Blade 308664.1k](/packages/area17-blast)[electrik/slate Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project 102.3k1](/packages/electrik-slate) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)