Як перенести компонент

Компоненти не встановлюються пакетом. Ви копіюєте файл у свій проєкт — і далі він ваш.

Порядок

1. Токени. Один раз на проєкт скопіюйте app/assets/css/tokens.css і підключіть його. Це чистий CSS без синтаксису Tailwind: працює однаково на v3 і v4.

2. Реєстрація токенів. На Tailwind v4 скопіюйте ще й theme.css. На v3 замість нього візьміть конфіг зі сторінки Токени — класи утиліт будуть ті самі.

3. Сам компонент. Скопіюйте .vue-файл кнопкою на його сторінці.

4. Залежності. Якщо на сторінці компонента є блок «Портування» зі списком файлів — скопіюйте і їх. Наприклад, UiSelect без uiFieldStyles.ts лишиться без стилів, а UiModal без чотирьох композаблів overlay-ядра просто не працюватиме.

Що варто змінити після копіювання

Українські рядки. У компонентах є кілька зашитих підписів: «Закрити», «Нічого не знайдено», «Завантаження…». Якщо у вас i18n — замініть їх на t(). Навмисно не винесені в props: типовий випадок не має вимагати налаштування.

Шляхи імпортів. Компоненти імпортують одне одного через ~/components/ui/… і ~/composables/…. Якщо у вашому проєкті інший аліас — поправте.

Чого не робити

Не копіюйте компонент без токенів. Він виглядатиме зламаним, бо всі кольори посилаються на змінні, яких у проєкті немає. Це найчастіша помилка.

Не правте компонент, щоб він «вписався» в чужі кольори. Якщо кнопка на вашому фоні виглядає не так — виправляйте токени, а не класи всередині компонента. Інакше наступне оновлення доведеться зливати руками.

Не тягніть overlay-ядро двічі. Якщо в проєкті вже є UiModal, то для UiDrawer чи UiConfirmDialog композабли копіювати вдруге не потрібно — вони спільні, і саме тому вкладені оверлеї працюють правильно.