A Turborepo starter template with Next.js, Nextra, and a shared pre-configured shadcn/ui package, powered by Bun, Vitest, Playwright, Storybook and Biome 🚀
Note
This repo uses bun as the package manager. 🐰
Clone the repository:
git clone https://github.com/gmickel/turborepo-shadcn-nextjs.gitInstall dependencies:
cd turborepo-shadcn-nextjs
bun installUse the pre-made script:
bun ui:add:component <component-name>This works just like the add command in the
shadcn/uiCLI. 🎨
This Turborepo includes the following:
@repo/docs: a placeholder documentation site powered by Nextra 3 alpha 📖@repo/web: the main Next.js web application 🌐@repo/ui: core React components and design system shared by bothwebanddocsapplications (🎨 powered by shadcn/ui)@repo/utils: shared React utilities 🛠️@repo/tsconfig: sharedtsconfig.jsons used throughout the monorepo 🛡️
Each package and app is 100% TypeScript. 💪
This Turborepo has some additional tools already set up for you:
- TypeScript for static type checking ✅
- Biome for code linting, formatting, and fixing 🌿
- Vitest for unit tests 🧪
- Playwright for end-to-end tests 🧪
- Changesets for managing versioning, changelogs, and publishing 📝
- Storybook for component development and documentation 📚
This Turborepo includes Storybook for component development and documentation. Storybook is set up for both the @repo/web and @repo/ui packages, allowing the development and showcasing of components from both your main application and your shared UI library.
To run Storybook:
bun storybookThis will start Storybook and open it in your default browser.
Storybook is configured to find stories in the following locations:
apps/storybook/src/**/*.mdxapps/storybook/src/**/*.stories.@(js|jsx|mjs|ts|tsx)apps/web/src/**/*.stories.@(js|jsx|mjs|ts|tsx)packages/ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)
This configuration allows you to write stories for components in both your web application and your shared UI library.
This setup includes several useful Storybook addons:
@storybook/addon-links: For linking between stories@storybook/addon-essentials: A curated set of addons for a great developer experience@storybook/addon-onboarding: For onboarding new users@storybook/addon-interactions: For testing component interactions@storybook/addon-themes: For theme switching in Storybook@storybook/addon-styling-webpack: For handling CSS and PostCSS in Storybook
bun build- Build all apps and packagesbun dev- Develop all apps and packagesbun dev:ui- Develop all apps and packages and display the output in Turbo's new experimental UIbun test- Run all tests with vitestbun test:cov- Run all unit tests with vitest and generate a coverage reportbun test:cov:ui- Run all unit tests with vitest and display the vitest UIbun test:e2e- Run all end-to-end tests with playwrightbun lint- Lint and format all packagesbun lint:fix- Lint, format, and fix all packagesbun changeset- Generate a changeset 🧑🔧 - WIPbun clean- Clean up allnode_modulesanddistfolders (runs each package's clean script)bun ui:add:component- Add a shadcn/ui component to the@repo/uipackagebun storybook- Run Storybook for component development and documentation
Turborepo offers a simple command to add new apps or packages to the monorepo. To add a new app, run the following command:
bun turbo gen workspace [--name <app-name>]You will be prompted to choose the name and workspace type (app or package) to use.
You can copy an existing app or package with:
bun turbo gen workspace [--name <app-name>] --copyYou will be prompted to choose the name and workspace type (app or package) of the new app and which app or package to copy.
Note
Remember to run bun install after copying an app.
This Turborepo uses GitHub Actions for CI. 🤖
It comes preconfigured with the following workflow that runs on every push or pull request to the main branch:
- Setup: Checks out the code and sets up Bun.
- Install: Installs all dependencies using Bun.
- Build: Builds all apps and packages in the monorepo.
- Unit Tests: Runs all unit tests using Vitest.
- E2E Tests: Installs Playwright browsers and runs end-to-end tests using Playwright.
- Lint: Performs linting and formatting checks using Biome.
This template includes some useful automation tools:
Keeps dependencies up-to-date automatically with daily checks and update rules.
Can automatically merges patch updates from Dependabot to reduce manual work.
For the auto-merge workflow:
- Go to your repository's Settings > Actions > General.
- Under "Workflow permissions", select "Read and write permissions".
- Check "Allow GitHub Actions to create and approve pull requests".
- Save the changes.
- Optionally, create a Personal Access Token (PAT) with
reposcope and add it as a repository secret namedGITHUB_TOKENfor enhanced security.
Maintains an up-to-date list of contributors in your README.
- Dependabot is active out-of-the-box. Review and adjust the config as needed.
- Ensure proper permissions for the auto-merge workflow.
- To read more about the contributors list, see the contributors-readme-action README.
🧑🔧 WIP
For more information, refer to the official Changesets documentation.
Gordon Mickel |
