rjv.im avatar rjv.im
    • solutionApril 14, 2025

    Building React Component Library - Configure Vite and Tailwind

    Why modern security architectures assume breach and verify everything

    reactcomponent-library

    In this post, I will walk you through building a React component library using Vite and Tailwind. We will also see how to publish it to npm and use it in a React application. We will integrate auto for versioning and release notes.

    Requirements

    • We will create a react component library using Vite and Tailwind
    • We will publish the component library to npm
    • We will publish documentation to GitHub pages using Docusaurus
    • Make all this setup in a monorepo built with Lerna
    • Automate Release Versioning & Release Notes using auto

    Setup

    Initialize Codebase

    We will use Lerna to set up our codebase and add Docusaurus for documentation.

    npx lerna init --packages="packages/*" --packages="apps/*"

    Create Docusaurus App

    npx create-docusaurus@latest apps/docs classic --typescript

    Create Vite React App

    Run the following command

    npm create vite@latest packages/elements -- --template react-ts

    Change package name

    Change the name in package.json to @rcls/elements (actually to something you like)

    Setup scripts

    Add the following scripts to root package.json

    console.log("1");
console.log("2"); 
console.log("3");
console.log("4");
    package.json
    https://github.com/rjvim/react-component-library-starter/blob/main/package.json#L8-L16
    {
  "name": "root",
  "private": true,
  "workspaces": [
    "packages/*",
    "apps/*"
  ],
  "scripts": {
    "clean": "npx rimraf node_modules && find . -name 'node_modules' -type d -prune -exec npx rimraf {} + && find . -name 'dist' -type d -prune -exec npx rimraf {} +",
    "canary": "npx auto canary --force",
    "build": "lerna run build",
    "docs:start": "lerna run start --scope apps-docs",
    "docs:build": "lerna run build --scope apps-docs",
    "docs:serve": "lerna run serve --scope apps-docs",
    "docs:deploy": "lerna run deploy --scope apps-docs",
    "package:build": "lerna run build --scope @rcls/elements",
    "package:dev": "lerna run dev --scope @rcls/elements",
    "elements-tw-v4:build": "lerna run build --scope @rcls/elements-tw-v4",
    "elements-tw-v4:preview": "lerna run preview --scope @rcls/elements-tw-v4",
    "elements-tw-v4:dev": "lerna run dev --scope @rcls/elements-tw-v4",
    "elements-shadcn-twv4:build": "lerna run build --scope @rcls/elements-shadcn-twv4",
    "elements-shadcn-twv4:preview": "lerna run preview --scope @rcls/elements-shadcn-twv4",
    "elements-shadcn-twv4:dev": "lerna run dev --scope @rcls/elements-shadcn-twv4"
  },
  "devDependencies": {
    "@auto-it/all-contributors": "^11.3.0",
    "@auto-it/conventional-commits": "^11.3.0",
    "@auto-it/npm": "^11.3.0",
    "@auto-it/omit-commits": "^11.3.0",
    "@auto-it/omit-release-notes": "^11.3.0",
    "@auto-it/released": "^11.3.0",
    "auto": "^11.3.0",
    "lerna": "^8.1.9",
    "rimraf": "^6.0.1"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}
 
    import { blog } from "@/.source";
import { loader } from "fumadocs-core/source";
import { createMDXSource } from "fumadocs-mdx";
import type { InferMetaType, InferPageType } from "fumadocs-core/source";
import type { PageTree } from "fumadocs-core/server";
 
export const blogSource = loader({
  baseUrl: "/blog",
  source: createMDXSource(blog),
});
 
export const {
  getPage: getBlogPost,
  getPages: getBlogPosts,
  pageTree: pageBlogTree,
} = blogSource;
 
export type BlogPost = ReturnType<typeof getBlogPost>;

    Test Setup

    • Build docs: npm run docs:build
    • Build package: npm run package:build
    • Build everything: npm run build

    If both of these work, then the setup is complete. If anything seems to fail, you can clean the repo and build again using npx lerna clean -y && npm install

    Push to Github

    Create a github public repo on Github and push the codebase to it, as in the following steps we would be using github actions.

    Last updated on

    On this page