User Guide / Get Started

Key Concepts & Terminology


A component is a discrete, reusable ‘chunk’ of user interface such as a button or alert banner.

Lookbook doesn’t provide its own system for authoring components, but rather provides support for previewing components created using frameworks such as ViewComponent or Phlex, as well as for rendering previews of regular ActionView template partials.

Read more about components →

Preview classes

In order to preview a component in Lookbook it needs an associated preview class.

Preview classes are created within the test/components/previews directory and extend the Lookbook::Preview (or ViewComponent::Preview) class.

Previews can be organised into sub-directories as required and any organisational structure will be reflected in Lookbook’s navigation.

Read more about preview classes →


Each public method defined in the preview class represents a unique scenario in which the target component is rendered using a particular set of arguments. This is roughly analogous to the concept of a ‘story’ in Storybook.

Lookbook will generate an isolated component preview for each scenario.

Read more about scenarios →


Annotations are comments added to preview classes that can be used to customise the preview experience and to provide extra information to end-users.

Read more about annotations →


Lookbook’s Markdown-powered pages system allows for creating long-form documentation that lives alongside (and is tightly integrated with) component previews.

Read more about pages →

Preview inspector

The preview inspector is Lookbook’s UI for viewing and interacting with component previews and associated information.

The inspector is made up of a number of tabbed panels that can be customised to fit the needs of your project.

Read more about customising the preview inspector →

User Guide

Extending Lookbook