Tech 🖥 : How to make npm package

Posted: April 01, 2023

This is the tutorial about how to make,publish npm package with Vite - React, TypeScript

Setting up

  1. Sign up npm account here

Vite - React, TypeScript

$ npm create vite@latest
$ npm install -D tailwindcss postcss autoprefixer 

my setting

✔ Select a framework: › React ✔ Select a variant: › TypeScript + SWC

After you installed npm package, you will see initial project screen.

An image from Notion




/** @type {import('tailwindcss').Config} */
export default {

Add also index.css

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

Change the vite.config.ts

you also need to add

npm i vite-plugin-dts -D

npm i path

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import dts from "vite-plugin-dts";
import path from "path";

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "index.ts"),
      name: "ViteButton",
      fileName: (format) => `index.${format}.js`,
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
    sourcemap: true,
    emptyOutDir: true,
  plugins: [react(), dts()],


Basically followed this tutorial!

Make react hook component using storybook