惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Hugging Face - Blog
Hugging Face - Blog
Recent Announcements
Recent Announcements
V
Visual Studio Blog
博客园 - 叶小钗
H
Help Net Security
aimingoo的专栏
aimingoo的专栏
宝玉的分享
宝玉的分享
U
Unit 42
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
F
Fortinet All Blogs
V
V2EX
Stack Overflow Blog
Stack Overflow Blog
WordPress大学
WordPress大学
D
DataBreaches.Net
J
Java Code Geeks
H
Hackread – Cybersecurity News, Data Breaches, AI and More
A
About on SuperTechFans
酷 壳 – CoolShell
酷 壳 – CoolShell
量子位
C
Check Point Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
小众软件
小众软件
Microsoft Azure Blog
Microsoft Azure Blog
M
MIT News - Artificial intelligence

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Stop Copying shadcn Components Across Projects — Use This...
sharath mohan · 2026-06-28 · via DEV Community

You know the drill.

You build a beautiful set of shadcn/ui components for Project A — a Button, a Card, a Dialog with custom animations. Then Project B kicks off. You copy the files over. Then Project C. Then a subtle bug is found in the Button. Now you're patching it in three places.

This is the classic monorepo problem, and it's exactly what I set out to fix.

What I Built

turborepo-react-shadcn-starter is a production-ready monorepo template that wires up:

  • Turborepo for workspace orchestration and intelligent build caching
  • React + Vite for the fastest possible frontend dev experience
  • shadcn/ui as a shared package — write once, use everywhere
  • TypeScript across the entire workspace
  • ESLint with shared config baked in

The key insight: shadcn/ui lives in @repo/ui, a shared package, not inside any single app. Every app in your monorepo consumes the same components from the same source of truth.


The Problem with Typical Setups

Most teams drop shadcn/ui directly into a single app. That works fine until you need a second app. Then your choices are:

  1. Copy-paste the components → drift and duplication immediately
  2. Publish to npm → versioning overhead for internal code
  3. Monorepo with a shared package → ✅ This is the right answer

Turborepo makes option 3 near-effortless, but setting it up from scratch (workspace configs, TypeScript path aliases, ESLint sharing, shadcn CLI pointing at the right package) takes a few hours of trial and error. This starter eliminates all of that.


What's Inside

turborepo-react-shadcn-starter/
├── apps/
│   └── web/              # Vite + React app
├── packages/
│   ├── ui/               # @repo/ui — shared shadcn/ui components
│   ├── eslint-config/    # @repo/eslint-config
│   └── typescript-config/ # @repo/typescript-config
├── turbo.json
└── package.json

apps/web — The Main App

A clean Vite + React app already wired to consume components from @repo/ui. No boilerplate to delete, no config to untangle.

packages/ui — The Shared Component Library

This is where all your shadcn/ui components live. The package is set up so the shadcn CLI knows exactly where to drop new components:

# Add any shadcn component directly into the shared package
npx -w @repo/ui shadcn@latest add alert-dialog

Every app that imports from @repo/ui gets the component instantly. No copying. No syncing.

Shared ESLint + TypeScript Configs

Both are extracted into their own packages and extended by every app and package in the workspace. Change a lint rule once, it applies everywhere.


Getting Started in Under 2 Minutes

# Clone the template
git clone https://github.com/sharath-mohan/turborepo-react-shadcn-starter.git my-project
cd my-project

# Install everything (all workspaces in one shot)
npm install

# Start dev servers
npm run dev

Turborepo runs tasks in parallel and caches outputs intelligently — subsequent builds are dramatically faster because it only rebuilds what changed.


Adding a Second App

This is where monorepos shine. Scaffolding a new app that immediately has access to your entire shared UI library takes one command:

# Generate a new workspace app
npx turbo gen workspace --name my-dashboard

# Or copy the existing web app as a starting point
npx turbo gen workspace --name my-dashboard --copy

Your new app can immediately import from @repo/ui:

import { Button } from "@repo/ui/components/button";
import { Card, CardContent } from "@repo/ui/components/card";

No extra setup. No publishing. No path hacks.


Remote Caching (The Turborepo Superpower)

If you're working in a team or running CI, Turborepo's remote cache means builds are shared across machines. Your CI pipeline can skip rebuilding packages that haven't changed since the last run.

npx turbo login
npx turbo link

That's it. Now every engineer on the team — and your CI — shares a single build cache.


Why This Stack Makes Sense

Concern Solution
Fast local DX Vite HMR — updates in milliseconds
Shared UI components @repo/ui — single source of truth
Type safety TypeScript across all apps + packages
Code quality Shared ESLint config
Build performance Turborepo task graph + caching
Scalability Add apps without touching existing code

Who This Is For

  • Teams building multiple frontend apps that share design system components
  • Developers tired of duplicating UI code across projects
  • Anyone who wants to adopt a monorepo architecture without the setup cost
  • Frontend leads looking for a clean starting point for a new platform

What's Next

I'm planning to add:

  • [ ] Storybook integration for the shared UI package
  • [ ] Playwright e2e testing setup
  • [ ] Docker + CI/CD workflow examples
  • [ ] Additional shadcn/ui components pre-included

If any of these would be useful to you — or if you have other ideas — open an issue or drop a comment below.


Give It a Try

The template is open source and ready to use:

👉 github.com/sharath-mohan/turborepo-react-shadcn-starter

If it saves you setup time, a ⭐ on GitHub goes a long way — it helps more developers discover it.

Contributions, feedback, and PRs are all welcome. Let's make the scaffolding part of monorepos a solved problem.


Built with Turborepo, React, Vite, shadcn/ui, and TypeScript.