Step-by-step guide to building and locally linking your own UI component kit using modern frontend tools.

🧰 Build a UI Kit with Vite + React + TypeScript + Tailwind CSS + shadcn/ui + NPM Linking

If you're working on multiple projects or collaborating with teams, building your own UI Kit helps create reusable, consistent components across apps.

In this tutorial, you'll learn to build one using:

• ⚡ Vite.js with React + TypeScript
• 🎨 Tailwind CSS
• 🧱 shadcn/ui
• 📦 Local NPM linking (to share across apps)

✅ Prerequisites

Before we begin, ensure the following are installed on your system:

• Node.js (v18 or newer)
• pnpm (recommended) or you can use npm or yarn

1️⃣ Create Project with Vite + React + TypeScript

Start by scaffolding the project using Vite:

pnpm create vite ui-kit --template react-ts cd ui-kit pnpm install 

📁 This will create a project with:

• React
• TypeScript
• Fast Vite dev server

2️⃣ Install and Configure Tailwind CSS

Tailwind CSS is a utility-first CSS framework that lets you rapidly build custom designs.

📦 Install Tailwind and dependencies

Run the following command to install Tailwind CSS along with PostCSS and Autoprefixer:

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

This will create two configuration files in your project root:

• tailwind.config.ts — Tailwind configuration
• postcss.config.js — PostCSS configuration

⚙️ Configure tailwind.config.ts

Edit the tailwind.config.ts file to specify where Tailwind should look for class names:

import type { Config } from 'tailwindcss' const config: Config = { content: [ './index.html', './src/**/*.{ts,tsx}', // Scan all TS and TSX files in src ], theme: { extend: {}, }, plugins: [], } export default config 

🎨 Add Tailwind directives to your CSS

Create or open src/index.css and add the following:

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

🧵 Import Tailwind CSS in your app entry point

Open src/main.tsx and import the stylesheet:

import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './index.css' // Import Tailwind CSS styles ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <App /> </React.StrictMode> ) 

Now your project is configured to use Tailwind CSS!

3️⃣ Setup shadcn/ui

The shadcn/ui toolkit provides a beautiful, accessible set of React components styled with Tailwind CSS and powered by Radix UI primitives. It helps you quickly build consistent UI elements in your project.

🔧 Run the shadcn/ui installer

Use the following command to initialize shadcn/ui in your project:

pnpm dlx shadcn-ui@latest init 

Answer the CLI prompts:

• Select tailwind.config.ts
• Set your component path to src/components
• Choose components like Button, Card, Input, etc.

Now you’ll have ready-to-use UI primitives inside your project!

4️⃣ Create Your Own Components

With your UI Kit project set up, you can start building custom reusable components tailored to your design system.

📁 Organize components

Create a folder inside src/components/ui to hold your custom components, for example:

src/components/ui/

🛠️ Example: Creating a Badge component

Here’s a simple Badge component that uses Tailwind CSS utility classes and supports additional styling via props:

// src/components/ui/Badge.tsx import { cn } from '@/lib/utils' // Utility for conditional classNames (optional) interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {} export function Badge({ children, className, ...props }: BadgeProps) { return ( <div className={cn( 'inline-block px-2 py-1 text-sm rounded bg-gray-200 text-gray-800', className )} {...props} > {children} </div> ) } 

🧩 Usage example

Import and use your Badge component anywhere in your app:

import { Badge } from '@/components/ui/Badge' export default function Demo() { return <Badge>New</Badge> } 

5️⃣ Setup NPM Linking for Local Use

To reuse your UI Kit components across multiple local projects during development, you can set up local npm linking. This lets you work on your UI Kit and consume it in other projects without publishing to the npm registry.

✍️ Prepare your package.json

Make sure your UI Kit's package.json includes the following important fields:

{ "name": "@your-scope/ui-kit", "version": "0.0.1", "main": "./dist/index.js", "types": "./dist/index.d.ts", "files": ["dist"], "scripts": { "build": "tsc" } } 

• name: Use a unique package name, preferably scoped (e.g., @your-scope/ui-kit)
• main and types: Point to your build output files
• files: Include only your build folder when publishing
• scripts.build: Build script to compile TypeScript to JavaScript

🧠 Add a build tsconfig.json

Create or update tsconfig.json for building your UI Kit as a library:

{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "declaration": true, "outDir": "./dist", "jsx": "react-jsx", "moduleResolution": "Node", "esModuleInterop": true, "skipLibCheck": true, "strict": true }, "include": ["src"] } 

Run the build command to generate your compiled files:

pnpm run build 

🔗 Link your package globally

In your UI Kit project root, run:

pnpm link --global 

This registers your UI Kit package globally on your machine.

🔗 Link your package in a consuming project

In any project where you want to use your UI Kit, run:

pnpm link --global @your-scope/ui-kit 

This links the global UI Kit package into the local project’s node_modules.

🚀 Use your UI Kit components

Now you can import and use your UI Kit components as if they were installed from npm:

import { Badge } from '@your-scope/ui-kit' export default function Demo() { return <Badge>Linked Badge</Badge> } 

🔄 Keep in mind

• After making changes in your UI Kit, rebuild it (pnpm run build) to update the linked files
• Some bundlers/watchers may require restarting to pick up changes from linked packages
• When ready, you can publish your UI Kit to npm for easier sharing

Local linking allows seamless iterative development of your UI Kit and consuming apps together!