Newsletter
Join the Community
Subscribe to our newsletter for the latest news and updates
Community-maintained Turborepo example that scaffolds a React component library, a Storybook docs site, and Changesets-driven npm publishing in one monorepo.
A minimal Next.js full-stack React template pre-wired to Neon Postgres, Drizzle ORM, Tailwind CSS, shadcn/ui, and better-auth.
A Turborepo monorepo starter pairing an Expo React Native app with a Next.js web app that share one React Native component library.
Run a Model Context Protocol server on Vercel using Next.js, the Vercel mcp-handler, and Descope's Node SDK for bearer-token session validation.
Vercel example wiring OpenFeature providers into the Flags SDK, with two 50/50 banner flags and Flags Explorer overrides.
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.
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.
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.pnpm build runs every package's build script in parallel, hashing and caching outputs so repeat builds are faster.tsup src/*.tsx --format esm,cjs --dts --external react, emitting button.js, button.mjs, button.d.ts, and button.d.mts into ui/dist.exports field with separate types, import, and require entries, so consumers pick ESM or CommonJS.stories/ folder, resolves aliases such as @acme/ui, supports MDX docs pages, and runs with hot reload at localhost:6006 via pnpm dev.pnpm changeset walks through package selection, major bumps, and a change summary, then writes a Markdown changeset file.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.pnpm clean to wipe node_modules and dist folders.acme scope for their own organization by renaming folders under packages/* and running a search-and-replace..tsx file in ui/src, register its specifier in package.json, and get compiled ESM, CJS, and type definitions on the next build.Meta, Story, Preview, and Props blocks, then generate a static Storybook site and serve it with pnpm preview-storybook.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.
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.
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.
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.
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.
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.
