---
title: "Discussion on \"Creating a React Component Library with TypeScript, Storybook & Rollup\" | Hashnode"
description: "Discussion on \"Creating a React Component Library with TypeScript, Storybook & Rollup\". A shared UI component library is fundamental to the frontend architecture of a growing company where you have teams maintaining several projects that use the same visual elements. The UI component library ensures visual consistency between projects o..."
url: "https://hashnode.com/posts/creating-a-react-component-library-with-typescript-storybook-and-rollup/60737b5a1494367be6d2b56f"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Creating a React Component Library with TypeScript, Storybook & Rollup](https://blog.cristiana.tech/creating-a-react-component-library-with-typescript-storybook-and-rollup?utm_source=hashnode&utm_medium=feed)

A shared UI component library is fundamental to the frontend architecture of a growing company where you have teams maintaining several projects that use the same visual elements. The UI component library ensures visual consistency between projects o...

Apr 11, 2021 · 6 min read · blog.cristiana.tech  
Updated Dec 4, 2021  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#typescript](https://hashnode.com/tag/typescript)
-   [#components](https://hashnode.com/tag/components)

## Written by

[Cristiana Man](https://hashnode.com/@cristiana)

@cristiana · Copenhagen, Denmark

  
[View profile](https://hashnode.com/@cristiana)

Software Engineer

## Responses 6

Markdown supported · ⌘↵ to post

[Rob Levin](https://hashnode.com/@agnosticui-guy)

[Sep 30, 2021](https://hashnode.com/posts/creating-a-react-component-library-with-typescript-storybook-and-rollup/60737b5a1494367be6d2b56f/comment/615530dd414f78089df3dcd1)

Thanks for the guide Cristiana! I just went through this dance myself and here are some additional things I found interesting:

-   Use `npm pack` to test out what's getting placed in your published package. Also, it lets you `npm i path/to/tarbal-0-0-0.tgz` to verify. Much more reliable then pure npm linking on both sides.

-   I had to do

```
    typescript({
      declaration: true,
    }),
```

and in my tsconfig

```
    "noEmit": false,
    "emitDeclarationOnly": true,
```

and then use `tsc` to build the types with:

```
    "build:types": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",
```

where my `tsconfig-cjs.json` extended the main one just changing the `module` to `CommonJS` and `outDir` to `dist/cjs`. It seems `dist` is most popular default e.g. for create-react-app aka `react-scripts` it seems to "want" stuff in `dist` (I had put stuff in `lib` before).

It's probably worth experimenting with the `postcss` options:

```
    postcss({
      minimize: true,
      sourceMap: true,
      extract: true,
    }),
```

I wanted my css minimized and not inlined. I thought I'd need to add `module: true` but there's a default in `postcss` that if you already name your files `foo.module.css` it'll treat it as a CSS module anyway (of course this is only for folks who care about that).

All this was done for my [AgnosticUI React](https://github.com/AgnosticUI/agnosticui/tree/master/agnosticui-react) package (but similar for Vue and Svelte packages too)

I definitely took a lot of tweaking and I referenced many other blog articles and docs before getting it to my liking. Thanks again for yours Cristiana!

[Marko Francekovic](https://hashnode.com/@mfrancekovic)

[Sep 10, 2021](https://hashnode.com/posts/creating-a-react-component-library-with-typescript-storybook-and-rollup/60737b5a1494367be6d2b56f/comment/613b2ae96d76811c4b93f4ed)

Christiana, this is such a crisp and clean guide. Thank you!

[Marko Francekovic](https://hashnode.com/@mfrancekovic)

[Sep 10, 2021](https://hashnode.com/posts/creating-a-react-component-library-with-typescript-storybook-and-rollup/60737b5a1494367be6d2b56f/comment/613b2ae96d76811c4b93f4ed#reply-613b2eb382052051498b4c51)

One thing I've noticed. It seems you presume that the rollup is installed globally, as you have not included it in the dependencies.

If rollup is not present globally, the `npm run build` doesn't work.

If this helps somebody: Option 1 - `npm install -g rollup` Option 2 - `npm install --save-dev rollup`

[Dmitriy](https://hashnode.com/@Di35777)

[Jul 1, 2021](https://hashnode.com/posts/creating-a-react-component-library-with-typescript-storybook-and-rollup/60737b5a1494367be6d2b56f/comment/60ddb7eb83e0d73ecb5b7d79)

Thank you! I would be glad to see an article about "Create React Library" with typescript

[Harshil Parmar](https://hashnode.com/@harshilparmar)

[Apr 13, 2021](https://hashnode.com/posts/creating-a-react-component-library-with-typescript-storybook-and-rollup/60737b5a1494367be6d2b56f/comment/6075fb56ab0af52a0fead450)

Thank you so much !! this is what I am looking for so long 👍

[Cristiana Man](https://hashnode.com/@cristiana)

[Apr 14, 2021](https://hashnode.com/posts/creating-a-react-component-library-with-typescript-storybook-and-rollup/60737b5a1494367be6d2b56f/comment/6075fb56ab0af52a0fead450#reply-6076baf8a3407a32d704122c)

Happy to hear!

[Edidiong Asikpo (Didi)](https://hashnode.com/@didicodes)

[Apr 12, 2021](https://hashnode.com/posts/creating-a-react-component-library-with-typescript-storybook-and-rollup/60737b5a1494367be6d2b56f/comment/607403210a2a8f18e798a0b2)

I haven't used Storybook before so, I definitely learned a lot from this article.

Amazing article, [Cristiana Man](https://hashnode.com/@cristiana). Thanks for sharing.

[Cristiana Man](https://hashnode.com/@cristiana)

[Apr 12, 2021](https://hashnode.com/posts/creating-a-react-component-library-with-typescript-storybook-and-rollup/60737b5a1494367be6d2b56f/comment/607403210a2a8f18e798a0b2#reply-60744a91adc4b91d19a979df)

Thanks for the support! I am really glad to hear you learned something from it!

[Sanvi Merin](https://hashnode.com/@sanvimerin)

[Apr 12, 2021](https://hashnode.com/posts/creating-a-react-component-library-with-typescript-storybook-and-rollup/60737b5a1494367be6d2b56f/comment/6073f30945291117111bc481)

Helpful! Planning to build a component library of popups!

[Cristiana Man](https://hashnode.com/@cristiana)

[Apr 12, 2021](https://hashnode.com/posts/creating-a-react-component-library-with-typescript-storybook-and-rollup/60737b5a1494367be6d2b56f/comment/6073f30945291117111bc481#reply-60744a15adc4b91d19a979db)

Thanks! I am so happy this article was helpful! Good luck with the popups library!