Как я делаю reusable UI компоненты

Коротко. Props, variants и не переусложнять API.

Суть

Переиспользуемый UI — это не «одна кнопка на весь интернет», а набор вариантов с предсказуемым API: variant, size, disabled, asChild.

Ниже — практика без лишней теории: что делаю в реальных проектах (лендинги, визитки, MVP).

Принцип

Компонент принимает минимум пропсов, остальное — через className и слоты. Не прокидываю 20 boolean-флагов.

Tailwind + cva

class-variance-authority держит варианты в одном месте — меньше дублирования строк классов.

Документация

На pet-проектах хватает Storybook или одной demo-страницы /ui внутри приложения.

import { cva, type VariantProps } from 'class-variance-authority'

const button = cva('inline-flex items-center rounded-lg font-medium transition', {
  variants: {
    variant: { primary: 'bg-violet-600 text-white', ghost: 'bg-transparent border' },
    size: { sm: 'h-9 px-3 text-sm', md: 'h-11 px-5' },
  },
  defaultVariants: { variant: 'primary', size: 'md' },
})

export function Button({ variant, size, className, ...props }: VariantProps<typeof button> & React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return <button className={button({ variant, size, className })} {...props} />
}

<Button variant="ghost" size="sm">Подробнее</Button>
<Button variant="primary">Оставить заявку</Button>

cn('px-4', className)  // утилита clsx + tailwind-merge

Как применять на проекте

• Зафиксируйте минимальный стек в README и не добавляйте библиотеки «на будущее».
• Договоритесь о структуре папок до второй недели — позже рефактор дороже.
• Каждый PR: линтер, типы, preview-ссылка для заказчика.
• Для MVP — один layout, переиспользуемые компоненты, без преждевременного микрофронта.

Если задача — лендинг на 5 блоков, React иногда избыточен; честно проверьте, нужен ли он сейчас.

Типичные ошибки

Перегруз эффектами и библиотеками «на всякий случай»; отсутствие проверки на слабом интернете и старых телефонах; копирование чужого дизайна без адаптации под свою аудиторию; отсутствие явного CTA; ожидание, что «сайт сам продаст» без трафика и оффера.

Для коммерческих проектов отдельно болит размытое ТЗ и бесконечные правки без доплаты — лечится этапами и лимитом итераций.

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

Если нужен не шаблон, а связка дизайна, скорости, интеграций и сопровождения — проще обсудить задачу один раз, чем чинить конструктор полгода. Я беру лендинги, визитки и MVP под ключ; ориентиры по срокам и бюджету — на странице цен.

Читать дальше

• Core Web Vitals — метрики скорости
• Vite вместо CRA — стек сборки
• Услуги — разработка под задачу

Короткие ответы на частые вопросы

Это подойдёт моему бизнесу? Если вам нужен понятный сайт с заявкой или звонком — да; если десятки кабинетов и сложная логика — обсудим отдельный объём.

Что подготовить до старта? Тексты или тезисы, логотип, примеры конкурентов, доступы к домену и хостингу (если уже есть).

Как оценить результат? Скорость на мобилке, ясный CTA, отсутствие «битых» блоков и совпадение страницы с рекламой/поисковым запросом.

Итог по теме «Как я делаю reusable UI компоненты»

Сфокусируйтесь на сценарии пользователя, а не на количестве фич. Остальное — вопрос исполнения и дисциплины в проекте. Готов помочь с оценкой — контакты или Telegram из кнопки ниже.