Installation

Add NPM Package

To add Looker UI Components to your project, add the NPM package to your project:

# Looker projects generally utilize Yarn (https://yarnpkg.com/)
yarn add @looker/components styled-components react react-dom
# If you prefer you can of course also use NPM directly:
npm install @looker/components styled-components

Using Typescript?

If you're using Typescript you'll also need to add the type definitions for Styled Components.

yarn add --dev @types/styled-components @types/react @types/react-dom

Unfortunately, due to this issue with the type definitions for Styled Components you'll need to apply a minor workaround if you're using ESLint along with Styled Component's Typescript definitions.

rm -R node_modules/@types/react-native
echo '@types/react-native' > .yarnclean

Setup

@looker/components expects two prerequisites to exist for the complete styling to be applied:

GlobalStyle

At the top-most level of the usage of @looker/components you need to load the <GlobalStyle /> component. This will inject a simple CSS reset as well as basic font assignment. GlobalStyle documentation

NOTE: The ComponentsProvider will automatically load the GlobalStyle component for you.

Web Font Loading

Users may not have the @looker/components default font, Open Sans, installed on their computers so we recommend importing the font to ensure that content is rendered with the proper font-face.

The simplest way to accomplish this is via Google's hosted CDN:

<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap"
rel="stylesheet"
/>

Using a Component

Now that we have @looker/components installed we can start using them in our application. To get things started import some components:

import { Card, ComponentsProvider, theme } from '@looker/components'
<ComponentsProvider>
<Card>{Source here...}</Card>
</ComponentsProvider>

Which could be used to render the following:

Welcome to Looker Components

Looker's component library

Try editing the code above, you should see the changes appear live.

These live editing blocks are found throughout our style guide documentation, providing a space for rapid experimentation with components.