v5.6.0Install the Design System in your application
npm install pcln-design-system
Wrap the root of your application with the ThemeProvider component,
which adds the Design System theme to context for use in styled-components
and sets typographic defaults.
This should only be included once in your application.
The ThemeProvider is a wrapper around styled-components' ThemeProvider.
import React from 'react'
import { ThemeProvider } from 'pcln-design-system'
import SomeView from './SomeView'
class App extends React.Component {
render() {
return (
<ThemeProvider>
<h1>Hello</h1>
</ThemeProvider>
)
}
}
To use the Montserrat font-family in you project, be sure to include a link in your document <head>.
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600" rel="stylesheet" />
Import and use the design system UI components in your application.
import React from 'react'
import { Box, Text } from 'pcln-design-system'
const SomeView = (props) => (
<Box p={3}>
<Text color='blue'>Hello</Text>
</Box>
)