Get started
There are five guides here for four consumer paths. Vue is the one path split in two, because whether Laravel is wiring the chrome's data or you are changes the setup, even though the components and the markup they emit do not. All five render the same class names, the same ARIA and the same data attributes, so the choice is a question about your build pipeline rather than about what you end up with on the page.
Pick the path you are already on
| You are building | Start here | What it costs you |
|---|---|---|
| A static site, no build step | Static HTML | Two tags |
| PHP with no framework and no Composer | Raw PHP | One require_once |
| Laravel with Blade views | Laravel and Blade | A Composer package and an install command |
| Laravel with Inertia and Vue pages | Laravel, Inertia and Vue | The same package, plus the Vue components |
| A Vue 3 app with no Laravel behind it | Vue, no Laravel | Two npm packages |
Pick by what your application already is. Moving to a heavier path to get a component is never necessary, because the component exists on all four.
What every path has in common
Whichever one you follow, the same three things end up on the page: the stylesheet, the theme script that resolves light or dark before first paint, and the icon sprite. The guides differ in who puts them there. On the static path you write the tags; on the Laravel paths the shell component does it.
The pages you will want next are the same too. Components has one page per component with the markup side by side in HTML, Blade and Vue. Raw PHP does not get its own tab: wsu_* renders the exact markup shown in the HTML tab, so a fourth panel would only repeat it. Tokens has the brand values and their measured contrast ratios, and Theming covers the light and dark mechanism.
If you are on 1.x
Start at Upgrading from 1.x instead. 2.0 is a hard break: there is no compatibility shim and the two cannot run in the same application, so reading the guide for your path first will leave you doing the work twice.