Documentation
Getting started

Kitchen is a styled-components (opens in a new tab) suite of components that are designed to work together to create a beautiful and consistent UI. Inspired by Geist (opens in a new tab) and Vercel Design (opens in a new tab) with a focus on simplicity and ease of use. This library is maintained by Tonight Pass (opens in a new tab).

💡

This package is still in active development and is not yet ready for production use.

Installation

Kitchen is available as a npm package (opens in a new tab).

npm i @tonightpass/kitchen --save

After installing Kitchen, you need to set up the KitchenProvider at the root of your applications. This can be either in your index.jsx, index.tsx or App.jsx depending on the framework you use.

import { KitchenProvider } from "@tonightpass/kitchen";
 
export default function App({ Component, pageProps }) {
  return (
    <KitchenProvider>
      <TheRestOfYourApplication />
    </KitchenProvider>
  );
}

Framework Guide

Kitchen is designed to work with any framework. However, we have created a few guides to help you get started with Kitchen and your favorite framework.

Learn

Watch our official courses and dive deeper into videos that will teach you everything you need to know about Kitchen, from the basics to advanced topics.

Contribute

Whether you're a beginner or advanced user, we welcome you to contribute to Kitchen. We have a contributing guide that will help you get started.

Create React App