Laravel Packages

Blast — Storybook UI Development for Laravel Blade

Published
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.

Sponsored

laravelcloud logo
Laravel Cloud

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

Visit Laravel Cloud

The latest

View all →
Building EasyReply: How We Used Laravel to Unify Customer Support image

Building EasyReply: How We Used Laravel to Unify Customer Support

Read article
PostgreSQL Monitoring and Schema Linting for Laravel with Vacuum image

PostgreSQL Monitoring and Schema Linting for Laravel with Vacuum

Read article
PayZephyr: One Payment API for Stripe, Paystack, and PayPal image

PayZephyr: One Payment API for Stripe, Paystack, and PayPal

Read article
Bifrost Turns One With AI Builds and New Workflows image

Bifrost Turns One With AI Builds and New Workflows

Read article
Preview Blade Templates in macOS Finder with Quick Blade image

Preview Blade Templates in macOS Finder with Quick Blade

Read article
Artisan Debugging Commands in Laravel Telescope 5.24.0 image

Artisan Debugging Commands in Laravel Telescope 5.24.0

Read article