Looker’s component library allows applications to leverage Looker’s design elements, UI patterns, and data visualizations, all through the interface of React components. Some examples of components include forms, buttons, filter inputs, pagination controls, layouts, line charts, bar charts, scatterplot charts, tables, and more.

While quick time-to-value is one of the strengths of components, where they really shine is in enabling more seamless experiences between Looker and custom-built applications.

Some common use cases include:

• Creating Looker-like UI, such as page navigation, within a Looker extension
• Creating Looker-like UI, such as dashboard filters, around embedded Looker content
• Delivering a lighter-weight individual visualization within an embedded analytics application without the full experience of an iframe embed

Using components

Being React components, Looker components are published to NPM and can be conveniently added to your front-end Javascript or Typescript application using NPM.

Separate NPM packages are available for UI components, filter components, and visualization components.

Try it out

Want to see Looker components in action before writing any code? These demos and sandboxes can help:

• Components Interactive Reference: a listing of all the Looker components other than the visualization components
• Visualization components playground: Interactively pick from the available visualization options and see the visualization rendered in the playground application, with no embed
• Atom Fashion: a demo data-driven web application built using Looker components (requires Google account to log in)

Getting started