2.12.0 • Published 11 months ago
@getgrass/components v2.12.0
Grass Components
Component library that is used by Grass applications
Installation
- 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
- Install the component library by running the command below.
yarn add @getgrass/components
- Import the
theme
and apply it on yourchakra-ui
provider
import theme from "@getgrass/components";
<ChakraProvider theme={theme}>{children}</ChakraProvider>;
Adding fonts
- 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
- 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
- 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
- For NextJS apps, delete the
Useful links
2.12.0
11 months ago
2.11.1
11 months ago
2.11.0
11 months ago
2.10.0
12 months ago
2.9.0
12 months ago
2.8.1
1 year ago
2.8.0
1 year ago
2.7.1
1 year ago
2.9.2
12 months ago
2.9.1
12 months ago
2.9.3
12 months ago
2.7.0
1 year ago
2.6.1
2 years ago
2.6.0
2 years ago
2.5.0
2 years ago
2.4.1
2 years ago
2.4.0
2 years ago
2.3.2
2 years ago
2.3.1
2 years ago
2.3.0
2 years ago
2.2.1
2 years ago
2.2.0
2 years ago
2.1.4
2 years ago
2.1.3
2 years ago
2.1.2
2 years ago
2.1.1
2 years ago
2.1.0
2 years ago
2.0.0
2 years ago
0.2.0
2 years ago
0.0.1
2 years ago