Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mkocansey/bladewind

BladewindUI is a collection of elegant Laravel blade-based UI components spiced with TailwindCSS and Javascript.
https://github.com/mkocansey/bladewind

blade css hacktoberfest html javascript laravel laravel-package php tailwindcss ui ui-components ui-design ui-library

Last synced: about 11 hours ago
JSON representation

BladewindUI is a collection of elegant Laravel blade-based UI components spiced with TailwindCSS and Javascript.

Host: GitHub
URL: https://github.com/mkocansey/bladewind
Owner: mkocansey
License: mit
Created: 2022-04-10T22:43:57.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2025-01-08T19:52:02.000Z (about 22 hours ago)
Last Synced: 2025-01-08T20:46:11.248Z (about 21 hours ago)
Topics: blade, css, hacktoberfest, html, javascript, laravel, laravel-package, php, tailwindcss, ui, ui-components, ui-design, ui-library
Language: Blade
Homepage: https://bladewindui.com
Size: 1.98 MB
Stars: 561
Watchers: 10
Forks: 52
Open Issues: 20
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        





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.





### Installation

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. You will also need to include the css used for animating the modals and other elements.




```

```

```

```




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.




```

```




You are now ready to start using any of the BladewindUI components in your application




```

Save User

```





### Components Include

- **[Accordion](https://bladewindui.com/component/accordion)**

- **[Alert](https://bladewindui.com/component/alert)**

- **[Avatar](https://bladewindui.com/component/avatar)**

- **[Bell](https://bladewindui.com/component/bell)**

- **[Button](https://bladewindui.com/component/button)**

- **[Card](https://bladewindui.com/component/card)**

- **[Centered Content](https://bladewindui.com/component/centered-content)**

- **[Checkbox](https://bladewindui.com/component/checkbox)**

- **[Datepicker](https://bladewindui.com/component/datepicker)**

- **[Dropdown](https://bladewindui.com/component/dropdown)**

- **[Dropmenu](https://bladewindui.com/component/dropmenu)**

- **[Empty State](https://bladewindui.com/component/empty-state)**

- **[Filepicker](https://bladewindui.com/component/filepicker)**

- **[Horizontal Line Graph](https://bladewindui.com/component/horizontal-line-graph)**

- **[Icon](https://bladewindui.com/component/icon)**

- **[Input](https://bladewindui.com/component/input)**

- **[List View](https://bladewindui.com/component/list-view)**

- **[Modal](https://bladewindui.com/component/modal)**

- **[Notification](https://bladewindui.com/component/notification)**

- **[Number](https://bladewindui.com/component/number)**

- **[Process Indicator](https://bladewindui.com/component/process-indicator)**

- **[Progress Bar](https://bladewindui.com/component/progress-bar)**

- **[Radio Button](https://bladewindui.com/component/radio-button)**

- **[Rating](https://bladewindui.com/component/rating)**

- **[Select](https://bladewindui.com/component/select)**

- **[Statistic](https://bladewindui.com/component/statistic)**

- **[Spinner](https://bladewindui.com/component/spinner)**

- **[Tab](https://bladewindui.com/component/tab)**

- **[Table](https://bladewindui.com/component/table)**

- **[Tag](https://bladewindui.com/component/tag)**

- **[Textarea](https://bladewindui.com/component/textarea)**

- **[Theme Switcher](https://bladewindui.com/component/theme-switcher)**

- **[Timeline](https://bladewindui.com/component/timeline)**

- **[Timepicker](https://bladewindui.com/component/timepicker)**

- **[Toggle](https://bladewindui.com/component/toggle)**

- **[Verification Code](https://bladewindui.com/component/verification-code)**





Check out the full documentation on https://bladewindui.com.





## Questions and General Info

If you want to ask anything at all or report a security vulnerability, please

e-mail [[email protected]](mailto:[email protected]) or tweet [@bladewindui](https://twitter.com/bladewindui)




## License

BladewindUI is an open-sourced library licensed under the [MIT license](https://opensource.org/licenses/MIT).