Подключение

1. ЗависимостьCopy Anchor Link

{
  "dependencies": {
    "@lead-score/ui": "workspace:*"
  }
}

2. Next.jsCopy Anchor Link

Пакет отдаёт исходники (без сборки), поэтому Next должен их транспилировать:

const nextConfig = {
  transpilePackages: ['@lead-score/ui']
};

3. СтилиCopy Anchor Link

Токены, тема и типографика подключаются одной строкой после Tailwind:

@import 'tailwindcss';
@import 'tw-animate-css';
@import '@lead-score/ui/styles.css';

styles.css сам говорит Tailwind сканировать исходники пакета — классы компонентов попадут в сборку.

4. Шрифт и темаCopy Anchor Link

Токены ждут переменную --font-inter и класс dark на <html> для тёмной темы:

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin', 'cyrillic'], variable: '--font-inter' });

export default function RootLayout({ children }) {
  return (
    <html lang="ru" className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

Правила пакетаCopy Anchor Link

• Импорт — по подпутям: @lead-score/ui/base/button, без общего index.
• В пакете только отображение: никаких next/*, tRPC, запросов к API. Данные и колбэки приходят через пропсы, навигация — через asChild или слоты (ReactNode-пропсы). Это проверяет ESLint.
• Иконки — только remixicon-react и @lead-score/ui/icons.
• Цвета — только токены (bg-bg-surface, text-fg-secondary…), без hex и без dark:.
• Новый компонент автоматически попадает в живые примеры — достаточно положить файл в shared/ui/src/<раздел>/.