Setting Up a React Component Library – Need Guidance

[lucarampi]

I’ve never built a component library before (though I’ve worked with some). I’m struggling with how to approach the beginning of the project. So, if you don’t mind, I’ll give a brief explanation of:

• What I need
• What I want
• What I did
• What I got

(Feel free to jump between topics! Or go to the questions at the end)

---

What I Need

I need to build a React component library that includes:

• TypeScript
• TailwindCSS (and also exports a Tailwind plugin)
• Prettier
• Tests (possibly Vitest?)
• Storybook
• React

---

What I Want

I want to create a package similar to ShadCN/UI mixed with HeroUI (NextUI), meaning:

• The ability to import components (and hooks) independently → (like HeroUI)
• The ability to import Tailwind customizations (Tailwind plugins) → (like HeroUI)
• Using ShadCN as a base (similar to OriginUI)
• A built-in docs page inside the library → (like ShadCN/UI & HeroUI)
  • (Would this require a monorepo? I’m new to monorepos...)
• A tree-shakable library
• The ability to deploy docs and packages using CI/CD
• Auto-generated changelogs and semantic versioning (✅ Already set this up!)

---

What I Did

I had bad experiences with bundlers (especially Rollup), so after researching, Vite in library mode seemed like the perfect solution.

My Initial Setup:

1. Created a project and configured:

   • Vite (with vite-plugin-dts, vite-plugin-configure-pathnames, etc.)
   • Prettier, ESLint, TypeScript

2. Importing Components Initially:

   import { Button, Card, Dialog, DialogContent } from "newbie-ui";

This imports the entire package, even if I only need a single button. That doesn’t seem efficient (probably a code-splitting issue).

3. Reorganizing the Library (Accidentally Mimicked a Monorepo Pattern):

   • Moved config files (Vite, Prettier, ESLint, etc.) to the root
   • Created a packages folder
   • Inside packages, added a components folder
   • Moved Button to its own folder:

     [root]/
       ├── packages/
       │    ├── components/
       │    │    ├── button/
       │    │    │    ├── src/
       │    │    │    │    ├── index.ts
       │    │    │    │    ├── button.tsx
       │    │    │    ├── stories/
     

4. Then Everything Broke:

   • I started getting tons of errors, which I suspect are related to:
     • tsconfig configurations
     • Rollup (which Vite uses under the hood)
   • I tried adding index.ts files everywhere, but it didn’t work
   • No matter what I did:
     • The dist folder wouldn't break down into smaller pieces
     • I couldn't import components individually
     • I couldn't install them separately

---

What I Got

Nothing but stress.

From my research, I realized a few things:

• Vite’s library mode and bundlers in general have very abstract documentation—if you don’t already understand how they work, it’s hard to find proper guidance.
• Maybe I needed a monorepo from the beginning?

---

The Big Question: I Need Guidance!

I need help from package/bundler experts. My main concerns:

• Is Vite (library mode) the right choice?
• Did I make a bad decision? If so, why?
• What would have been a better approach?
• How should I proceed from here? (Any references, repos, or sources would be great!)
• Would a monorepo like ShadCN’s structure solve this issue?

I think I’ve fallen into a rabbit hole—very deep indeed.

Any guidance is highly appreciated! 🚀