Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lianmaymesi/wireblade
A simple Plain Admin UI for laravel using Tailwind CSS & Alpinejs
https://github.com/lianmaymesi/wireblade
admin-dashboard alpinejs components laravel livewire tailwind tailwindcss
Last synced: 21 days ago
JSON representation
A simple Plain Admin UI for laravel using Tailwind CSS & Alpinejs
- Host: GitHub
- URL: https://github.com/lianmaymesi/wireblade
- Owner: lianmaymesi
- License: mit
- Created: 2022-01-25T22:58:50.000Z (about 3 years ago)
- Default Branch: 2.x
- Last Pushed: 2024-11-06T06:33:16.000Z (3 months ago)
- Last Synced: 2025-01-16T07:11:18.061Z (25 days ago)
- Topics: admin-dashboard, alpinejs, components, laravel, livewire, tailwind, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 2.13 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# A simple Plain Admin UI for laravel using Tailwind CSS & Alpinejs
[](https://packagist.org/packages/lianmaymesi/wireblade)
[](https://github.com/lianmaymesi/wireblade/actions?query=workflow%3Arun-tests+branch%3Amain)
[](https://github.com/lianmaymesi/wireblade/actions?query=workflow%3A"Check+%26+fix+styling"+branch%3Amain)
[](https://packagist.org/packages/lianmaymesi/wireblade)
WireBlade is a collection of components like forms, icons, layouts which are built by using Tailwind CSS and AlpineJS. The main purpose of this package is using for my projects. If you like this package, give it a try and send your feedback. Please be kind to me, I don't have much experiences, I am just trying myself by watching & learning tutorials. Thanks to all.
## Installation
You can install the package via composer:
```bash
composer require lianmaymesi/wireblade
```
```bash
php artisan vendor:publish --tag="wireblade-assets"
php artisan vendor:publish --tag="wireblade-external-assets"
```
Optionaly, you can publish the layouts for customizing:
```bash
php artisan vendor:publish --tag="wireblade-views"
```
Mandatory if you use trix editor, it helps to configure the storage disk:
```bash
php artisan vendor:publish --tag="wireblade-config"
```
Optionaly, you can publish the components views & classes:
```bash
php artisan vendor:publish --tag="wireblade-components"
```
## Usage
If you're not publishing views or components & its classes, please follow the usage.
## WireBlade Layouts - App Layout
You can extend the `app layout` by creating `resources\views\layouts\app.blade.php` and copy the below code and update the content.
```html
Title
// Notification is optional if your notification has an empty content, it will hide automatically.
{{ $slot }}
```
## WireBlade Layouts - Auth Layout
You can extend the `auth layout` by creating `resources\views\layouts\app.blade.php` and copy the below code and update the content
```html
Show your Login / Register / Forgot Password Page Content
```
## Directives for styles & scripts
Add these two styles inside your ``
```php
{{ Vite::useHotFile('vendor/wireblade/wireblade.hot')->useBuildDirectory('vendor/wireblade')->withEntryPoints(['resources/assets/css/app.css', 'resources/assets/js/app.js']) }}
```
## Adding Dark Mode
You have to install [Tailwind CSS](https://tailwindcss.com) and enable `darkMode: 'class'`
And add the below `alpinejs` script inside tag
```js
x-data="{ darkMode: false }" x-init=" darkMode = JSON.parse(localStorage.getItem('darkMode')); $watch('darkMode', value
=> localStorage.setItem('darkMode', JSON.stringify(value)))" :class="{ 'dark': darkMode == true }"
```
## For Sidebar
Add the below code inside your `` tag
```js
x-data="sidebar"
@resize.window="handleResize"
```
## Flash Notification
Add this component on your `app` layout
```php
```
For triggering this notification in livewire
```php
public function store() {
...
...
$this->dispacthBrowserEvent('notify', 'Ah! It\'s Working');
}
```
## Table
You can use table component.
```php
Name
John Doe
```
## Modal
You can use modal component which is same as available in Jetstream Laravel.
```php
// Title goes here
// Content goes here
// Footer goes here
```
## Form Fields
You can use forms, currently limited for testing purposes.
```php
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non libero praesentium
voluptate debitis dolorum quas suscipit eos deleniti odit architecto dolor
facilis itaque temporibus, quaerat quod provident. Quam, necessitatibus porro.
1
1
1
1
```
## Trix Editor
If you are using trix editor you should add `@trixCss` & `@trixJs` directives in below the livewire directives on your home page.
And also if you want to add image upload through trix editor, `use WithFileAttachment` trait.
```php
\\ Page.php
use HasFileAttachment;
public $description = '';
\\ page.blade.php
```
## Links
### Anchor Link
```php
Edit
```
### Button Link
```php
Add
```
## Tags Input
It Requires Livewire and you have to add the property in Livewire as `public $meta_key = []`
```php
```
## Testing
```bash
composer test
```
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
## Contributing
Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.
## Security Vulnerabilities
Please review [our security policy](../../security/policy) on how to report security vulnerabilities.
## Credits
- [LiAn DhAs](https://github.com/lianmaymesi)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.