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 mkocansey/bladewindEach logical group is available as its own package. Install a group when you only need a subset of BladewindUI:
composer require mkocansey/bladewind-forms # all form components
composer require mkocansey/bladewind-content # all content & display components
composer require mkocansey/bladewind-navigation # all navigation componentsEvery component is its own Composer package. Install exactly what you need.
composer require mkocansey/bladewind-table
composer require mkocansey/bladewind-accordion
composer require mkocansey/bladewind-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 | mkocansey/bladewind-core |
Shared helpers, CSS variables, helpers.js |
| Icon | mkocansey/bladewind-icon |
SVG icon wrapper (Heroicons) |
| Alert | mkocansey/bladewind-alert |
Alert |
| Bell | mkocansey/bladewind-bell |
Bell |
| Button | mkocansey/bladewind-button |
Button, Circle Button |
| Modal | mkocansey/bladewind-modal |
Modal, Modal Icon |
| Notification | mkocansey/bladewind-notification |
Notification |
| Spinner | mkocansey/bladewind-spinner |
Spinner, Shimmer, Processing, Process Complete |
| Table | mkocansey/bladewind-table |
Table, Table Icons |
composer require mkocansey/bladewind-forms
# or install any single component
composer require mkocansey/bladewind-input
composer require mkocansey/bladewind-datepicker
...| Package | Composer name | Component(s) |
|---|---|---|
| Checkbox | mkocansey/bladewind-checkbox |
Checkbox |
| Checkcards | mkocansey/bladewind-checkcards |
Checkcards, Checkcard |
| Colorpicker | mkocansey/bladewind-colorpicker |
Colorpicker |
| Datepicker | mkocansey/bladewind-datepicker |
Datepicker |
| Filepicker | mkocansey/bladewind-filepicker |
Filepicker (powered by FilePond) |
| Input | mkocansey/bladewind-input |
Input, Error |
| Number | mkocansey/bladewind-number |
Number stepper |
| Radio Button | mkocansey/bladewind-radio |
Radio Button |
| Select | mkocansey/bladewind-select |
Select, Select Item |
| Slider | mkocansey/bladewind-slider |
Slider |
| Textarea | mkocansey/bladewind-textarea |
Textarea |
| Timepicker | mkocansey/bladewind-timepicker |
Timepicker |
| Toggle | mkocansey/bladewind-toggle |
Toggle |
| Verification Code | mkocansey/bladewind-code |
Verification Code / OTP |
composer require mkocansey/bladewind-content
# or install any single component
composer require mkocansey/bladewind-accordion
composer require mkocansey/bladewind-chart
...| Package | Composer name | Component(s) |
|---|---|---|
| Accordion | mkocansey/bladewind-accordion |
Accordion, Accordion Item |
| Avatar | mkocansey/bladewind-avatar |
Avatar, Avatars |
| Card | mkocansey/bladewind-card |
Card, Contact Card |
| Centered Content | mkocansey/bladewind-centered-content |
Centered Content |
| Chart | mkocansey/bladewind-chart |
Chart (line, bar, pie, donut) |
| Contact Card | mkocansey/bladewind-contact-card |
Contact Card |
| Empty State | mkocansey/bladewind-empty-state |
Empty State |
| Horizontal Line Graph | mkocansey/bladewind-horizontal-line-graph |
Horizontal Line Graph |
| List View | mkocansey/bladewind-listview |
List View, List View Item |
| Popover | mkocansey/bladewind-popover |
Popover |
| Progress | mkocansey/bladewind-progress |
Progress Bar, Progress Circle |
| Rating | mkocansey/bladewind-rating |
Rating |
| Sortable | mkocansey/bladewind-sortable |
Sortable, Sortable Item |
| Statistic | mkocansey/bladewind-statistic |
Statistic |
| Tag | mkocansey/bladewind-tag |
Tag, Tags |
| Timeline | mkocansey/bladewind-timeline |
Timeline, Timelines |
| Tooltip | mkocansey/bladewind-tooltip |
Tooltip |
composer require mkocansey/bladewind-navigation
# or install any single component
composer require mkocansey/bladewind-tab
composer require mkocansey/bladewind-pagination
...| Package | Composer name | Component(s) |
|---|---|---|
| Dropmenu | mkocansey/bladewind-dropmenu |
Dropmenu, Dropmenu Item |
| Pagination | mkocansey/bladewind-pagination |
Pagination |
| Tab | mkocansey/bladewind-tab |
Tab, Tab Body, Tab Content, Tab Heading |
| Theme Switcher | mkocansey/bladewind-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
mkocansey/bladewind-contentis identical to installing every content leaf package individually. - Uninstalling it and requiring just
mkocansey/bladewind-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 mkocansey/bladewind 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.