Grass Components

Component library that is used by Grass applications

Installation

1. This library depends on a couple of peer dependencies that needs to be installed for it to run. Make sure you have these dependencies installed first before using the components.

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion react react-dom

2. Install the component library by running the command below.

yarn add @getgrass/components

3. Import the theme and apply it on your chakra-ui provider

import theme from "@getgrass/components";

<ChakraProvider theme={theme}>{children}</ChakraProvider>;

Adding fonts

1. In order to apply the default font for this theme which is the DM Sans, you need to install this:

yarn add @fontsource-variable/dm-san

2. Add the theme of the package

2.a. Import the font on your _app.tsx file

import theme from "@getgrass/components"
import '@fontsource-variable/dm-sans' //supports weights 100-900

...

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <ChakraProvider theme={theme}>
          <Component {...pageProps} />
      </ChakraProvider>
    </>
  )
}

export default App

2.b. Extend the theme to a local theme

import { extendTheme } from "@chakra-ui/react";
import grassTheme from "@getgrass/components";

const theme = extendTheme(grassTheme, {
  // insert local configurations here
});

export default theme;

Common problems and fix

1. New components added are not reflected on the app
   • For NextJS apps, delete the .next folder to remove cached components and run it again
   • Make sure you're installing the local package when developing

Useful links

• Chakra UI Documentation
• Using multiple chakra providers - Example