BladewindUI is a collection of UI components written purely using TailwindCSS, Laravel blade templates and Vanilla Javascript. These components are super simple to use and come with different levels of customization.
The full installation guide is available on https://bladewindui.com/#install.
BladewindUI is very specific to Laravel since all components are written purely using blade syntax. To install in your Laravel project simply run this command in the terminal at the root of your project.
composer require mkocansey/bladewind
Next you need to publish the package assets by running this command, still in the terminal at the root of your Laravel project.
php artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=bladewind-public --force
Now include the BladewindUI css file in the <head> of your pages. This should ideally be done in the layouts file your app pages extend from.
<link href="{{ asset('vendor/bladewind/css/animate.min.css') }}" rel="stylesheet" />
<link href="{{ asset('vendor/bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" />
Finally, include the BladewindUI javascript file anywhere before the closing of the </body> tag of your pages. Again, this should ideally be done in the layouts file your app's pages extend from.
<script src="{{ asset('vendor/bladewind/js/helpers.js') }}" type="text/javascript"></script>
You are now ready to start using any of the BladewindUI components in your application
<x-bladewind::button>Save User</x-bladewind::button>
- Accordion
- Alert
- Avatar
- Bell
- Button
- Card
- Centered Content
- Chart
- Checkbox
- CheckCard
- Colorpicker
- Datepicker
- Dropdown
- Dropmenu
- Empty State
- Filepicker
- Horizontal Line Graph
- Icon
- Input
- List View
- Modal
- Notification
- Process Indicator
- Progress Bar
- Radio Button
- Rating
- Select
- Statistic
- Spinner
- Tab
- Table
- Tag
- Textarea
- Timeline
- Timepicker
- Toggle
- Verification Code
Check out the full documentation on https://bladewindui.com.
The mcp/ directory contains clean, machine-readable Markdown documentation for every component. These files are intended for consumption by MCP (Model Context Protocol) servers so that AI assistants can understand how to use BladewindUI components.
Each file includes frontmatter, prose descriptions, fenced blade code examples, and a full attribute reference table. An index of all components is at mcp/index.md.
When you add a new component to the documentation site, run generate-mcp.php to produce its MCP entry automatically.
Requirements: PHP 8+, an Anthropic API key.
export ANTHROPIC_API_KEY=sk-ant-...Generate a new entry:
php generate-mcp.php <component-name>Preview without writing files:
php generate-mcp.php <component-name> --dry-runGenerate and add to mcp/index.md:
php generate-mcp.php <component-name> --update-indexThe script looks for resources/views/docs/<component-name>.blade.php. If the blade filename differs from the component slug (e.g. empty-state → emptystate.blade.php), add an entry to the $FILENAME_OVERRIDES map near the top of generate-mcp.php.
If you want to ask anything at all or report a security vulnerability, please e-mail mike@bladewindui.com or tweet @bladewindui
BladewindUI is an open-sourced library licensed under the MIT license.