Setting up an NPM package for React was always exhausting for me 😮‍💨

Long articles to follow, giant boilerplate repos with tools I never knew I need. It was too complex and overwhelming, even for an experienced dev such as myself. It shouldn't be this way.

So I've decided to finally fix React npm package development DX.

Introducing Create React UI Lib.

The Speedrun

Let's create a React.js component with TypeScript typings, Storybook docs, and publish it as NPM package.

Bootstrap the project by running this command:

npm create react-ui-lib@latest

Then open the project folder with your favorite editor, run npm start and get going!

When you're ready to share your library:

1. Build the package: npm run build
2. Open package.json, update the description, your name, the repository, and take out "private": true.
3. Run npm publish

And to share documentation on GitHub Pages:

1. Build Storybook: npm run build-storybook
2. Commit and push the docs folder.
3. Get your Pages going on GitHub.

And you're done! 😨

Demo

Here's a demo project bootstrapped with create-react-ui-lib:

• GitHub
• NPM

As you can see, it has docs deployed to GitHub Pages. I told GitHub to take pages from docs folder and boom — it just works!

Let's Dive in

Hey there! I know the headache. If you're looking to create and share a React component library in 2023, it feels like you have to spend forever just to get started.

• Which bundler should I use?
• How do I get TypeScript to make typings for my components?
• How do I make a demo or documentation?
• How do I set up NPM?

And so on...

Right now, there's no quick way to create a UI component and share it without spending a lot of time on set up.

So I've made a CLI that bootstraps a minimalistic template so you can start working on your next UI React component library in seconds. I've also made a few choices for you, so you don't have to worry about the tools too much.

Let's review the tech.

Vite

I've picked Vite for bundling. It's quick and easy to set up. It also has a library mode to simplify bundling a library. For module types, I've specified ES and UMD — you probably won't need anything else. But if you do, you can check out Vite's docs.

TypeScript

There's no doubt you're going to use TS in your React UI library in modern age. It's already in Vite, and type definitions for your package are pulled to dist thanks to vite-plugin-dts, so no extra work is needed.

Storybook

The template already has Storybook set up. It's used as a development environment and as documentation for your library. It's built to a docs folder which is under git, so no extra effort is needed to share it on GitHub Pages.

Bring Your Own Tools

I made this template as unopinionated as possible not to bother you with tools you don't need or will most likely configure yourself.

• It doesn't come with pre-set ESLint.
• No styling library is included, pick the one you like.
• No pre-commit hooks. I think you should add them if and when you need them.

That said, I think including popular tools as options in CLI is a good idea. I'll wait for feedback and update the library as needed.

Let me know in the comments which tools you'd prefer to have pre-set. Styled Components or Tailwind? Maybe Reach or Radix? Or would you like ESLint with an AirBnb config? I'm all ears!

Give the project some stars on GitHub and feel free to create an issue.

If you liked the post, please hit reactions and subscribe.

Also follow me on Twitter and connect on LinkedIn.