nasirkhan / laravel-cube
A unified component library for Laravel applications supporting both Tailwind CSS (with Flowbite) and Bootstrap frameworks
Maintainers
Requires
- php: ^8.3
- illuminate/support: ^11.0|^12.0|^13.0
- illuminate/view: ^11.0|^12.0|^13.0
- themesberg/flowbite-blade-icons: ^1.3
Requires (Dev)
- orchestra/testbench: ^9.0|^10.0|^11.0
- phpunit/phpunit: ^11.0|^12.0
Suggests
- livewire/livewire: Required if you use Livewire-powered examples or extend cube components with Livewire functionality (^3.0|^4.0)
README
A versatile collection of reusable UI components for Laravel applications with dual framework support - use Tailwind CSS or Bootstrap 5 seamlessly.
This package is used in Laravel Starter though it is framework-agnostic and can be dropped into any Laravel app.
Features
- Dual Framework Support - Use Tailwind CSS (Flowbite) or Bootstrap 5
- Framework Switching - Change frameworks per component or globally
- Reusable Components - UI, forms, navigation, and utility components
- Dark Mode - Built-in dark mode support for Tailwind-based components
- Livewire Compatible - Works well with Livewire 3/4
- Customizable - Override styles, extend functionality, publish views
- Companion Friendly - Designed to work well with companion packages such as
nasirkhan/laravel-sharekit
Why "Cube"?
The cube represents versatility and multidimensionality - just like this package that adapts to your framework choice while keeping a unified Blade component API.
Companion Packages
Laravel Cube focuses on shared UI foundations.
For page-level social sharing buttons, use the companion package:
nasirkhan/laravel-sharekit- reusable social sharing buttons with metadata auto-detection, popup sharing, copy link support, and page-scoped assets
That keeps Cube focused on core UI primitives while optional frontend behavior can evolve separately.
Components Included
UI Components
- Button -
<x-cube::button> - Modal -
<x-cube::modal> - Card -
<x-cube::card> - Badge -
<x-cube::badge> - Icon -
<x-cube::icon> - Footer Credit -
<x-cube::footer-credit> - Footer License -
<x-cube::footer-license>
Utility Components
- Google Analytics -
<x-cube::google-analytics>
Form Components
<x-cube::input><x-cube::label><x-cube::error><x-cube::group><x-cube::checkbox><x-cube::select><x-cube::textarea><x-cube::toggle>
Navigation Components
<x-cube::nav-link><x-cube::responsive-nav-link><x-cube::dropdown><x-cube::dropdown-link>
Requirements
- PHP ^8.3
- Laravel ^11.0 || ^12.0 || ^13.0
- Tailwind CSS or Bootstrap 5
- Livewire ^3.0 || ^4.0 for Livewire-powered applications
Installation
composer require nasirkhan/laravel-cube
Flowbite Blade Icons is installed automatically as a dependency of Laravel Cube.
The package will automatically register its service provider.
Configuration
Set your default framework in .env:
CUBE_FRAMEWORK=tailwind
or
CUBE_FRAMEWORK=bootstrap
Tailwind CSS Setup
If you are using Tailwind CSS v4, import the package CSS source file so Tailwind can detect utility classes used inside Cube views.
Add this to your application stylesheet:
@import "../../vendor/nasirkhan/laravel-cube/resources/css/tailwind.css";
This step is not required for Bootstrap projects.
Optional Publishing
Publish the configuration file:
php artisan vendor:publish --tag=cube-config
Publish the views:
php artisan vendor:publish --tag=cube-views
Usage
Global Framework Selection
CUBE_FRAMEWORK=tailwind
Per Component Framework Override
<x-cube::button framework="bootstrap" variant="primary"> Bootstrap Button </x-cube::button> <x-cube::button framework="tailwind" variant="primary"> Tailwind Button </x-cube::button>
Basic Examples
Buttons
<x-cube::button variant="primary">Save</x-cube::button> <x-cube::button variant="danger" type="submit">Delete</x-cube::button> <x-cube::button variant="secondary" size="sm">Cancel</x-cube::button> <x-cube::button variant="primary" :loading="true">Processing...</x-cube::button>
Icons
<x-cube::icon name="adjustments-horizontal" /> <x-cube::icon name="adjustments-horizontal" variant="solid" class="size-5 text-sky-500" />
See icon documentation in docs/icons.md.
Form Group
<x-cube::group name="email" label="Email Address" required> <x-cube::input type="email" name="email" :value="old('email')" required /> </x-cube::group> <x-cube::error :messages="$errors->get('email')" />
Navigation
<x-cube::nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')"> Dashboard </x-cube::nav-link>
Google Analytics
<x-cube::google-analytics /> <x-cube::google-analytics tracking-id="G-XXXXXXXXXX" />
Using Laravel Sharekit Alongside Cube
If your app uses Cube for layout and UI, and needs social sharing only on selected pages, install Sharekit separately:
composer require nasirkhan/laravel-sharekit
Then use it where needed:
<x-sharekit::buttons :url="route('posts.show', $post)" :title="$post->name" :description="$post->intro" :image="$post->featured_image_url" theme="tailwind" :networks="['x', 'facebook', 'linkedin', 'copy', 'native']" />
This works especially well when Cube is your shared UI package and Sharekit is an optional content-page feature.
Customization
Override Styles
Publish the configuration and modify CSS classes:
php artisan vendor:publish --tag=cube-config
Extend Components
Publish the views and customize them inside:
resources/views/vendor/cube/components/
Testing
composer test
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security related issues, please email nasir8891@gmail.com instead of using the issue tracker.
Credits
License
The GNU General Public License v3.0 or later. Please see LICENSE for more information.