Getting Started

yarn add @planning-center/ui-kit @emotion/cache@^10.0.0 @emotion/core@^10.0.0 emotion-theming@^10.0.0

First, we’ll review some tools that will help aid in our development experience when using UI kit.

React Devtools provides a first-class development experience when working with React. Using the filtering feature is a great way to reduce noise when working with large React component trees. Since UI kit composes multiple components and external libraries we recommend applying the following filters: Context, EmotionCSSPropInternal, ItemList

Please note if you are using Context in your application you may not want to filter it.

If you are using an applicable editor like VS Code, any type information that a package includes is used to provide in-editor suggestions and autocompletion for how the code should work. We use TypeScript to do just this and compile a definitions file that includes strongly typed information for all UI kit components. Read more about types and how to set up your own tokens in the theming guide.

Get fast access to the UI kit docs via Dash by installing the UI kit docset.

To start, we will set up a theme that adheres to your brand guidelines. In order for UI kit components to use your theme we need to set up the included ThemeProvider:

import { StackView, Text, ThemeProvider } from '@planning-center/ui-kit'
import Page from './Page'
const theme = {
  boxSizes: {
    small: { paddingHorizontal: 1, paddingHorizontal: 0.75 },
    medium: { paddingHorizontal: 1.5, paddingHorizontal: 1 },
  },
  breakpoints: {
    phone: 480,
    tablet: 720,
    desktop: 960,
  },
  colors: {
    primary: 'hotpink',
    secondary: 'lime',
  },
}
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Page />
    </ThemeProvider>
  )
}
render(App)

Now we’re ready to import and start using components 🎉

import React from 'react'
import { Box, StackView } from '@planning-center/ui-kit'
function Page() {
  return (
    <StackView axis="horizontal">
      <Box color="primary">Hello</Box>
      <Box color="secondary">UI Kit</Box>
    </StackView>
  )
}

To learn how style props work and allow us to get rid of managing stylesheets see Style Props.

UI kit is constantly being updated and improved. For all issues or feature requests visit our GitHub page.