Redwood JS

1. Installation#

Inside your Redwoodjs project , cd into web, then, install Chakra UI by running either of the following:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5

2. Provider Setup#

After installing Chakra UI, you need to set up the ChakraProvider at the root of your application.

Go to App.js and add the ChakraProvider like this:

import { ChakraProvider } from '@chakra-ui/react'
const App = () => (
<ChakraProvider>
<FatalErrorBoundary page={FatalErrorPage}>
<RedwoodApolloProvider>
<Routes />
</RedwoodApolloProvider>
</FatalErrorBoundary>
</ChakraProvider>
)
export default MyApp

ChakraProvider Props#

NameTypeDefaultDescription
resetCSSbooleantrueautomatically includes <CSSReset />
themeTheme@chakra-ui/themeoptional custom theme
colorModeManagerStorageManagerlocalStorageManagermanager to persist a users color mode preference in
portalZIndexnumberundefinedcommon z-index to use for Portal

Boom! You're good to go with steps 1 and 2 🚀🚀🚀 However, if you'd love to take it a step further, check out step 3.

3. Optional Setup#

  • Customizing Theme

If you intend to customise the default theme object to match your design requirements, you can extend the theme from @chakra-ui/react.

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react'
// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
brand: {
900: '#1a365d',
800: '#153e75',
700: '#2a69ac',
},
}
const theme = extendTheme({ colors })
// 3. Pass the `theme` prop to the `ChakraProvider`
function App() {
return (
<ChakraProvider theme={theme}>
<FatalErrorBoundary page={FatalErrorPage}>
<RedwoodApolloProvider>
<Routes />
</RedwoodApolloProvider>
</FatalErrorBoundary>
</ChakraProvider>
)
}

To further customize components or build your own design system, the theme-tools package includes useful utilities. Install @chakra-ui/theme-tools.

  • Using Chakra Icons

Chakra provides a set of commonly used interface icons you can use in your project.

If you want to use the icons from Chakra UI, install @chakra-ui/icons.

Follow this guide for customising Chakra Icons Using Chakra UI Icons.

Notes on TypeScript 🚨#

Please note that when adding Chakra UI to a TypeScript project, a minimum TypeScript version of 4.1.0 is required.

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel