Getting Started with Gatsby


In your Gatsby project, install Kitchn by running either of the following:

npm i kitchn gatsby-plugin-styled-components babel-plugin-styled-components --save

After installing Kitchn, you need to add the gatsby-plugin-styled-components plugin to your gatsby-config.js file.

// gatsby-config.js
module.exports = {
  plugins: [
    // ...

Provider Setup

After installing Kitchn, you need to set up the KitchnProvider at the root of your application. This can be either in your index.jsx or index.tsx file.

// index.jsx
import { KitchnProvider } from "kitchn";
export default function IndexPage() {
  return (
      <TheRestOfYourApplication />

Deploy your own

Deploy the example using Vercel (opens in a new tab) or preview live with StackBlitz (opens in a new tab) or CodeSandbox (opens in a new tab).

Deploy with Vercel (opens in a new tab)

In addition, here is a complete project example (opens in a new tab) using Kitchn with Next.js.