Component Library Library

Component Library Library is a GitHub tutorial repository that presents seven progressive setups for building shareable React component libraries, each with a library and a consuming Next.js app, using TypeScript, ES Modules, and tsup.

What is Component Library Library?

Component Library Library (CLL) is a pnpm-workspace monorepo where each of its seven levels demonstrates a different approach to sharing React components across repositories. The lowest level uses React's createElement with no build step, while later levels add TypeScript, ESLint, tsup, GitHub Actions, vanilla CSS, Tailwind CSS, Material UI theming, and SVG-to-React icon generation. Every library is built as an ES Module, is not minified, does not bundle its dependencies, and targets ESNext so the consuming application's bundler handles polyfills and minification.

Key Features

• Seven progressive levels — Each level builds on the previous one, starting from a bare createElement library (bare) and advancing through bare-ts, bare-ts-tooling, css, tailwind, mui, and icons.
• TypeScript and JSX — Levels 2 through 7 use tsconfig.json with jsx: react-jsx, moduleResolution: nodenext, and declaration file output via tsup.
• tsup builds — The default build tool is tsup (which uses esbuild), configured with dts: true, sourcemap: true, minify: false, and format: 'esm', reducing a sample compile from 2.4s to 1.4s.
• ESLint and Prettier — Level 3 adds eslint-config-standard-with-typescript, eslint-plugin-react, and Prettier integration, with react/prop-types disabled in favor of TypeScript types.
• GitHub Actions CI — A workflow runs pnpm install, pnpm lint, and pnpm build on every push using Node 18 and pnpm 8.1.0.
• CSS and Tailwind support — Level 4 adds global and per-component stylesheet imports; Level 5 configures Tailwind with @apply, exposes a tailwindConfig preset, and disables Tailwind's preflight to avoid resets.
• Material UI theming — Level 6 sets MUI as a peer dependency and exports a custom createTheme theme for downstream apps.
• Icon library generation — Level 7 uses SVGR's CLI to convert SVG files into tree-shakable TypeScript React components with forwardRef, bundled by tsup.

Who is it for?

• React library authors — Developers who want a concrete baseline for packaging reusable components without bundling dependencies.
• Frontend platform teams — Teams managing multiple applications that need shared UI components can follow the Tailwind preset and MUI theme patterns.
• Open-source maintainers — Contributors looking for a minimal CI plus build setup for a TypeScript React library, including ESLint and GitHub Actions.
• Learn-by-example developers — Anyone who wants to understand the difference between dependencies, devDependencies, and peerDependencies in a library context.

What can you do with Component Library Library?

• Set up a shareable component library — Copy the bare-ts-tooling level as a starting point and run pnpm build to get dist/index.js and dist/index.d.ts for publishing.
• Publish a Tailwind-themed library — Use the tailwind level to expose tailwindConfig as an import so consuming Next.js apps match the library's theme.
• Create an icon library from SVGs — Follow the icons level: drop SVGs into src/icons, run pnpm build, and receive generated TSX components bundled as an ES module.
• Share a Material UI theme — Use the mui level to export a theme created with createTheme, then extend it in applications using createTheme(theme, overrides).

FAQ

Does Component Library Library use a specific package manager?

Yes, the repository uses pnpm with a workspace setup, but the author notes that everything works with npm or yarn. You can clone the repo, run pnpm install at the root, then pnpm build inside a library and pnpm dev in its Next.js app.

Are the libraries minified or bundled?

No. The libraries are not minified and do not bundle their dependencies. The consuming application's build step is responsible for minification, dependency resolution, and polyfilling, which is why the libraries compile to ESNext.

What styling options are demonstrated?

Level 4 uses vanilla CSS imported from styles.css. Level 5 shows Tailwind CSS with inline classes, @apply in component stylesheets, and a split Tailwind config. Level 6 uses Material UI theming. All CSS setups produce a dist/index.css that consumers import via an exports field.

How do I run the examples locally?

Clone the repository, run pnpm install at the root, run pnpm build in the library directory of your choice, and run pnpm dev in its consuming application. The repo's GitHub Actions workflow runs the same lint and build steps on every push.

Does the repo include a watch mode for development?

Level 3 includes a dev script that runs tsup --watch, which rebuilds the library automatically on file changes, and the same pattern can be applied to the other levels.