React UI library for CheaprEats

Usage no npm install needed!

<script type="module">
  import cheapreatsReactUi from 'https://cdn.skypack.dev/@cheapreats/react-ui';


CheaprEats UI Library

PR Requirements

  • Showcase Visual Layer through an Image on your Pull Request
  • Showcase Interactions / Animations Layer through a GIF / Video on your Pull Request
    • Macbook: Command+Shift+5
    • Windows: Snip Tool

Installation Requirements

Prettier: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Getting Started

Storybook: https://storybook.js.org/

TypeScript: https://www.typescriptlang.org/

Atomic Design: https://atomicdesign.bradfrost.com/

This repository encompasses the Component Driven Design Methodology.


This folder is where you will be building your UI, no-data-logic only components.


This folder is where you will be testing your UI on Storybook for different ViewPorts (Responsiveness), Accessibility and functionality.


This folder contains the Storybook configuration options


This folder contains code generation scripts to help make development faster.

Helpful Resources


Contains all the styling that CheaprEats uses so you don't have to guess to color codes, Also your components will automatically translate to dark mode!

Mixins (Responsiveness)