Хватит делать сайты-близнецы на shadcn/ui! Знакомьтесь, TweakCN

Привет, коллеги! Знакомая ситуация: вы начинаете новый проект, выбираете стек, и рука сама тянется к shadcn/ui в паре с Tailwind CSS. И почему бы нет? Это удобно, быстро, компоненты качественные. Но есть один нюанс. Через некоторое время вы замечаете, что ваш новый сайт подозрительно похож на десяток других, которые вы видели на этой неделе. Та же кнопка, тот же инпут, тот же стиль.

Библиотека shadcn/ui стала настолько популярной, что породила целый класс сайтов с узнаваемым "лицом". И это не плохо, но когда хочется придать проекту индивидуальность, начинается ручная работа с CSS-переменными и конфигами Tailwind. Процесс не самый увлекательный: поменял значение, пересобрал, посмотрел, не понравилось, повторил.

А что, если бы можно было настраивать тему визуально, как в конструкторе? Именно эту проблему и решает герой нашего сегодняшнего обзора — проект TweakCN.

Что такое TweakCN и зачем он нужен?

Если коротко, TweakCN — это визуальный редактор тем для компонентов shadcn/ui. Представьте себе "песочницу", где вы можете в реальном времени двигать ползунки, выбирать цвета и видеть, как преображаются привычные UI-элементы. И всё это без необходимости копаться в коде.

Основная мотивация автора, как он сам пишет в README, — дать разработчикам инструмент, который поможет их сайтам выделиться из толпы. Цель проекта — создать платформу, где можно не только тонко настроить каждый аспект своего UI, но и находить вдохновение в бесконечных вариантах кастомизации.

Это идеальное решение для:

• Frontend-разработчиков, которые хотят быстро прототипировать внешний вид.
• Full-stack специалистов, у которых нет времени или желания глубоко погружаться в CSS.
• Дизайнеров, которые могут наглядно показать разработчику, как должна выглядеть тема.
• Всех, кто делает пет-проекты и хочет, чтобы они выглядели свежо и оригинально.

Как это работает? Ключевые возможности

Вся магия происходит на сайте tweakcn.com. Вы заходите и сразу попадаете в редактор. Слева — панель настроек, справа — предпросмотр компонентов. Давайте разберем, что тут можно делать.

1. Визуальная настройка в реальном времени

Это главная фишка проекта. Вам больше не нужно угадывать, как тот или иной hex-код будет смотреться в интерфейсе. Вы просто выбираете цвет с помощью палитры и мгновенно видите результат на всех компонентах: от кнопок и инпутов до календарей и диалоговых окон.

Можно настроить:

• Цветовую палитру: основной цвет, фон, цвет текста, акценты и так далее.
• Скругление углов (border-radius): от строгих прямых углов до модных "пухлых" кнопок.
• Тени, рамки и другие визуальные атрибуты.

Процесс напоминает работу в Figma или Photoshop, только на выходе вы получаете не макет, а готовый к использованию код.

2. Готовые пресеты для быстрого старта

Не знаете, с чего начать? TweakCN предлагает коллекцию красивых, заранее настроенных тем. Можно выбрать понравившийся пресет в качестве отправной точки, а затем докрутить его под свои нужды. Это здорово экономит время и помогает найти вдохновение.

3. Экспорт кода одной кнопкой

Наигрались с настройками и получили идеальную тему? Отлично! Теперь просто копируете сгенерированный код и вставляете его в свой проект. TweakCN генерирует CSS-переменные, которые легко интегрируются в любой проект, использующий shadcn/ui.

Примерно так выглядит код, который вы получите:

@layer base {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    /* ... и другие переменные */
    --radius: 0.5rem;
  }
 
  .dark {
    /* ... переменные для темной темы */
  }
}

Вам останется только обновить эти переменные в своем globals.css (или аналогичном файле).

Как запустить у себя?

TweakCN — это не только веб-сервис, но и open-source проект. Если вы хотите внести свой вклад или просто покопаться в коде, его можно легко запустить локально.

Для этого потребуется Node.js версии 18 или выше.

1. Клонируем репозиторий:

   git clone https://github.com/jnsahaj/tweakcn.git
   cd tweakcn
   

2. Устанавливаем зависимости:

   npm install
   

3. Запускаем сервер для разработки:

   npm run dev
   

После этого редактор будет доступен в вашем браузере по адресу http://localhost:3000.

Выводы: кому и когда стоит попробовать TweakCN?

TweakCN — это отличный пример того, как простой, но хорошо сфокусированный инструмент может решить реальную проблему разработчиков. Он не пытается перевернуть мир, но делает одну вещь, и делает ее хорошо: упрощает и ускоряет кастомизацию shadcn/ui.

Кому особенно зайдет:

• Инди-разработчикам и стартапам: когда нужно быстро сделать красиво, не привлекая дизайнера.
• Тем, кто устал от "корпоративного" вида shadcn/ui по умолчанию.
• Новичкам, которые еще не до конца освоили тонкости настройки Tailwind CSS.

Проект активно развивается, у него есть публичный роадмап, и сообщество тепло принимает новых контрибьюторов. Даже если вы не планируете использовать его прямо сейчас, рекомендую закинуть репозиторий в закладки и поставить звезду. Такие инструменты делают нашу работу чуточку приятнее и креативнее.