Вступ

У кількох продуктових кодових базах незалежно написано по кілька версій тих самих компонентів: Button, Modal, Drawer, Menu, Table, Select, Toast, $confirm. Жодна з них не використовує готову UI-бібліотеку — усе зроблено руками на Tailwind.

Патерни збіглися самі собою: тости всюди тримають стан у module-scope singleton, $confirm всюди повертає Promise<boolean>, оверлеї всюди рахують z-index стеком, таблиці всюди зберігають налаштування колонок у localStorage. Але якість реалізацій різна, а документація роз'їхалася з кодом — подекуди довідники описують props, яких у компонентах уже немає.

Ця бібліотека збирає найкращу версію кожного компонента в одному місці.

Як цим користуватися

Компоненти не встановлюються пакетом. Ви відкриваєте сторінку компонента, натискаєте «Копіювати» і вставляєте файл у свій проєкт — так само, як у shadcn/ui. Код стає вашим, і ви вільні його змінювати.

Єдина вимога — щоб у проєкті були оголошені ті самі токени. Для цього достатньо скопіювати один файл, tokens.css; він написаний чистим CSS і працює однаково на Tailwind v3 і v4.

<script setup lang="ts">
import UiButton from '~/components/ui/UiButton.vue'

const saving = ref(false)

async function save() {
  saving.value = true
  try {
    await $fetch('/api/save', { method: 'POST' })
  } finally {
    saving.value = false
  }
}
</script>

<template>
  <UiButton variant="solid" :loading="saving" @click="save">
    Зберегти
  </UiButton>
</template>

Чому не пакет

Пакет доводиться версіонувати, а компоненти інтерфейсу майже завжди потребують дрібних правок під конкретний екран. Форк через npm-пакет болючий; форк через копіювання — це просто редагування файлу.

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