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.
This pulls in all components.
composer require bladewindui/uiEach 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 componentsEvery component is its own Composer package. Install exactly what you need.
composer require bladewindui/table
composer require bladewindui/accordion
composer require bladewindui/datepickerShared dependencies (icon, script, spinner, etc.) are pulled in automatically via Composer's dependency resolution.
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 --forceAdd 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 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.
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 |
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 |
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 |
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) |
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.
Publish the config file (available when using the full bladewindui/ui package):
php artisan vendor:publish --tag=bladewind-configThis 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
The complete documentation with extensive examples for each component is available at bladewindui.com
- Email: mike@bladewindui.com
- Twitter / X: @bladewindui
- Security vulnerabilities: please e-mail rather than opening a public issue
BladewindUI is open-sourced software licensed under the MIT licence.