Installation

To use Chakra UI in your project, run one of the following commands in your terminal:

npm i @fluidtruck/core @emotion/react @emotion/styled framer-motion

After installing Chakra UI, you need to set up the TidalProvider at the root of your application. This can be either in your index.jsx, index.tsx or App.jsx depending on the framework you use.

import * as React from 'react'


// 1. import `TidalProvider` component
import { TidalProvider } from '@fluidtruck/core'


function App() {
  // 2. Wrap TidalProvider at the root of your app
  return (
    <TidalProvider>
      <TheRestOfYourApplication />
    </TidalProvider>
  )
}

Version 2 of Chakra UI is only compatible with React 18. If you are still needing to use React 17 or earlier, please use version 1 of Chakra UI.

ChakraBaseProvider#

As of v2.4.2 there is now the addition of ChakraBaseProvider. This is a minimal version of TidalProvider that only supplies theme tokens and not the default component theming.

One of the biggest causes of the large initial JS payload is the size of the component themes. With this approach, you get to apply the theme for just the component you need by using extendBaseTheme.

import { ChakraBaseProvider, extendBaseTheme } from '@fluidtruck/core'
// `@chakra-ui/theme` is a part of the base install with `@fluidtruck/core`
import chakraTheme from '@chakra-ui/theme'


const { Button } = chakraTheme.components


const theme = extendBaseTheme({
  components: {
    Button,
  },
})


function App() {
  return (
    <ChakraBaseProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraBaseProvider>
  )
}

🚨 You must use extendBaseTheme for this to work