Getting Started with Create React App or Vite React

Automatic Installation

Template

To generate the starter template for your Create React App or Vite React project, run the following command:

npx degit tonightpass/kitchn/examples/react my-react-kitchn-app
 
cd my-react-kitchn-app
npm install
npm run dev
 
git init
git add .
git commit -m "initial commit"

What's Included

This template is similar to the default Vite React template, but with Kitchn pre-installed.

Pre-install dependencies

• kitchn
• react
• react-dom

Manual Installation

Installation

In your Create React App or Vite React project, install Kitchn by running either of the following:

npm i kitchn --save

Provider Setup

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

// App.jsx
import { KitchnProvider } from "kitchn";
 
export default function App({ Component, pageProps }) {
  return (
    <KitchnProvider>
      <TheRestOfYourApplication />
    </KitchnProvider>
  );
}

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).

(opens in a new tab)

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