Which package do I need?
The design system ships as separate packages on separate registries. Pick by what you are building in, not by name.
| You are building | Install | Where | Status |
|---|---|---|---|
| Laravel + Blade, with or without Livewire | shipbytes/blade-ui | Composer | Available, v1.1 |
| React | @shipbytes/react | npm | Planned |
| Vue | @shipbytes/vue | npm | Planned |
| Anything else: plain HTML, Svelte, a chart library | @shipbytes/design-tokens | npm | Planned |
Only the Blade package exists today. The npm packages are listed so the names
are settled before they ship; @shipbytes/design-tokens is the dist/ folder
of the same repo and can be consumed from a git dependency until it is
published.
A Blade project needs nothing from npm
The Composer package ships the compiled CSS. The whole install is one composer require and three lines of CSS, covered in Getting started. Add the tokens package only if your own JavaScript needs the token values, for example a chart palette reading tokens.js rather than repeating hex literals.
Laravel with Inertia and React
Take @shipbytes/react and skip blade-ui: 41 Blade components you cannot render are not useful. If you have both, Blade marketing pages and a React app behind login, take both. They share dist/tokens.css, so the two buttons are the same button. That case is the reason the system is token-first rather than component-first.
Why token-first
Sharing components across frameworks does not survive contact with a real app. The dashboard this system was extracted from had roughly 1,100 Livewire directives in its markup, and the worst of it was structural rather than cosmetic. Any behaviour layer has to be rewritten per framework regardless. What genuinely travels:
| Layer | Portability |
|---|---|
| Tokens | Perfect. One CSS file every framework consumes. |
| Recipes, the class strings per variant, size and state | Near perfect. |
| Specs: anatomy, variants, states, the accessibility contract | As documentation. |
Implementations are thin leaves on top of that, not the shared thing. The tokens page lists every value with its light and dark reading; the specs carry the reasoning behind each component.