tribe-react-component

Introduction

TLDR - React component library boilerplate. A step-by-step instructions for creating a react component library using React and Vite. Also includes Storybook for component building/testing.

Boilerplate project creation

1. Creates a React Vite project called react-component

npm create vite react-component --template react-tsx

1. Installs the dependencies

npm install

1. After creating the project, delete unnecessary files like below, because we don’t need to run the project.

• App.tsx
• App.css
• main.tsx
• index.html
• vite-env-d.ts (if you have .env files, you need to keep it.)

1. Renamed ‘src’ directory to ‘lib’ and ensure it has ‘index.tsx’ file in the ‘lib’ directory to export a specific component. Let’s create it in the ‘lib’ directory.

2. Installs Tailwind and runs init

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

1. Update tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./lib/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

References

https://medium.com/@mevlutcantuna/building-a-modern-react-component-library-a-guide-with-vite-typescript-and-tailwind-css-862558516b8d