Welcome to React﹤Kitten﹥

In this tutorial, you will learn how to build beatiful windowed applications with React﹤Kitten﹥.

Kitten is a Desktop Environment & Window Manager for React. It provides a set of components and hooks to build windowed applications with ease.

In this tutorial, you will learn how to build a simple windowed application with React﹤Kitten﹥.

In this tutorial, you’ll see also API references for each component and hook. Please follow the tutorial step by step to understand how to use them.

Let’s get started!

Install React﹤Kitten﹥

To get started, you need to install React﹤Kitten﹥. You can install it using npm or yarn in your existing React project.

npm install react-kitten

That’s all! Now you are ready to build your first windowed application with React﹤Kitten﹥.

This first example shows how to create a simple windowed application with React﹤Kitten﹥.

We are using BasicWindow in this first simple example. BasicWindow works with initial props; it is an easier way if you need a very basic window.

function App() {
  const [size, setSize] = useState<[number, number]>([
    window.innerWidth,
    window.innerHeight,
  ])
  const [space, setSpace] = useState(0)

  return <Manager size={size}>
    <Spaces space={space} onSpaceChange={setSpace}>
      <Space>
        <BasicWindow>Hello World!</BasicWindow>
      </Space>
    </Spaces>
  </Manager>
}

In this example, we are using Manager, Spaces, Space, and BasicWindow components. Manager is the main componenet (like “Window Manager”), Spaces is the container for Space components, Space is the container for any elements including Window and BasicWindow components.

That’s all! You have built your first windowed application with React﹤Kitten﹥.