quipper-blackboard
v1.0.18
Published
Quipper Design System
Downloads
983
Readme
BlackBoard
BlackBoard is a Quipper Design System.
Installation
Install Blackboard by running either of the following:
npm i quipper-blackboard @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5
yarn add quipper-blackboard @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5
And then setup the provider on your root app
import * as React from 'react'
import { ChakraProvider, extendTheme } from '@chakra-ui/react'
// blackboard theme
import { theme as blackboardTheme } from 'quipper-blackboard';
// your custom theme
import { customTheme } from 'path-to-your-custom-theme';
function App({ Component }) {
return (
<ChakraProvider theme={extendTheme(blackboardTheme.light, customTheme)}>
<Component />
</ChakraProvider>
)
}
Last one, because we are using Open Sans
as default font, we need to load the font. Add these codes to the root app.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet"
/>