DEV Community: sharath mohan

Stop Copying shadcn Components Across Projects — Use This Turborepo Starter Instead

sharath mohan — Sun, 28 Jun 2026 09:45:02 +0000

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:

Copy-paste the components → drift and duplication immediately
Publish to npm → versioning overhead for internal code
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.

Why CSS Still Rocks in 2024

sharath mohan — Tue, 10 Dec 2024 18:28:24 +0000

Love it or hate it, CSS continues to prove its worth. The past year has been a rollercoaster in the world of software engineering, with AI seemingly poised to take over our jobs. Yet, despite the rise of automation, CSS remains an essential skill that evolves alongside technology.

Remember when we used to joke about AI being "too dumb to center a div"? Well, times have changed—and so has CSS. Let’s explore some exciting new features that make CSS more powerful than ever.

1. Align Content: Centering Made Easy

Gone are the days when you had to rely on Flexbox or Grid to center a div. With the align-content property, CSS now offers a simpler and more direct way to handle alignment.

📖 Learn more about align-content

2. @property: Dynamic Custom Properties

CSS variables introduced us to reusable variable names, but the @property feature takes this a step further. It allows developers to define custom properties with explicit rules, making animations and theming more predictable and flexible.

📖 Learn more about @property

3. @starting-style: Simplifying Transitions

Transitioning from display: block to display: none while maintaining animations used to be a headache. Enter @starting-style—a new feature that makes it easier to define styles at the start of a transition.

📖 Learn more about @starting-style

4. Light-Dark Function: Native Theme Switching

Many developers use JavaScript to manage light and dark modes, but CSS now offers a built-in light-dark function. This simplifies theme management, reducing reliance on external scripts.

📖 Learn more about light-dark

Honoring Rebecca Purple: A Tribute to CSS History

One of the most exciting updates this year isn’t a feature—it’s a tribute. The CSS logo has adopted the color Rebecca Purple (#663399) to honor Rebecca Alison Meyer, daughter of CSS pioneer Eric Meyer. This thoughtful change celebrates the human stories behind the technology we use every day.

CSS continues to evolve, introducing features that make our lives easier while honoring its rich history. Whether you're a fan or a skeptic, one thing is clear: CSS still rocks!

Setup Prettier with Vite & VS Code

sharath mohan — Tue, 01 Nov 2022 06:11:30 +0000

Lets face it code formatting is real pain, specially when working on shared projects. Fortunately we have got prettier to solve this problem. This is article is a short guide for setting up prettier in Visual Studio Code, But IDE would do.

What's Prettier?

Prettier is an opinionated code formatter, for many languages,like Javacript, CSS, JSX.. (mostly all client side tools) and also can be extended to other languages with community plugins

Time to setup

I will scaffold a quick react typescript project using vite.

npm create vite@latest

Install prettier

Install prettier as a dev dependency, this helps us to configure prettier on a per page project

npm install --save-dev --save-exact prettier

Create file name .prettierrc.json

This will act as the configuration file for prettier. It can be configured using json, YAML or javascript I will be using json

{

    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "arrowParens": "avoid"
}

This would format the code by using a tab space of 2, adding semi colons at the end of all line endings, using single quotes instead of double, and omits parathesis in arrow functions whenever possible

More rules can be found Rules

now you can run prettier using

npx prettier --write .

Great!, but can still do better, instead of manually running the configuration we can setup our IDE/Text Editor to help us out.

I am giving the guide for VS Code

Install the prettier extension

VS code extension

Open Settings

You can quickly configure the settings by using settings.json file

Press CMD+OPTION+P or CTRL+ALT+P and type in open settings json

{

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,

}

This will use the formatting option as prettier and follow the configuration set in the configuration file created earlier and also apply formatting when you save or paste a code.

Bam !!

But what if you need to ignore certain files from formatting say the package-lock.json or the dist/build files. That where .prettierignore comes into play

Create a file called .prettierignore. This works similar to .gitignore and you can follow the same setup

Hope you guys loved it. This is the first part of setting up a good DX using Vite and React. eventually reaching https://github.com/sharath-mohan/react-dx-template this template.

If you liked this article, a star on the github repo would be awesome

File Upload in React

sharath mohan — Thu, 11 Aug 2022 15:56:43 +0000

Working with file upload is one of those things you somehow wind up doing. Here is a small article on doing the same in React
First of all, we need to understand on how refs work in React. Ref's act as pointers on DOM elements, like how you would be selecting an element using say

and the useContext Hook to manage those ref's

In this example, I have created a ref called inputRef that is connected to the input element, each element connected to the ref can a current property on which you can use all the properties supported by that element, in this case value

lets add the FileType, FormData and fetch API

Chrome Extensions to make your life with css easy

sharath mohan — Mon, 04 Jul 2022 10:41:39 +0000

Working with CSS can be a brain-drainer, and it is not a hidden fact. Here are few chrome extensions that can make life easy when working and debugging css

1. Whatfont
Ever wondered what is that awesome font that you find on a site that you just visited, whatfont can help you find it in a giffy

2. Visbug
Visbug is what I could call the swiss amry knife of a web developer, it providers easy inspection, modification of a web page

3. CSS peeper
CSS peeper helps you to look into the web pages assets and styles without ever opening up your inspector

4. Emmet re:view
Emmet Re:view,is the easiest way to check the responsiveness of a website

Happy Coding!!

Make your Git Commit Messages better

sharath mohan — Tue, 28 Jun 2022 06:21:04 +0000

Have you wondered how the make awesome commit messages in open source projects?. Here’s how you can also make your git commit messages better
I am huge fan of Angular and digging through the contribution guidelines of the project I found a specific pattern, and after a brief search I came across this guideline called conventional commits, they say

A specification for adding human and machine readable meaning to commit messages

so whats special here?

The idea is to organize your commit messages, by using a standard specification, and your commit message would look somewhat like this

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

The commit contains the following structural elements, to communicate intent to the consumers of your library:

fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in Semantic Versioning).
feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in Semantic Versioning).
BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in Semantic Versioning). A BREAKING CHANGE can be part of commits of any type.
types other than fix: and feat: are allowed, for example @commitlint/config-conventional (based on the the Angular convention) recommends build:, chore:, ci:, docs:, style:, refactor:, perf:, test:, and others.
footers other than BREAKING CHANGE: may be provided and follow a convention similar to git trailer format.
Additional types are not mandated by the Conventional Commits specification, and have no implicit effect in Semantic Versioning (unless they include a BREAKING CHANGE). A scope may be provided to a commit’s type, to provide additional contextual information and is contained within parenthesis, e.g., feat(parser): add ability to parse arrays.

Now why should I use this? …

Automatically generating CHANGELOGs.
Automatically determining a semantic version bump (based on the types of commits landed).
Communicating the nature of changes to teammates, the public, and other stakeholders.
Triggering build and publish processes.
Making it easier for people to contribute to your projects, by allowing them to explore a more structured commit history.

It sure has made my life easy while merging code, and boarding new people to the team.

Happy Coding!!

Nginx configuration for Angular2+ Deployment

sharath mohan — Wed, 06 May 2020 11:08:57 +0000

Quick note

Nginx is a high performance web server with some additional capabilities such as load-balancing and reverse-proxy.
Angular is one of the most popular framework for building single page applications.
Angular apps can be connected to a Node js server and deployed but in most cases deployment with a simple web server would be suffice.

Angular can use either of the two routing strategies:

Hash Routing
Path Routing (default for Angular)

Path Routing utilizes the new HTML 5 push state API for routing. Therefore we need a web server capable of working with the HTML 5 push state API.Well most web servers don’t work this way out of the box. In these cases the hash routing strategy can be used, but tends to make the URL look messy. Nginx can be configured to deploy any Angular App with HTML 5 push state API.
Build your Angular app by using the command

ng build --prod

Create a new folder under /var/www , usually the domain name of your app, let us assume to be example.com

sudo mkdir /var/www/example.com

copy the contents /dist/appname to /var/www/example.com

Nginx utilizes server blocks to host multiple domains on an single server, you to need to make certain changes to the configuration file

sudo nano /etc/nginx/sites-enabled/default

Add the configuration

server{
    listen 80;
    listen [::] 80;
    server_name www.example.com example.com;
    root /var/www/example.com;
    index index.html;
    location / {
        try_files $uri$args $uri$args/ /index.html;
    }
}

The configurations are:

Nginx listens on port 80
server name is the domain name with www and without it
root points to location of the app
index points to initial page to be loaded
location refers path that should be pointed to on the url patterns, all routes will point to index.html, if this is not added, on refreshing the page Nginx throws a 404 error.
Note: Use wildcard route pattern in angular to catch 404 errors

const routes: Routes = [
{path:"**",component: PagenotfoundComponent}
];

Restart Nginx

sudo service nginx restart

Happy coding !!