Browse catalog

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.

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.
No vendor lock. Everything Brok writes is plain Blade and CSS that lives in your repo. There is no runtime dependency on this system once the code is copied in — you can delete the package and your UI keeps working. The Starter Kit is just a curated ui:add, not a framework you build inside.

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, and the hosted registry endpoint is not live yet. The steps below use the path (or VCS) Composer repository install and a BROK_REGISTRY_URL override. Once the package is published, those two caveats fall away — see Installation → Pre-launch install.

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 (pre-launch path repo)

Because jml/brok is not on Packagist yet, point your app's composer.json at the package directory 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.1"
    },
    "repositories": {
        "brok": {
            "type": "path",
            "url": "../../packages/ui",
            "options": { "versions": { "jml/brok": "0.1.0" } }
        }
    }
}

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

terminal

composer require jml/brok:^0.1

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. Because the hosted registry is not live yet, set BROK_REGISTRY_URL to a reachable endpoint first (for example a locally built apps/docs-registry serving /r/open):

.env

BROK_REGISTRY_URL=http://localhost:8080/r/open

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-01	The authenticated app frame — sidebar, header and content region.
pages/dashboard-01	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-01	The in-app top navigation bar.
blocks/auth-02 blocks/auth-03 blocks/auth-08 blocks/auth-09	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.