Replace import * as React from "react" with named imports for better tree-shaking

[kouzoukian]

Most components in the ShadCN UI library use:

import * as React from "react";

While this guarantees compatibility with the JSX runtime and some SSR setups, itrevents optimal tree-shaking. This pattern can unnecessarily bloat the final bundle inpplications that only use a subset of React APIs.

Why it matters

• * as React pulls the full React namespace into scope, even if only useEffect or useId` is used.
• Tree-shaking is less effective since bundlers (like Webpack or even esbuild in some ases) cannot remove unused parts from the React object.
• In modern setups (Next.js 13+, Vite, etc.) with "jsx": "react-jsx" enabled, here's no need to import React at all just to use JSX.

Proposed change

Replace:

import * as React from "react";

With:

import { useEffect, useId } from "react";

And remove the React. prefix where appropriate. This aligns with modern best ractices and improves performance without sacrificing compatibility.

Potential caveats

• Should be validated against environments that still rely on the old JSX runtime.
• May require a codemod to safely migrate all components.