Browse catalog

Migration

Brok is designed for incremental adoption. Establish the token and shell boundaries first, then replace repeated controls and page sections in small, reviewable slices.

Inventory before installing

List repeated controls, overlays, form patterns, app chrome, and page sections. Search Brok before recreating any of them.

terminal

php artisan ui:build "account settings form with destructive confirmation"
php artisan ui:show field --json

Install the foundation

Run the installer, import ui.css, and map your brand onto semantic tokens. Do not convert every legacy class before a real component needs it.

terminal

php artisan ui:install
php artisan ui:add button field input alert

Migrate one interaction boundary

Start with a self-contained form, dialog, table, or navigation region. Keep route, controller, validation, and Livewire ownership unchanged while replacing only the view layer.

Adopt blocks inside the existing shell

Pages and blocks are content-first. Do not nest a copied application shell inside the host shell; install shell pages only when Brok should own global navigation.

terminal

php artisan ui:show pages/dashboard-01 --skeleton
php artisan ui:add pages/dashboard-01 --dry-run

Verify every migrated slice

Check validation, keyboard order, light/dark themes, RTL, reduced motion, narrow viewports, and loading/empty/error states before removing legacy markup.

terminal

php artisan ui:doctor
php artisan ui:status
npm run build

Livewire and Alpine ownership

Let Livewire own server state, validation, persistence, and network requests.
Let the installed Alpine module own ephemeral browser behavior such as focus, positioning, and drag state.
Keep one owner per state value; bridge boundaries with attributes and events rather than two-way mirroring everything.