Как собрать свою библиотеку компонентов и не сойти с ума
Знакомая история: вы начинаете новый проект, открываете Shadcn UI, копируете базовые кнопки и инпуты, а потом тратите неделю на то, чтобы заставить их выглядеть «дорого» или добавить сложную анимацию. В какой-то момент ловишь себя на мысли, что пишешь один и тот же код в десятый раз. Ребята из Nolly Studio, кажется, тоже через это прошли и выкатили Cult UI — проект, который заполняет пробел между скучными стандартными компонентами и сложными интерфейсами с кучей анимаций.
Что это вообще такое
Cult UI — это не библиотека в привычном понимании. Вы не будете устанавливать её через npm install. Это скорее склад готовых рецептов для тех, кто называет себя Design Engineers. Если вы используете связку Next.js, Tailwind CSS и Framer Motion, то этот проект станет для вас отличным дополнением к Shadcn.
Основная идея проста: вы заходите на сайт, выбираете нужный паттерн или компонент, копируете код и вставляете в свой проект. Всё. Никаких лишних зависимостей в package.json, которые потом страшно обновлять.
Агенты повсюду
Самое интересное в репозитории сейчас — это раздел с AI-агентами. Пока все обсуждают, как нейронки заменят программистов, авторы Cult UI собрали почти сотню паттернов для работы с AI SDK.
Тут есть готовые решения для специфических задач:
- Анализ конкурентов. Вводите URL, и агент через Firecrawl вытягивает данные о ценах и фичах, формируя сравнительную таблицу.
- Аудит доступности. Инструмент сканирует сайт на соответствие WCAG 2.1 и подсвечивает проблемы с контрастностью или структурой заголовков.
- Редактор таблиц с чатом. Это когда вы можете попросить ИИ «подсветить все строки, где выручка упала», и он реально это сделает прямо в интерфейсе таблицы.
Для тех, кто хочет запустить полноценный продукт, есть шаблоны посложнее. Например, полноценная платформа для RAG-агентов с использованием PostgreSQL и pgvector или мультиарендный чат в стиле ChatGPT с ролями и историей переписки.
Что внутри и как это работает
Технологический стек здесь максимально стандартный для современного фронтенда, и это плюс. Вам не нужно учить новый фреймворк.
- Next.js и TypeScript. База, на которой всё держится.
- Tailwind CSS. Для стилизации, которую легко переопределить под свой бренд.
- Framer Motion. Отвечает за ту самую «плавность», которой часто не хватает бесплатным библиотекам.
- AI SDK. Используется для оркестрации моделей и стриминга ответов.
Интересно, как авторы подошли к паттернам проектирования агентов. В разделе Cult Pro (есть и платные блоки) описаны классические схемы: «Оркестратор», «Маршрутизатор» и «Оценщик-Оптимизатор». Это полезно изучить даже просто для общего развития, чтобы понять, как разделять логику между разными моделями ИИ.
Практическая польза
Зачем вам это может понадобиться завтра?
Допустим, вам нужно быстро собрать дашборд для маркетингового отдела. Вместо того чтобы с нуля настраивать графики и парсеры, вы берете шаблон Branding Agent, который уже умеет вытягивать дизайн-системы с сайтов. Или вам нужен продвинутый редактор изображений — в репозитории есть пример с Gemini Flash, который умеет править картинки по текстовому описанию.
Кстати, проект отлично подходит для создания собственной внутренней библиотеки компонентов компании. Вы берете Cult UI за основу, меняете токены Tailwind под свой гайдбук и получаете уникальный набор инструментов, который не выглядит как очередной клон Bootstrap.
Стоит ли пробовать
Если вы работаете в экосистеме React и вам надоело изобретать велосипед для типичных AI-фич, то заглянуть в Cult UI точно стоит.
Кому проект зайдет:
- Фрилансерам, которым нужно «на вчера» собрать красивый MVP.
- Фронтенд-разработчикам, которые хотят подтянуть навыки работы с Framer Motion и AI SDK.
- Дизайн-инженерам, ищущим вдохновение для сложных микровзаимодействий.
Из минусов: документация местами лаконична, и некоторые продвинутые блоки доступны только в Pro-версии. Но бесплатной части более чем достаточно, чтобы закрыть 80% потребностей обычного SaaS-проекта.
В общем, это добротный набор инструментов, который экономит десятки часов на верстке и интеграции нейронок. Просто копируйте, вставляйте и идите пить кофе, пока проект собирается сам.
