Posted on Jun 16 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.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:Then open the project folder with your favorite editor, run npm start and get going!When you're ready to share your library:And to share documentation on GitHub Pages:And you're done! 😨Here's a demo project bootstrapped with create-react-ui-lib: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!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.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.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.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.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.I made this template as unopinionated as possible not to bother you with tools you don't need or will most likely configure yourself.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.Templates let you quickly answer FAQs or store snippets for re-use.nice guide btw, saved for the futureI prefer Ladle (they use Vite and esbuild and aren't as overwhelmed by the extra toolkit, so it's very quick 🏎️), but good job anyway 👍🏻 Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Chris Frewin - Jun 5 Matteo Bruni - Jun 3 Annastacia Kioko - Jun 4 Arjun Porwal - May 30 Once suspended, topcat will not be able to comment or publish posts until their suspension is removed. Once unsuspended, topcat will be able to comment and publish posts again. Once unpublished, all posts by topcat will become hidden and only accessible to themselves. If topcat is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Misha. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag topcat: topcat consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging topcat will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.