Компоненты

Определение: Компоненты — это повторяемые «строительные блоки» интерфейса, из которых собираются страницы сайта: кнопки, поля, карточки, шапка, меню, блоки товаров, формы, модальные окна. У компонента есть внешний вид, поведение и правила, когда и как его использовать.

Зачем это нужно

• Собирать страницы быстрее: один раз сделали компонент — дальше просто переиспользуем.
• Сохранять единый стиль и логику: одинаковые кнопки, одинаковые карточки, одинаковые формы.
• Упрощать поддержку: правка в компоненте обновляет все места, где он используется.
• Снижать количество ошибок: меньше «ручной» верстки и случайных отличий в отступах и размерах.
• Удобно масштабировать сайт: новые разделы и страницы собираются из уже готовых блоков.
• Упростить работу команды: дизайнер, разработчик и контент-менеджер понимают, из каких деталей собирается сайт.

Пример

Пример кода:

<Button variant="primary">Оставить заявку</Button>

Скриншот

Подпись к скриншоту: страница в Figma или в библиотеке компонентов: рядом показаны Button, Input, Card и их состояния (обычное, наведение, отключено, ошибка)

Частые ошибки

• Делать «похожий» элемент заново вместо использования существующего компонента.
• Не фиксировать состояния и варианты: ховер, активное, disabled, error, размеры.
• Смешивать в одном компоненте слишком много разных задач (получается «монстр», который сложно поддерживать).
• Не договариваться о правилах: где использовать один компонент, а где нужен другой вариант.
• Не вести библиотеку: компоненты есть в коде или в макетах, но никто не знает актуальную версию.

Связанные термины

• Дизайн-система
• UI-кит
• Шаблон страницы
• Сетка и отступы
• UI (User Interface)
• Frontend

Наши услуги

• Создание корпоративных сайтов — проектируем страницы из компонентов, чтобы сайт был единым и удобным.
• Создание интернет-магазинов — собираем каталог, карточки товара и корзину на компонентной базе.
• Техническая поддержка сайта — обновляем и дорабатываем компоненты без хаоса и поломок.