Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

carbonplan / components

shared react components for our websites

GitHub Build Status MIT License NPM Version

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.

See them demoed at


Initializing the Theme Provider

When working with some of the components, it is important to have a theme object in place. Therefore, to ensure smooth functioning of the components, you must initialize the theme provider in your Next.js project. Here's an example of how you can achieve this in pages/_app.js:

import { ThemeProvider } from 'theme-ui'

// import your theme or define it here
const theme = {}

export default function App({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />

Using the components

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 '@carbonplan/components'

Use our icons:

import { Icons } from '@carbonplan/components'

const { Check, Question, Info } = Icons

Render a simple layout without a footer

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

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

export default Index

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


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


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

CarbonPlan is a non-profit organization that uses data and science for climate action. We aim to improve the transparency and scientific integrity of carbon removal and climate solutions through open data and tools. Find out more at or get in touch by opening an issue or sending us an email.


shared react components for our sites



Code of conduct

Security policy





No releases published


No packages published