wirecn / laravel-wirecn

Blade UI components for Laravel with Tailwind-friendly class merging via cn() (tailwind-merge-php) and Alpine.js behaviours shipped as publishable JavaScript stubs.

Requirements

• PHP ^8.3
• Laravel ^12 or ^13 (Illuminate View / Support)
• Tailwind CSS v4 (or compatible) with your design tokens (bg-popover, text-muted-foreground, etc.)

Install

composer require wirecn/laravel-wirecn:^1.0

minimum-stability: stable + repositório path

Packagist: a versão vem só das tags Git (v1.0.0, …). Não usamos o campo "version" no composer.json do pacote — evita o erro do Packagist “tag does not match version in composer.json” quando a tag e o campo divergem.

Repositório path: sem "version" no pacote, o Composer expõe normalmente dev-main (ou o nome do branch). Para satisfazer ^1.0 com minimum-stability: stable, podes usar alias no projecto consumidor, por exemplo: "wirecn/laravel-wirecn": "dev-main as 1.0.0" (ajusta o branch à tua cópia local).

Publish views (required for the default workflow — components live in your app):

php artisan vendor:publish --tag=wirecn-views

Publish JavaScript (Alpine primitives, optional chart/phosphor islands):

php artisan vendor:publish --tag=wirecn-js

Then import Alpine (and islands if you use them) from your Vite entry, for example:

import './wirecn/alpine-ui.js';

Ensure Tailwind scans published components:

// tailwind.config / @source in CSS — example
'./resources/views/components/wirecn/**/*.blade.php',

NPM dependencies

Composer does not install these. After vendor:publish --tag=wirecn-js, stubs live under resources/js/wirecn/. Install packages in your app root (package.json).

Required if you import alpine-ui.js

Used directly by the published bundle:

npm install embla-carousel @floating-ui/dom

Optional — Phosphor icons

Needed when you render <x-wirecn.phosphor-icon> (and defaults like <x-wirecn.icon> that delegate to it).

Vite: add @vitejs/plugin-react and ensure .jsx under resources/js/wirecn/ is compiled (same React major as your app).

Example (run after DOM ready; call again after Turbo / Livewire navigations if icons are injected later):

import { initPhosphorIcons } from './wirecn/phosphor-island.jsx';

void initPhosphorIcons();

Optional — Charts

Needed for <x-wirecn.chart> (data-ui-chart nodes).

import { initUiCharts } from './wirecn/chart-island.jsx';

initUiCharts();

Versions and licensing

wirecn does not ship a package.json for your app: pin versions next to your Laravel / Vite / React stack. When upgrading wirecn, re-publish or diff stubs, then adjust npm ranges if builds fail.

Third-party docs: Embla, Floating UI, Phosphor, Recharts. You do not need to copy their APIs into this README—only install what you use and wire the init helpers above.

Usage

After publishing, use dot notation for nested components:

<x-wirecn.input class="max-w-sm" name="email" type="email" />
<x-wirecn.button variant="default">Save</x-wirecn.button>
<x-wirecn.dropdown-menu.item>...</x-wirecn.dropdown-menu.item>

class and other HTML attributes are forwarded where each stub uses $attributes->class(cn(...)).

Updates

Use SemVer: patch for bugfixes, minor for backwards-compatible additions, major for breaking PHP or Blade contracts.

Packagist (public)

Submit this repository (or a split mirror with this package at the Git root) to Packagist. During local development you can use a Composer path repository pointing at this directory.

License

MIT