Installation

Note: flywheel is in beta right now. There are edge cases that the library hasn't acocunted for yet.

Installing flywheel via npm

flywheel is an npm package (opens in a new tab) and can be installed by running the following in your terminal:

npm i flywheel-leaderboard

Make sure to download the npm package and not the github package. The github package requires a personal access token.

Installing tailwindcss

flywheel uses tailwindcss (opens in a new tab) for styling, so you'll need to install that as well if you're not already using it in your app. Installing tailwind will look a little different depending on your framework.

Even if you're already using tailwind in your project you still need to add a line in the content[] key of your tailwind.config.cjs for the proper styling to render.

React

First install tailwind via npm and initialize it

npm install -D tailwindcss
npx tailwindcss init -p

A file called tailwind.config.cjs will pop up in your file structure. Head over there and change it to look this:

/** @type {import('tailwindcss').Config} */
 
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
 
// Path to the tremor module
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

Finally head over to ./src/index.css, remove everything that was there before, and add this:

@tailwind base;
@tailwind components;
@tailwind utilities;

Next.js

Install tailwind via npm and initialize it w/ postcss as well

npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init -p

A file called tailwind.config.cjs will pop up in your file structure. If you're using the /src directory you'll wanna update it like so:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// If using the src directory, add:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", // tremor module
 
],
theme: {
extend: {},
},
plugins: [],
}

Using the /app directory? Update it to this then:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", // tremor module
 
],
theme: {
extend: {},
},
plugins: [],
}

Finally, add the tailwind directives to your globals.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

🚨 If you have issues when installing the library such as this error:

 Error: ENOENT: no such file or directory, open '/Users/user/Dev/personal/space-cmdr/node_modules/flywheel-leaderboard/src/components/Leaderboard/Leaderboard.tsx'

Then try adding this in your package.json:

     "start": "GENERATE_SOURCEMAP=false react-scripts start",