2.12.0 • Published 12 months ago

@getgrass/components v2.12.0

Weekly downloads
-
License
ISC
Repository
github
Last release
12 months ago

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
  1. Install the component library by running the command below.
yarn add @getgrass/components
  1. 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
  1. 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

2.12.0

12 months ago

2.11.1

12 months ago

2.11.0

12 months ago

2.10.0

1 year ago

2.9.0

1 year ago

2.8.1

1 year ago

2.8.0

1 year ago

2.7.1

1 year ago

2.9.2

1 year ago

2.9.1

1 year ago

2.9.3

1 year 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