PHPackages                             smitmartijn/laravel-lookbook - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. smitmartijn/laravel-lookbook

ActiveLibrary[Templating & Views](/categories/templating)

smitmartijn/laravel-lookbook
============================

Laravel Lookbook is a component development environment for Laravel that helps you build, document, and organize your Blade components in isolation.

1.0.0(1y ago)02.3k↓50%LGPL-3.0-or-laterPHPPHP >=8.1CI passing

Since Mar 16Pushed 1y ago1 watchersCompare

[ Source](https://github.com/smitmartijn/laravel-lookbook)[ Packagist](https://packagist.org/packages/smitmartijn/laravel-lookbook)[ RSS](/packages/smitmartijn-laravel-lookbook/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (3)Versions (2)Used By (0)

Laravel Lookbook
================

[](#laravel-lookbook)

Laravel Lookbook is a component development environment for Laravel that helps you build, document, and organize your **Blade components** in isolation. Preview different component states, document usage examples, switch between light and dark modes to verify your components - all while working in your Laravel application. Inspired by the Ruby on Rails Lookbook gem, this package brings the same powerful component development workflow to the Laravel ecosystem.

 [ ![Dark Mode](images/screenshot-dark-mode.png) ](images/screenshot-dark-mode.png)Lookbook with notification components in dark mode

Features
--------

[](#features)

- **Component Previews**: Render and display Blade components with their output.
- **Multiple Component Versions**: Show different versions/states of the same component. (i.e., primary button, secondary button, etc.)
- **Source Code Display**: View the Blade source code used to render the components.
- **Collapsible Folders**: Organize components in collapsible category folders
- **Light/Dark Mode**: Switch between light and dark themes for better visibility.
- **Component Generator**: Artisan command to scaffold new component previews
- **Markdown Documentation**: Add markdown-formatted notes to your components

Installation
------------

[](#installation)

1. Install the package via Composer:

```
composer require --dev smitmartijn/laravel-lookbook
```

2. Publish the configuration file and views:

```
php artisan vendor:publish --provider="LaravelLookbook\LookbookServiceProvider"
```

3. Update the configuration file located at `config/lookbook.php` to optionally customize the route and other settings.
4. Visit `/lookbook` to check out the interface!
5. Optionally, add `"./app/Lookbook/**/*.php",` to the `content` array in `tailwind.css.js`, if you are going to be using classes in the component preview files.

Usage
-----

[](#usage)

- Access the Lookbook interface at the configured route (default: `/lookbook`).
- Organize your Blade component previews in the `app/Lookbook` directory.
- Create component preview files to define how each component is displayed in the previews.

### Creating component previews

[](#creating-component-previews)

1. Create a component preview

```
# php artisan make:lookbook-component Button
Lookbook component created successfully in app/Lookbook/Button.php

```

2. Edit the created component preview model (`app/Lookbook/Button.php` in example) to include the code for your Blade component. For example:

```