blatui

Components

Signature Pad

Draw a signature on a canvas and capture it as a data URL, with clear and undo.

php artisan blatui:add signature-pad 
<x-ui.signature-pad name="signature" />

With Label

<div class="flex w-full flex-col gap-2">
    <x-ui.label for="sig">Signature</x-ui.label>
    <x-ui.signature-pad id="sig" name="signature" />
</div>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php 
use Livewire\Component;

class Demo extends Component
{
    public ?string $signature = null;

    public function render()
    {
        return view('livewire.demo');
    }
}
resources/views/livewire/demo.blade.php 
<x-ui.signature-pad wire:model="signature" />

API Reference

Props, slots and exposed methods for <x-ui.signature-pad>.

Props

Prop Type Default Description
name string — Form field name. Submits the signature as a PNG data URL in a hidden input (empty when the pad is blank).
height int 200 Drawing height in CSS pixels. The width is fluid and fills the container.
penColor string — Any CSS color for the ink. Defaults to the theme foreground color, so the stroke tracks light/dark mode.
id string — Id applied to the hidden input.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method Description
undo() Removes the last completed stroke and repaints. Bound to the built-in Undo button.
clear() Erases the entire signature and resets the hidden field. Bound to the built-in Clear button.