bladewind maintained by mkocansey
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 mkocansey/bladewind
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 mkocansey/bladewind-forms # all form components
composer require mkocansey/bladewind-content # all content & display components
composer require mkocansey/bladewind-navigation # all navigation components
Install a single component
Every 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-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, 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 | mkocansey/bladewind-core |
Shared helpers, CSS variables, helpers.js |
| Icon | mkocansey/bladewind-icon |
SVG icon wrapper (Heroicons) |
| Button | mkocansey/bladewind-button |
Button, Circle Button |
| Modal | mkocansey/bladewind-modal |
Modal, Modal Icon |
| Alert | mkocansey/bladewind-alert |
Alert, Notification, Bell |
| Spinner | mkocansey/bladewind-spinner |
Spinner, Shimmer, Processing, Process Complete |
| Table | mkocansey/bladewind-table |
Table, Table Icons |
Forms group — mkocansey/bladewind-forms
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) |
|---|---|---|
| Input | mkocansey/bladewind-input |
Input, Error |
| Textarea | mkocansey/bladewind-textarea |
Textarea |
| Select | mkocansey/bladewind-select |
Select, Select Item |
| Checkbox | mkocansey/bladewind-checkbox |
Checkbox |
| Radio Button | mkocansey/bladewind-radio |
Radio Button |
| Toggle | mkocansey/bladewind-toggle |
Toggle |
| Datepicker | mkocansey/bladewind-datepicker |
Datepicker |
| Timepicker | mkocansey/bladewind-timepicker |
Timepicker |
| Colorpicker | mkocansey/bladewind-colorpicker |
Colorpicker |
| Filepicker | mkocansey/bladewind-filepicker |
Filepicker (powered by FilePond) |
| Slider | mkocansey/bladewind-slider |
Slider |
| Checkcards | mkocansey/bladewind-checkcards |
Checkcards, Checkcard |
| Number | mkocansey/bladewind-number |
Number stepper |
| Verification Code | mkocansey/bladewind-code |
Verification Code / OTP |
Content group — mkocansey/bladewind-content
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) |
|---|---|---|
| Card | mkocansey/bladewind-card |
Card, Contact Card |
| Avatar | mkocansey/bladewind-avatar |
Avatar, Avatars |
| Accordion | mkocansey/bladewind-accordion |
Accordion, Accordion Item |
| Tag | mkocansey/bladewind-tag |
Tag, Tags |
| Timeline | mkocansey/bladewind-timeline |
Timeline, Timelines |
| Statistic | mkocansey/bladewind-statistic |
Statistic |
| Rating | mkocansey/bladewind-rating |
Rating |
| Horizontal Line Graph | mkocansey/bladewind-horizontal-line-graph |
Horizontal Line Graph |
| Empty State | mkocansey/bladewind-empty-state |
Empty State |
| Centered Content | mkocansey/bladewind-centered-content |
Centered Content |
| Chart | mkocansey/bladewind-chart |
Chart (line, bar, pie, donut) |
| Progress | mkocansey/bladewind-progress |
Progress Bar, Progress Circle |
| List View | mkocansey/bladewind-listview |
List View, List View Item |
| Contact Card | mkocansey/bladewind-contact-card |
Contact Card |
Navigation group — mkocansey/bladewind-navigation
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) |
|---|---|---|
| Tab | mkocansey/bladewind-tab |
Tab, Tab Body, Tab Content, Tab Heading |
| Dropmenu | mkocansey/bladewind-dropmenu |
Dropmenu, Dropmenu Item |
| Pagination | mkocansey/bladewind-pagination |
Pagination |
| Theme Switcher | mkocansey/bladewind-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
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.
Customising defaults
Publish the config file (available when using the full mkocansey/bladewind 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.