Create React UI Lib: Component Library Speedrun
Tags: typescript, react, node, opensource
Published: 2023-06-16 18:12:38


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](https://github.com/mlshv/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:

```shell
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](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site).

And you're done! 😨

## Demo
Here's a demo project bootstrapped with `create-react-ui-lib`:
- [GitHub](https://github.com/mlshv/create-react-ui-lib-demo)
- [NPM](https://npmjs.com/package/create-react-ui-lib-demo)

As you can see, it has [docs deployed to GitHub Pages](https://mlshv.github.io/create-react-ui-lib-demo). I told GitHub to take pages from `docs` folder and boom — it just works!

![Set up GitHub Pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbdvcirjs6we585qrhhd.png)

# 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](https://vitejs.dev/) 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](https://vitejs.dev/config/build-options.html#build-lib).

### 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](https://storybook.js.org/) 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](https://github.com/mlshv/create-react-ui-lib) some stars on GitHub and feel free to [create an issue](https://github.com/mlshv/create-react-ui-lib/issues/new).

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

Also follow me on [Twitter](https://twitter.com/mishgun_eth) and connect on [LinkedIn](https://www.linkedin.com/in/mikhail-malyshev-030395237/).