gainforest / components

shared react components for our websites

These are a set of modular but opinionated react components. They assume and make extensive use of theme-ui and next, and are meant to be composed with our theme. The main use cases are to encourage consistency throughout our design and streamline building our own websites by reducing boilerplate. However, over time we might expand them to enable easier embedding of our content into other websites.

usage

To use, import the component(s) you want into your next project. Here are some examples.

Use our logo and monogram:

import { Logo, Monogram } from '@gainforest/components'

Use our icons:

import { Icons } from '@gainforest/components'

const { Check, Question, Info } = Icons

Render a simple layout without a footer

import { Layout, Logo, Monogram } from '@gainforest/components'

const Index = () => {
  return (
    <Layout footer={false}>
      <Logo sx={{ width: 180 }} />
      <Monogram sx={{ width: 60 }} />
    </Layout>
  )
}

export default Index

For more usage examples checkout our design sample which showcases all these components live.

development

To update a component and publish a new version, first make your changes, then follow these steps

• Increase the version number in package.json
• npm run build
• npm publish

license

All the code in this repository is MIT licensed, but we request that you please provide attribution if reusing any of our digital content (graphics, logo, articles, etc.).

about us

We are an interdisciplinary and international nonprofit association based in Zurich, Switzerland 🇨🇭 with engineers, policy makers, and researchers from Germany 🇩🇪, the U.S. 🇺🇸, the UK 🇬🇧, Indonesia 🇮🇩 and Argentina 🇦🇷​. Our goal is to reverse the deterioration of nature by enabling dignified and sustainable work for forest communities using trust-enhancing technologies.

kudos

Much of this code is based by the amazing work of carbonplan