Starter Kit

The fastest way to start a new Brok-powered app. Scaffold authentication with Laravel Breeze, then run a single ui:add bundles/starter-kit to copy in a coherent starting set — the core primitives, an app shell, a dashboard and settings page, an app navbar, and the auth screens — and theme the whole thing through design tokens.

Note

Starting a new application? Use the supported Laravel Starter for working authentication, authorization, application patterns, tests, CI, and deployment defaults. This page documents the smaller UI-only bundle for an existing application.

Why it layers on Breeze

Brok and Breeze own different halves of a new app, so they compose cleanly rather than compete:

Breeze owns auth. It installs the registration, login, password-reset and email-verification routes, controllers, requests and middleware — the working backend of authentication — into your app.
Brok owns the UI. The Starter Kit copies in the Blade markup those flows render: the auth screens, the app shell, a dashboard, a settings page and the navbar — all built from semantic design tokens.
Source ownership. Everything Brok writes is editable Blade and CSS that lives in your repo. The package remains a small local compiler and update tool, not a remote rendering service or framework you build inside. The Starter Kit is just a curated ui:add.

Note

The Starter Kit ships UI only. It does not wire the copied auth screens to Breeze's routes for you — that is a deliberate one-time edit so you stay in control of your markup. After installing, swap the relevant Breeze auth views to compose the Brok auth blocks, or paste the block markup into them.

Warning

Pre-launch status. jml/brok is not on Packagist yet, so composer require jml/brok does not resolve. Until it is published, install it from a local Composer path (or VCS) repository pointed at packages/ui — see Pre-launch install. The hosted registry at https://brokui.dev/r/open is live and is the package default, so ui:list / ui:add need no BROK_REGISTRY_URL override.

Spin up a new project

Create a new Laravel app

Start from a fresh Laravel application. Brok requires Tailwind CSS v4 and Vite — the default Laravel skeleton ships both.

terminal

composer create-project laravel/laravel my-app
cd my-app

Install Breeze (authentication)

Add Laravel Breeze and run its installer to scaffold the auth routes, controllers and Blade views. Choose the blade stack — Brok's UI is plain Blade, so it slots straight into Breeze's Blade scaffold.

terminal

composer require laravel/breeze --dev
php artisan breeze:install blade
npm install

Require jml/brok

Because jml/brok is not on Packagist yet, point your app's composer.json at the package directory in this repo with a local path repository (this is exactly how apps/sandbox consumes it), then require it by name:

composer.json JSON

{
    "require": {
        "jml/brok": "^0.2"
    },
    "repositories": {
        "brok": {
            "type": "path",
            "url": "../../packages/ui",
            "options": { "versions": { "jml/brok": "0.2.4" } }
        }
    }
}

Adjust url to the relative or absolute path to packages/ui from your app, then install:

terminal

composer require jml/brok:^0.2

Run the installer

ui:install detects your stack (Laravel, Tailwind, Vite, Alpine, Livewire), writes the token CSS and asset entrypoints, and wires the ui.css / ui/index.js imports. It reads the hosted registry at https://brokui.dev/r/open by default; set BROK_REGISTRY_URL only for a self-hosted mirror.

terminal

php artisan ui:install

Add the Starter Kit bundle

One command pulls the whole starting set — the core primitives, an app shell, a dashboard and settings page, the app navbar, and the auth screens — resolving every dependency and copying editable Blade into your project. Preview the resolved files and dependency tree first with --dry-run if you like.

terminal

php artisan ui:add bundles/starter-kit --dry-run
php artisan ui:add bundles/starter-kit

Inspect the bundle's membership before installing with ui:show bundles/starter-kit.

Theme via tokens

Everything renders through semantic design tokens, so re-theming the entire app is a matter of editing token values in resources/css/ui.css — never the components. Tune the palette, radius and typography there, or use the Theme Generator to derive and export a token set. See Theming for the full token reference.

terminal

npm run dev

What's in the bundle

bundles/starter-kit is a deps-only bundle — it ships no source of its own; it just resolves and installs this set in one pass:

Item	What it gives you
bundles/core	The essential primitives — form controls, layout, feedback, overlays and a table.
pages/app-shell-bordered	The authenticated app frame — sidebar, header and content region.
pages/dashboard-overview	A starting dashboard screen to drop your own metrics and widgets into.
pages/settings-page	A settings screen for profile, preferences and account management.
blocks/app-navbar-default	The in-app top navigation bar.
blocks/auth-sign-in blocks/auth-sign-up blocks/auth-forgot-password blocks/auth-reset-password	The auth screens that render Breeze's authentication flows.

Want a different shape? The Starter Kit is just a curated set — browse the blocks and pages, or pick another preset on the bundles page (Landing Page, SaaS App, Admin, …) and ui:add the items you actually want.

Note

New to the install flow? Read Installation for the full ui:install detail, and the CLI reference for browsing (ui:list), inspecting (ui:show), updating (ui:update) and diffing (ui:diff) installed items.