mkocansey/bladewind

BladewindUI — elegant Laravel Blade UI components powered by TailwindCSS

Maintainers

Package info

github.com/mkocansey/bladewind

Language:JavaScript

pkg:composer/mkocansey/bladewind

Statistics

Installs: 123 059

Dependents: 2

Suggesters: 0

Stars: 683

Open Issues: 14

Security

Advisories: 0

Aikido package health analysis

v4.2.1 2026-06-22 01:10 UTC

Requires

Requires (Dev)

Replaces

MIT 18a70cde4883d55273f04c015414228cfaeaaf7b

  • Michael K. Ocansey <mike.woop@bladewindui.com>

laravelbladeUi Componentstailwindcssbladewindui

This package is auto-updated.

Last update: 2026-06-22 01:17:31 UTC

README

License

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, 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 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

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)
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

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)
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

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)
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)

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-content is identical to installing every content leaf package individually.
  • Uninstalling it and requiring just mkocansey/bladewind-accordion is 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

License

BladewindUI is open-sourced software licensed under the MIT licence.