Saltar al contenido
Jefferson Gonçalves
← Volver a proyectos

Ui

BladewindUI — elegant Laravel Blade UI components powered by TailwindCSS

License

BladewindUI is a modern, open-source UI component library designed to help developers build beautiful, consistent, and responsive web interfaces faster. It provides a growing collection of thoughtfully designed, customizable components that are simple to integrate, easy to use, and flexible enough for everything from dashboards and internal tools to full-featured web applications. 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 bladewindui/ui

#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 bladewindui/forms       # all form components
composer require bladewindui/content     # all content & display components
composer require bladewindui/navigation  # all navigation components

#Install a single component

Every component is its own Composer package. Install exactly what you need.

composer require bladewindui/table
composer require bladewindui/accordion
composer require bladewindui/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, Data Grid, Calendar, 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 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
Data Grid bladewindui/data-grid Data Grid
Calendar bladewindui/calendar Calendar

#Forms group — bladewindui/forms

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)
File Preview bladewindui/file-preview File Preview
Input bladewindui/input Input, Error
Inline Edit bladewindui/inline-edit Inline Edit
Number bladewindui/number Number stepper
Currency Input bladewindui/currency-input Currency Input
Password Meter bladewindui/password-meter Password Strength Meter
Radio Button bladewindui/radio Radio Button
Select bladewindui/select Select, Select Item
Slider bladewindui/slider Slider
Transfer List bladewindui/transfer-list Transfer List
Textarea bladewindui/textarea Textarea
Timepicker bladewindui/timepicker Timepicker
Toggle bladewindui/toggle Toggle
Verification Code bladewindui/code Verification Code / OTP
Credit Card bladewindui/credit-card Credit Card

#Content group — bladewindui/content

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
Chat bladewindui/chat Chat, Chat Message
Carousel bladewindui/carousel Carousel, Slide
Kanban bladewindui/kanban Kanban, Column, Card
Scheduler bladewindui/scheduler Scheduler
Centered Content bladewindui/centered-content Centered Content
Chart bladewindui/chart Chart (line, bar, pie, donut)
Code Block bladewindui/code-block Code Block
Contact Card bladewindui/contact-card Contact Card
Divider bladewindui/divider Divider
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
Keyboard Key bladewindui/kbd Keyboard Key
Copy Button bladewindui/copy-button Copy Button
Meter bladewindui/meter Meter
Description List bladewindui/description-list Description List, Item
Timeline bladewindui/timeline Timeline, Timelines
Tooltip bladewindui/tooltip Tooltip

#Navigation group — bladewindui/navigation

composer require bladewindui/navigation

# or install any single component
composer require bladewindui/breadcrumbs
composer require bladewindui/sidebar
composer require bladewindui/command-palette
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
Command Palette bladewindui/command-palette Command Palette, Command Palette Group, Command Palette Item
Stepper bladewindui/stepper Stepper, Stepper Item, Stepper Content
Dropmenu bladewindui/dropmenu Dropmenu, Dropmenu Item
Context Menu bladewindui/context-menu Context Menu, Context Menu Item
Pagination bladewindui/pagination Pagination
Tab bladewindui/tab Tab, Tab Body, Tab Content, Tab Heading
Theme Switcher bladewindui/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 bladewindui/content is identical to installing every content leaf package individually.
  • Uninstalling it and requiring just bladewindui/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 bladewindui/ui 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.

Nueva versión disponible.