Roue UI

Getting started

This documentation focuses on the design system behind the Roue application. Most core components are build on top of Chakra UI with heavy inspirations from great project including Tailwind, Next.js, Linear, Framer and other design systems.


Roue UI is the toolbox on which all back office application of the are developed. The goal of these pages is to help the studio track and develop the components behind the client back office application and demos.


The appearance of the app integrates with its function.
Actions give direct feedback with optimistic response.
Simple by default and powerful by configuration.


We are using these page to document the components instead storybook for two main reasons. The first reason is that storybook is an extra dependency with its own tooling to setup and maintain. The second is that we can provide more custom experience like easy dark mode, switch and codeblocks.

Since this is built on top of next. This should provide a fast DX thanks to hot module reloading and code splitting. Each component folder includes a example.tsx page with the status and documentation code to generate these pages.


  • Component should be designed with composition in mind. This is mostly the case!
  • Component should follow the dot notation. This is currently not the case!