README

iOS-quality sheet animations for Laravel/Livewire — powered by Silk HQ.

SilkWire bridges @silk-hq/components (React) with Laravel Blade and Livewire so you can use iOS-style sheets, drawers, dialogs, toasts, and more without writing any React code.

Requirements

PHP 8.2+
Laravel 11 or 12
Livewire 3 or 4
Node.js (for Vite build)

Installation

composer require yousif-nahi/silkwire

Install the NPM peer dependencies:

npm install @silk-hq/components react react-dom @vitejs/plugin-react

Publish the JavaScript assets and entry point:

php artisan vendor:publish --tag=silkwire-js --tag=silkwire-entry

Add the entry point to your vite.config.js:

import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
                'resources/js/silkwire.js', // <-- add this
            ],
        }),
        react(), // <-- add this
    ],
});

Add @silkwireAssets to your layout (before </head>):

<head>
    ...
    @silkwireAssets
</head>

Usage

Basic Sheet

<button x-data @click="$silkwire.open('my-sheet')">Open Sheet</button>

<x-silkwire::sheet id="my-sheet" preset="keyboard">
    <livewire:my-component />
</x-silkwire::sheet>

Available Presets

sheet keyboard dialog drawer bottom-sheet top-sheet detached card sidebar toast detent depth long-sheet page page-bottom lightbox

Stacking Sheets

<x-silkwire::stack id="my-stack">
    <x-silkwire::sheet id="first" preset="keyboard">
        <livewire:first-sheet />
    </x-silkwire::sheet>

    <x-silkwire::sheet id="second" preset="keyboard">
        <livewire:second-sheet />
    </x-silkwire::sheet>
</x-silkwire::stack>

Controlling from Livewire (PHP)

use YousifNahi\SilkWire\Concerns\WithSilkWire;

class MyComponent extends Component
{
    use WithSilkWire;

    public function save(): void
    {
        // ... save logic
        $this->silkClose('my-sheet');
    }
}

Alpine.js API

{{-- Magic --}}
<button x-data @click="$silkwire.open('id')">Open</button>
<button x-data @click="$silkwire.close('id')">Close</button>
<button x-data @click="$silkwire.toggle('id')">Toggle</button>

{{-- Directives --}}
<button x-data x-silkwire-open="id">Open</button>
<button x-data x-silkwire-close="id">Close</button>
<button x-data x-silkwire-toggle="id">Toggle</button>

License

MIT

yousif-nahi / silkwire

Maintainers

Package info

Statistics

Security