bladewindui/ui
BladewindUI is a collection of UI components built with TailwindCSS, Laravel Blade templates, and vanilla JavaScript. Every component is simple to use and ships with sensible defaults you can override per-project.
Installation
Install everything (recommended starting point)
This pulls in all components.
composer require bladewindui/ui
Install a component group
Each logical group is available as its own package. Install a group when you only need a subset of BladewindUI:
composer require bladewindui/forms # all form components
composer require bladewindui/content # all content & display components
composer require bladewindui/navigation # all navigation components
Install a single component
Every component is its own Composer package. Install exactly what you need.
composer require bladewindui/table
composer require bladewindui/accordion
composer require bladewindui/datepicker
Shared dependencies (icon, script, spinner, etc.) are pulled in automatically via Composer's dependency resolution.
First-time setup
After installing, publish the compiled CSS, JavaScript, and language files:
php artisan vendor:publish --tag=bladewind-public --force
php artisan vendor:publish --tag=bladewind-lang --force
Add the stylesheet to the <head> of your layout:
<link href="{{ asset('vendor/bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet"/>
Add the JavaScript before the closing </body> tag:
<script src="{{ asset('vendor/bladewind/js/helpers.js') }}"></script>
You are ready to use any component:
<x-bladewind::button>Save User</x-bladewind::button>
Full installation guide: bladewindui.com/install
Components
Components are organised into groups. Each group maps directly to a Composer package. Standalone packages (Button, Modal, Alert, Bell, Notification, Table, Spinner) sit outside any group.
Standalone packages
These components are their own packages and are not bundled into any group. They are pulled in as dependencies by other components that need them.
| Package | Composer name | Component(s) |
|---|---|---|
| Core | bladewindui/core |
Shared helpers, CSS variables, helpers.js |
| Icon | bladewindui/icon |
SVG icon wrapper (Heroicons) |
| Alert | bladewindui/alert |
Alert |
| Bell | bladewindui/bell |
Bell |
| Button | bladewindui/button |
Button, Circle Button |
| Modal | bladewindui/modal |
Modal, Modal Icon |
| Drawer | bladewindui/drawer |
Drawer |
| Notification | bladewindui/notification |
Notification |
| Spinner | bladewindui/spinner |
Spinner, Shimmer, Processing, Process Complete |
| Table | bladewindui/table |
Table, Table Icons |
Forms group — bladewindui/forms
composer require bladewindui/forms
# or install any single component
composer require bladewindui/input
composer require bladewindui/datepicker
...
| Package | Composer name | Component(s) |
|---|---|---|
| Checkbox | bladewindui/checkbox |
Checkbox |
| Checkcards | bladewindui/checkcards |
Checkcards, Checkcard |
| Colorpicker | bladewindui/colorpicker |
Colorpicker |
| Datepicker | bladewindui/datepicker |
Datepicker |
| Filepicker | bladewindui/filepicker |
Filepicker (powered by FilePond) |
| Input | bladewindui/input |
Input, Error |
| Number | bladewindui/number |
Number stepper |
| Radio Button | bladewindui/radio |
Radio Button |
| Select | bladewindui/select |
Select, Select Item |
| Slider | bladewindui/slider |
Slider |
| Textarea | bladewindui/textarea |
Textarea |
| Timepicker | bladewindui/timepicker |
Timepicker |
| Toggle | bladewindui/toggle |
Toggle |
| Verification Code | bladewindui/code |
Verification Code / OTP |
Content group — bladewindui/content
composer require bladewindui/content
# or install any single component
composer require bladewindui/accordion
composer require bladewindui/chart
...
| Package | Composer name | Component(s) |
|---|---|---|
| Accordion | bladewindui/accordion |
Accordion, Accordion Item |
| Avatar | bladewindui/avatar |
Avatar, Avatars |
| Card | bladewindui/card |
Card, Contact Card |
| Centered Content | bladewindui/centered-content |
Centered Content |
| Chart | bladewindui/chart |
Chart (line, bar, pie, donut) |
| Contact Card | bladewindui/contact-card |
Contact Card |
| Empty State | bladewindui/empty-state |
Empty State |
| Horizontal Line Graph | bladewindui/horizontal-line-graph |
Horizontal Line Graph |
| List View | bladewindui/listview |
List View, List View Item |
| Popover | bladewindui/popover |
Popover |
| Progress | bladewindui/progress |
Progress Bar, Progress Circle |
| Rating | bladewindui/rating |
Rating |
| Sortable | bladewindui/sortable |
Sortable, Sortable Item |
| Drawer | bladewindui/drawer |
Drawer |
| Statistic | bladewindui/statistic |
Statistic |
| Tag | bladewindui/tag |
Tag, Tags |
| Timeline | bladewindui/timeline |
Timeline, Timelines |
| Tooltip | bladewindui/tooltip |
Tooltip |
Navigation group — bladewindui/navigation
composer require bladewindui/navigation
# or install any single component
composer require bladewindui/breadcrumbs
composer require bladewindui/sidebar
composer require bladewindui/tab
composer require bladewindui/stepper
composer require bladewindui/pagination
...
| Package | Composer name | Component(s) |
|---|---|---|
| Breadcrumbs | bladewindui/breadcrumbs |
Breadcrumbs, Breadcrumbs Item |
| Sidebar | bladewindui/sidebar |
Sidebar, Sidebar Group, Sidebar Item |
| Stepper | bladewindui/stepper |
Stepper, Stepper Item, Stepper Content |
| Dropmenu | bladewindui/dropmenu |
Dropmenu, Dropmenu Item |
| Pagination | bladewindui/pagination |
Pagination |
| Tab | bladewindui/tab |
Tab, Tab Body, Tab Content, Tab Heading |
| Theme Switcher | bladewindui/theme-switcher |
Theme Switcher (light / dark) |
How groups work
The three group packages (bladewind-forms, bladewind-content, bladewind-navigation) contain no code — they are
pure Composer metapackages whose only job is to pull in the right leaf packages. This means:
- Installing
bladewindui/contentis identical to installing every content leaf package individually. - Uninstalling it and requiring just
bladewindui/accordionis clean and leaves nothing behind. - Each leaf package registers its own Laravel service provider, so components are auto-discovered whether you install them individually or as part of a group.
Customising defaults
Publish the config file (available when using the full bladewindui/ui package):
php artisan vendor:publish --tag=bladewind-config
This creates config/bladewind.php in your project. Every attribute in every component has a default defined here.
Override them once and all component instances in your project will follow suit.
Full customisation guide: bladewindui.com/customize
Documentation
The complete documentation with extensive examples for each component is available at bladewindui.com
Questions and support
- Email: mike@bladewindui.com
- Twitter / X: @bladewindui
- Security vulnerabilities: please e-mail rather than opening a public issue
License
BladewindUI is open-sourced software licensed under the MIT licence.
Related Packages
BladewindUI — elegant Laravel Blade UI components powered by TailwindCSS
BladewindUI — elegant Laravel Blade UI components powered by TailwindCSS
Complete Flowbite component library for Laravel with Blade components, Tailwind...
Realtime notification UI for Laravel with topbar dropdown, inbox, and Livewire +...