Shadcn Studio — расширенная библиотека компонентов и блоков shadcn/ui

Расширенная экосистема вокруг shadcn/ui: компоненты с вариантами, готовые блоки и страницы, шаблоны, генератор тем, Figma-инструменты, MCP-сервер для работы с ИИ-агентами и расширение для IDE. Код устанавливается прямо в проект, поэтому его можно изменять под собственную дизайн-систему.

Что такое Shadcn Studio

shadcn/ui распространяется как исходный код: компонент добавляется в проект и после установки становится частью его кодовой базы. Shadcn Studio расширяет этот подход библиотекой компонентов, блоков, готовых страниц и шаблонов, а также инструментами для темизации, Figma и работы с ИИ-агентами.

Установка использует инструмент командной строки shadcn CLI. Документация описывает этот workflow без npm-пакетов, в формате копирования кода.

Что входит в экосистему

По состоянию на 10 сентября 2026 года официальный сайт заявляет 800+ блоков, 100+ страниц, 25+ шаблонов и 1000+ компонентов.

Стек и совместимость

В обновлении, опубликованном 29 мая 2026 года, Shadcn Studio обновил компоненты, блоки и Theme Generator для Base UI и Radix UI. В том же обновлении заявлена совместимость генератора тем с shadcn/ui v4.

Официальной полной поддержки интерфейсов справа налево (RTL) у Shadcn Studio нет. Команда миграции shadcn может заменить часть классов на логические эквиваленты, но пользовательские компоненты, анимации и сторонние зависимости всё равно нужно проверять вручную.

Подключение реестров и установка ресурсов

Предварительные условия

Перед использованием CLI установите shadcn в проекте по руководству shadcn/ui. Для MCP документация прямо указывает проекты на React или Next.js с TypeScript и Tailwind CSS. Shadcn Studio рекомендует shadcn CLI v4; CLI v2 больше не поддерживается.

Реестры CLI v4

Документация перечисляет пять пространств имён:

Настройка хранится в components.json. Точные URL реестров и актуальный пример конфигурации приведены в официальной инструкции по CLI.

Для премиум-ресурсов нужны email и лицензионный ключ. Документация рекомендует передавать их через переменные окружения EMAIL и LICENSE_KEY и не добавлять файл .env в репозиторий.

Установка

Точное имя ресурса берите с его страницы:

# Бесплатный блок
npx shadcn@latest add @shadcn-studio/hero-section-01

# Блок из специализированного реестра
npx shadcn@latest add @ss-blocks/<block-name>

# Готовая страница
npx shadcn@latest add @ss-pages/<page-name>

CLI позволяет установить несколько ресурсов одной командой. Флаг --overwrite перезаписывает совпадающие файлы, поэтому перед его использованием сохраните текущие изменения в системе контроля версий.

Копирование кода и шаблоны

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

Проверка результата после установки

Материал основан на официальной документации; команды не проверялись в пользовательском проекте. Минимальная проверка выглядит так:

1. Установите ресурс командой с его официальной страницы.
2. Проверьте, появились ли новые файлы компонентов и, если ресурс добавляет зависимости, соответствующие изменения в package.json.
3. Импортируйте установленный блок или страницу.
4. Запустите проект:

npm run dev

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

Если оформление отличается от превью, сравните тему проекта, выбранный стиль shadcn и переменные в globals.css. Официальное руководство отдельно описывает дополнительные размеры полей, горизонтальные отступы кнопок и настройку курсора для разных реализаций компонентов.

Типовые ошибки CLI:

• Block/Component/Theme not found — проверьте имя и наличие ресурса в выбранном реестре;
• License key and email are required — проверьте переменные EMAIL и LICENSE_KEY;
• license key or email is invalid — убедитесь, что email совпадает с учётной записью, а ключ взят из биллинга.

Theme Generator

Theme Generator предназначен для генерации и настройки тем. Обновление от 29 мая 2026 года подтверждает поддержку Base UI, Radix UI и совместимость с shadcn/ui v4.

Доступность конкретных функций зависит от тарифа. Перед внедрением проверьте результат на используемом стиле и реализации примитивов.

MCP-сервер и работа с ИИ-агентами

MCP-сервер Shadcn Studio подключает библиотеку к агентной среде. В актуальной документации перечислены VS Code, Cursor, Windsurf, Cline и Claude Code.

Основные команды:

Бесплатная версия MCP ограничена бесплатным набором блоков. Pro открывает премиум-блоки и дополнительные возможности.

Figma: что переносится в код

В сценарии /ftc макет должен состоять из экземпляров блоков Shadcn Studio. Исходные имена фреймов нельзя менять: MCP использует их для сопоставления с библиотекой.

Этот режим устанавливает найденные блоки и может перенести текст, цвета и небольшие изменения свойств. Он не предназначен для точного воспроизведения серьёзно перестроенного макета.

Не переносятся автоматически:

• структурные изменения компоновки;
• сложные перестановки компонентов;
• добавленные или удалённые элементы;
• крупная переработка исходного блока.

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

Полезные сценарии

Быстро собрать типовой лендинг

Исходные условия: проект на React с настроенными shadcn/ui и Tailwind CSS. Вы выбираете hero, блок возможностей, тарифы и CTA, устанавливаете их через CLI и связываете на одной странице.

Ожидаемый проверяемый результат: страница собирается без ошибок и использует тему проекта. Сценарий хуже подходит для уникального арт-дирекшена, где большинство секций всё равно придётся переписывать.

Собрать интерфейс дашборда из готовых секций

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

Ожидаемый проверяемый результат: навигация и основные экраны отображаются в проекте. До выпуска нужно отдельно проверить доступность, адаптивность и поведение на реальных данных.

Перенести композицию блоков из Figma

Соберите макет из недетаченных экземпляров Shadcn Studio, сохраните исходные имена фреймов и запустите /ftc при подключённых Figma MCP и Shadcn Studio MCP.

Ожидаемый проверяемый результат: соответствующие блоки установлены в кодовую базу. Сценарий не подходит для глубоко изменённых или полностью авторских макетов.

Дать агенту контролируемый каталог интерфейсов

Подключите MCP к поддерживаемой IDE и попросите агента подобрать конкретный тип секции через /cui. После установки проверьте изменения в системе контроля версий.

Ожидаемый проверяемый результат: агент использует существующий блок вместо случайной разметки. Качество зависит от доступного набора ресурсов, точности запроса и последующей ручной проверки.

Лицензии и цены

На 10 сентября 2026 года официальная страница цен показывает для платных планов разовую оплату и пожизненный доступ:

На странице цен эти суммы показаны как акция со скидкой 30% и предупреждением о будущем повышении. Перед оплатой проверьте актуальные цены. Платёж обрабатывает Polar.

Страница лицензии, доступная при проверке 10 сентября 2026 года, помечена как обновлённая 13 января 2026 года. Лицензии разрешают создавать и продавать конечные продукты, в том числе клиентские проекты, но запрещают отдельно распространять ресурсы и их производные. Нельзя использовать их для конструктора, библиотеки, маркетплейса шаблонов или другого продукта, который позволяет конечному пользователю собирать собственные продукты на основе этих ресурсов. Текст также запрещает продукты и сервисы, которые правообладатель считает конкурирующими с Shadcn Studio.

Отличия от оригинального shadcn/ui

Shadcn Studio использует shadcn/ui как основу и устанавливает ресурсы через тот же CLI. При этом каталог, лицензия, реестры и инструменты сопровождения принадлежат отдельному проекту.

Ограничения и когда инструмент не подходит

• Основной стек — React. Для Vue, Svelte или Angular понадобится перенос реализации.
• Нужны shadcn/ui и Tailwind CSS. В другом дизайн-стеке адаптация может оказаться дороже ручной разработки.
• Значительная часть ресурсов платная. Состав Community ограничен.
• Премиум требует авторизации реестров. Учётные данные нельзя хранить в репозитории.
• Установленный код обновляется вручную. Изменения библиотеки не приходят как обычное обновление npm-зависимости.
• Base UI и Radix UI требуют осознанного выбора. Смешивание увеличивает риск расхождений.
• Полной поддержки RTL нет. После автоматической миграции нужна ручная проверка.
• Перенос из Figma в код не гарантирует точный результат для сложного макета. Особенно если исходные блоки перестроены или переименованы.
• Маркетинговые показатели быстро меняются. Большой каталог полезен только при регулярной сборке типовых интерфейсов.

Для одного небольшого лендинга или проекта со зрелой собственной дизайн-системой официальный набор shadcn/ui может оказаться достаточным.

Ссылки

• Официальный сайт
• Цены
• Блоки
• Компоненты
• Шаблоны
• Theme Generator
• Figma UI Kit
• Настройка shadcn CLI
• Документация MCP-сервера
• Лицензия
• GitHub
• Discord
• Оригинальный shadcn/ui

Следующий шаг

Перед выбором библиотеки блоков полезно разобраться с самим процессом проектирования интерфейса с ИИ: Как на самом деле проектировать дизайн с ИИ

Выбор библиотеки блоков и реализации примитивов влияет на скорость разработки и предсказуемость работы ИИ-агентов. Обсуждение будет полезно командам, которые формируют фронтенд-стек для агентной разработки.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov