Setting Up Chakra UI

Front-end tooling has rapidly progressed, and projects like styled-system and Theme UI make it easy to create components that easily adhere to your design system.

Chakra UI, built on top of styled-system, provides a comprehensive component library allowing us to easily create components that adhere to a design system.

  • Since it uses styled-system under the hood, we can use style props
  • The theme is extendable, allowing us to change fonts and add icons easily
  • It includes a great set of accessible components out of the box
  • Works well with Next.js and supports dark mode

To install Chakra, let's add the required dependencies.

$ yarn add @chakra-ui/core@0.8.0 @emotion/core@10.0.28 @emotion/styled@10.0.27 emotion-theming@10.0.27

This course uses v0.8 of Chakra UI. You can read the docs for this version here. If you'd prefer to start from v1.0, you can read the migration guide here.

Chakra UI comes with a default theme containing values for colors, typography, and more. Let's extend the default and add a custom font.

styles/theme.js

import { theme as chakraTheme } from '@chakra-ui/core'
const theme = {
...chakraTheme,
fonts: {
...chakraTheme.fonts,
body: `Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`,
},
fontWeights: {
normal: 400,
medium: 600,
bold: 800,
},
}
export default theme

Now, we can add the theme to our application with ThemeProvider, passing the theme object as a prop. Let's modify pages/_app.js to make the theme available to all pages. Next.js uses the App component to initialize pages. You can override it and control the page initialization.

pages/_app.js

import { ThemeProvider, CSSReset } from '@chakra-ui/core'
import { AuthProvider } from '../lib/auth'
import theme from '../styles/theme'
const App = ({ Component, pageProps }) => {
return (
<ThemeProvider theme={theme}>
<AuthProvider>
<CSSReset />
<Component {...pageProps} />
</AuthProvider>
</ThemeProvider>
)
}
export default App

We also need to load the font Inter defined earlier. A custom Document is commonly used to augment your application's <html> and <body> tags. This is necessary because Next.js pages skip the definition of the surrounding document's markup.

pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument