fitfab / fitfab.ui

New UI setup with TurboRepo and Tailwind CSS

Fitfab UI

This is based on the official React design system starter powered by Turborepo.

What's inside?

This Turborepo includes the following packages and apps:

Apps and Packages

• docs: A placeholder documentation site powered by Next.js
• @fitfab/core: core React components
• @fitfab/utils: shared React utilities
• @fitfab/tsconfig: shared tsconfig.jsons used throughout the monorepo
• eslint-preset-fitfab: ESLint preset

Each package and app is 100% TypeScript.

Utilities

This turborepo has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Using this example

We do not have a starter yet in create-turbo for this quite yet. If you want to use this in the interim, you run the following command:

npx degit vercel/turborepo/examples/design-system design-system
cd design-system
yarn install
git init . && git add . && git commit -m "Init"

Changing the npm organization scope

The npm organization scope for this design system starter is @acme. To change this, it's a bit manual at the moment, but you'll need to do the following:

• Rename folders in packages/* to replace acme with your desired scope
• Search and replace acme with your desired scope
• Re-run yarn install

Publishing packages

npm

If you want to publish package to the public npm registry and make them publicly available, this is already setup for you.

To publish packages to a private npm organization scope, remove the following from each of the package.json's

- "publishConfig": {
-  "access": "public"
- },

GitHub Package Registry

See Working with the npm registry

Tailwind CSS setup

These are the steps to setup Tailwind CSS.