Как вынести компоненты чтобы использовать их в другом проекте?

Чтобы компоненты жили в нескольких проектах, их выносят в отдельную библиотеку — вопрос в упаковке, сборке и дистрибуции.

Шаг 1: подготовить компоненты к выносу

• Убрать привязки к проекту: никаких импортов из его сторов, роутера, конфигов — всё внешнее приходит через props (данные, колбэки) или контекст-провайдеры библиотеки.
• Изолировать стили (CSS Modules, vanilla-extract, tailwind-пресет) и токены темы.
• Определить публичный API: один entry point (index.ts) с явными экспортами.

Шаг 2: оформить пакет

{
  "name": "@company/ui",
  "exports": { ".": { "import": "./dist/index.js", "types": "./dist/index.d.ts" } },
  "peerDependencies": { "react": ">=18" },
  "sideEffects": false
}

• Сборка в library mode (Vite lib mode / tsup): ESM (+CJS при необходимости), без бандлинга React — он в peerDependencies, иначе у потребителя окажется два React (ломаются хуки).
• Генерация типов (d.ts), tree-shaking-дружелюбность.
• Документация — Storybook; тесты — Vitest + Testing Library.

Шаг 3: способ дистрибуции

• Монорепо (pnpm workspaces + Turborepo/Nx) — если проекты в одном репозитории: мгновенные изменения без публикации. Лучший DX.
• npm-пакет в приватном registry (GitHub Packages, Verdaccio) — для независимых репозиториев: версионирование (semver + changesets), CI-публикация.
• Быстрый вариант — установка из git по тегу; осознанное копирование исходников — путь shadcn/ui (кастомизация важнее синхронизации).

Коротко для собеседования

Вынести в пакет: очистить компоненты от проектных зависимостей (всё через props/провайдеры), собрать в lib mode с типами и react в peerDependencies (иначе два React), документировать Storybook'ом; распространять через монорепо-workspace (если репо общее) или приватный npm с semver-версионированием.