Documentation
Getting started

Kitchn 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

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

npm i kitchn --save

After installing Kitchn, you need to set up the KitchnProvider 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 { KitchnProvider } from "kitchn";
 
export default function App({ Component, pageProps }) {
  return (
    <KitchnProvider>
      <TheRestOfYourApplication />
    </KitchnProvider>
  );
}

Framework Guide

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

Learn

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

Contribute

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

Contributing