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:

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