Blast — Storybook UI Development for Laravel Blade

Published on by

Blast — Storybook UI Development for Laravel Blade image

Storybook for Laravel Blade is a package to build component libraries using Laravel. Blast lets you render examples of your app's components using the blade templating engine and Storybook Server within your Laravel app.

You can think of Storybook server as a UI development environment for your blade templates rendered by Laravel. This package makes it easy to iterate on components using Storybook:

@storybook([
'args' => [
'label' => 'Button',
'href' => '#',
'icon' => 'menu-24',
'iconPosition' => 'after',
]
])
 
<x-button.primary
:href="$href ?? null"
:icon="$icon ?? null"
:iconPosition="$iconPosition ?? null"
>
{{ $label ?? null }}
</x-button.primary>

As you make changes to components, Blast will watch changes and automatically regenerate the stories and update Storybook. Once you get Blast installed in a new or existing Laravel app, the package provides various configuration options:

  • Storybook Server URL
  • Storybook Theme
  • Canvas Background Color
  • Configurable asset autoloading
  • And more

While Blast will help you get started quickly with Blade and Storybook, I'd recommend reading Getting Started with Blast – Storybook for Laravel Blade as well as the Storybook official docs.

You can learn more about this package, get full installation instructions, and view the source code on GitHub.

Paul Redmond photo

Staff writer at Laravel News. Full stack web developer and author.

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

image
Laravel Cloud

Easily create and manage your servers and deploy your Laravel applications in seconds.

Visit Laravel Cloud
PhpStorm logo

PhpStorm

The go-to PHP IDE with extensive out-of-the-box support for Laravel and its ecosystem.

PhpStorm
No Compromises logo

No Compromises

Joel and Aaron, the two seasoned devs from the No Compromises podcast, are now available to hire for your Laravel project. ⬧ Flat rate of $9500/mo. ⬧ No lengthy sales process. ⬧ No contracts. ⬧ 100% money back guarantee.

No Compromises
Laravel Cloud logo

Laravel Cloud

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Cloud
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Lucky Media logo

Lucky Media

Get Lucky Now - the ideal choice for Laravel Development, with over a decade of experience!

Lucky Media
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit: Laravel SaaS Starter Kit

SaaSykit is a Multi-tenant Laravel SaaS Starter Kit that comes with all features required to run a modern SaaS. Payments, Beautiful Checkout, Admin Panel, User dashboard, Auth, Ready Components, Stats, Blog, Docs and more.

SaaSykit: Laravel SaaS Starter Kit
Harpoon: Next generation time tracking and invoicing logo

Harpoon: Next generation time tracking and invoicing

The next generation time-tracking and billing software that helps your agency plan and forecast a profitable future.

Harpoon: Next generation time tracking and invoicing
Acquaint Softtech logo

Acquaint Softtech

Acquaint Softtech offers AI-ready Laravel developers who onboard in 48 hours at $3000/Month with no lengthy sales process and a 100 percent money-back guarantee.

Acquaint Softtech

The latest

View all →
Build a Laravel Scout Search Endpoint With the HTTP QUERY Method image

Build a Laravel Scout Search Endpoint With the HTTP QUERY Method

Read article
Enforce Per-Action Waiting Periods in Laravel with Cooldown image

Enforce Per-Action Waiting Periods in Laravel with Cooldown

Read article
First-Party Image Processing in Laravel 13.20 image

First-Party Image Processing in Laravel 13.20

Read article
Laravel Legacy Bridge: Carry Authenticated Sessions from a Legacy App into Laravel image

Laravel Legacy Bridge: Carry Authenticated Sessions from a Legacy App into Laravel

Read article
Laravel Quota: Usage Budgets for Calendar Periods image

Laravel Quota: Usage Budgets for Calendar Periods

Read article
Find the Security Vulnerabilities in Your Laravel App with Sensagraph image

Find the Security Vulnerabilities in Your Laravel App with Sensagraph

Read article