DopamineDriven / turborepo-design-starter

Starter template with Turborepo, Next13, Shadcn-ui, Tailwindcss, Storybook, Eslint, Prettier, Stylelint

Turborepo + NextJS + Shadcn + Storybook starter

This is a starter template for Turborepo with Next.js, Shadcn/ui and Storybook already setup.

Note This example uses pnpm as package manager.

It is very minimal and includes only the essentials needed to get started. I've created this template to help me get started with my projects faster.

If you wish for a version without Storybook, please check out turborepo-shadcn-ui by dan5py.

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

• docs: a Next.js app
• web: another Next.js app
• ui: a ui library using shadcn-ui
• eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• tsconfig: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Utilities

This Turborepo has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Install

To get started, go to the root and run the following command:

pnpm install

Build

To build all apps and packages, run the following command:

cd my-turborepo
pnpm build

Develop

To develop all apps and packages, run the following command:

cd my-turborepo
pnpm dev

I've also included various scripts to help you develop your apps and packages:

• dev:docs: develop the docs app
• dev:web: develop the web app
• dev:both: develop both the docs and web apps
• dev:ui: develop the ui package with Storybook
• ui:add: add a new component to the ui package using the shadcn-ui CLI.

There's probably a better way to do this, but I haven't figured it out yet. If you know how to do this, please let me know.

Remote Caching

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

cd my-turborepo
npx turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:

npx turbo link

Special Thanks

Special thanks to shacn/ui for creating this amazing UI library.

Contribute

If you have any suggestions or improvements, please feel free to open an issue or a pull request.