Design System Template

Streamlined Monorepo Starter: Turborepo, TailwindCSS, Storybook & shadcn-ui

This Turborepo template provides a robust foundation for developing modern web applications and design systems. It includes pre-configured Next.js apps (docs, web), a Storybook instance (workshop), and a shared React component library (ui) powered by Tailwind CSS and shadcn-ui. All packages are written in TypeScript, promoting type safety and maintainability across the monorepo, with shared ESLint and Tailwind configurations for consistency.

Features:

• Turborepo-Powered Monorepo: Utilizes Turborepo for efficient build caching and task orchestration.
• Next.js 'docs' App: A pre-configured Next.js application for documentation, styled with Tailwind CSS.
• Next.js 'web' App: An additional Next.js application, also styled with Tailwind CSS.
• Shared UI Component Library: A React library ('ui') with Tailwind CSS and integrated shadcn-ui components, usable across applications.
• Storybook Integration: 'workshop' app for UI component visualization using the shared 'ui' package.
• Full TypeScript Support: All packages and applications are developed using TypeScript for type safety.
• Centralized ESLint Configuration: Custom ESLint setup ('eslint-config-custom') including 'eslint-config-next' and 'eslint-config-prettier' for consistent code linting.
• Reusable Tailwind Configuration: A shared 'tailwind-config' package for consistent styling across the monorepo.
• Shared TypeScript Configurations: Centralized 'tsconfig.json' files ('tsconfig' package) for uniform TypeScript settings.
• Prettier for Code Formatting: Ensures a consistent code style automatically.
• Optimized UI Package Build: The 'ui' package is built to 'dist/' for efficient sharing of transpiled source and compiled styles.

Summary:

This template offers a comprehensive monorepo setup using Turborepo, integrating Next.js applications with Tailwind CSS, a shared UI component library featuring shadcn-ui, and Storybook for component development. It's fully typed with TypeScript and includes pre-configured linting and formatting tools, accelerating the development of scalable and consistent web projects and design systems.