Turborepo Design System Starter

Turborepo Design System Starter is a community-maintained monorepo boilerplate, installed with npx create-turbo@latest -e design-system, that scaffolds a React component library, a Storybook documentation app, and automated npm publishing into a single pnpm workspace.

What is Turborepo Design System Starter?

It is a starter example from the Turborepo project that generates a working design-system monorepo: a packages/ui React component library written in TypeScript, an apps/docs Storybook site that documents those components, and shared configuration packages. Turborepo itself is the Rust-written build system that orchestrates lint, build, test, and release tasks across the workspace. The example is community-maintained, so problems are handled through pull requests and GitHub Issues are closed.

What does the starter include?

The workspace ships four packages out of the box, all 100% TypeScript, with dependencies hoisted to the root package.json via pnpm workspaces.

• apps/docs — Storybook component documentation site, run with Vite and written in MDX.
• packages/ui — core React components such as a Button with typed props.
• packages/typescript-config — shared tsconfig.json files used across the repo.
• packages/eslint-config — a reusable ESLint preset.

What are the key features?

• Turborepo task pipeline — pnpm build runs every package's build script in parallel, hashing and caching outputs so repeat builds are faster.
• tsup + esbuild compilation — the UI package builds with tsup src/*.tsx --format esm,cjs --dts --external react, emitting button.js, button.mjs, button.d.ts, and button.d.mts into ui/dist.
• Per-component export maps — each component is registered in the package's exports field with separate types, import, and require entries, so consumers pick ESM or CommonJS.
• Storybook on Vite — the docs app auto-discovers stories in the stories/ folder, resolves aliases such as @acme/ui, supports MDX docs pages, and runs with hot reload at localhost:6006 via pnpm dev.
• Changesets versioning — pnpm changeset walks through package selection, major bumps, and a change summary, then writes a Markdown changeset file.
• Automated releases — a GitHub Action runs turbo run build --filter=docs^... && changeset publish, publishing all non-docs packages to npm on push; it requires NPM_TOKEN and GITHUB_TOKEN secrets, and the Changesets bot is recommended.
• Preconfigured tooling — TypeScript for static types, ESLint for linting, Prettier for formatting, and pnpm clean to wipe node_modules and dist folders.

Who should use this starter?

• Design system maintainers: publish a versioned React component library with changelogs instead of hand-rolling release scripts.
• Front-end platform teams: centralize ESLint and TypeScript configs so every app and package in the monorepo lints and type-checks identically.
• React developers publishing to npm: swap the default acme scope for their own organization by renaming folders under packages/* and running a search-and-replace.

What can you do with Turborepo Design System Starter?

• Component authors: add a new .tsx file in ui/src, register its specifier in package.json, and get compiled ESM, CJS, and type definitions on the next build.
• Documentation writers: build MDX story pages with Meta, Story, Preview, and Props blocks, then generate a static Storybook site and serve it with pnpm preview-storybook.
• Release managers: generate a changeset locally, push to GitHub, and let the Action build publishable packages and publish them to npm in one run.

How does the starter work?

Run the create command, install dependencies with pnpm, then pnpm dev starts all packages locally with Storybook as the preview surface. Adding a component means creating the file, adding an export entry, and documenting it with a story. Publishing flows from pnpm changeset through a GitHub push to the Changesets publish Action.

FAQ

Is Turborepo Design System Starter free?

Yes. It is a community-maintained example distributed publicly by the Turborepo project and installed with the create-turbo CLI, so there is no licence fee or paid tier to use the starter itself.

Does it publish my components to npm automatically?

Yes, if you configure the release workflow. The included GitHub Action runs turbo run build --filter=docs^... && changeset publish, but it needs NPM_TOKEN and GITHUB_TOKEN added to your repository settings before publishing works.

What npm scope does it use by default?

Packages are published under the acme organization scope. To change it, rename the folders under packages/*, search and replace acme with your own scope, and re-run pnpm install. Publishing to a private scope also means removing the public access setting from each package.json.

What compiles the component code?

tsup, which is powered by esbuild, compiles the raw TypeScript and React components into plain JavaScript. It outputs both ES Module and CommonJS formats plus TypeScript declaration files, so the UI package works across bundlers and browsers.

Where does Storybook run during development?

Running pnpm dev starts Storybook in dev mode with hot reloading at localhost:6006. pnpm build instead produces the static Storybook HTML, and pnpm preview-storybook serves that generated output locally.

Alternatives

• Nx: another monorepo toolchain that also targets shared component libraries, though it centers on its own plugin and generator ecosystem.
• Lerna: focuses on versioning and publishing packages rather than orchestrating build tasks.