User Guide / Components

Using with ViewComponent

ViewComponent is “a framework for creating reusable, testable & encapsulated view components, built to integrate seamlessly with Ruby on Rails”.

Lookbook was originally created to work with ViewComponent and is completely compatible with its preview system.

Any ViewComponent previews you create should automatically be available in Lookbook with no additional steps required.

See the ViewComponent docs for setup and usage instructions:


Lookbook will reference ViewComponent’s configuration options where needed so you don’t need to duplicate settings. Only Lookbook-specific configuration options will be need to set directly.

The following ViewComponent settings will be respected by Lookbook:

Note that Lookbook changes the default value for the view_component.show_previews config option to true.

If you are not using Lookbook in production then ensure that the Lookbook gem is only included in the development group in the Gemfile to prevent accidentally publicly exposing ViewComponent preview URLs.

Preview classes

ViewComponent preview classes extend ViewComponent::Preview:

# test/components/previews/example_component_preview.rb
class ExampleComponentPreview < ViewComponent::Preview
  def with_default_title
    render( "Example component default"))

However, Lookbook preview classes extend Lookbook::Preview instead.

But don’t worry! You don’t need to change or update your ViewComponent preview classes to use them in Lookbook. The two are compatible with each other.

You should continue to use ViewComponent::Preview for all ViewComponent previews and only use Lookbook::Preview for any additional view partial or Phlex previews that you might have.

User Guide

Extending Lookbook