Developers
Quickstart
Pull Harbour components into any Laravel app and start composing in minutes.
Requirements
Laravel 11+, Tailwind CSS v4, and Alpine.js v3. Press
Ctrl
+ K
in your editor to search components.
1. Install & add a component
bash
# Pull the CLI, then add a component and its dependencies
composer require harbour/cli --dev
php artisan harbour:add data-table
# then install the printed packages
npm install alpinejs @phosphor-icons/web && npm run build
<x-ui.card>
<x-ui.card.header title="Team" description="Manage members." />
<x-ui.card.body>
<x-ui.badge variant="green" dot>Active</x-ui.badge>
</x-ui.card.body>
</x-ui.card>
2. Theme it in one line
Every component reads from the Harbour token ramp. Re-skin the whole UI by editing the
brand-* scale.
resources/css/app.css
+1
-1
css
1
1
@theme {
2
-
--color-brand-600: #4f46e5;
2
+
--color-brand-600: #0f766e;
3
3
}
On this page
Tip
Components are copied into your repo as source — edit them freely, they won't be overwritten on update.
routes/web.php
php
use App\Http\Controllers\TeamController;
Route::get('/team', [TeamController::class, 'index'])->name('team');
.env
bash
HARBOUR_REGISTRY_URL=https://harbour.gorgepanel.com/registry