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

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

Что это такое

shadcn/ui распространяется не как NPM-пакет, а как исходный код: вы устанавливаете компонент в проект и дальше правите его сами. У оригинальной библиотеки компактный набор блоков, нет визуального генератора тем и нет собственной Figma-библиотеки.

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

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

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

Поддержка двух наборов примитивов важна по контексту самого shadcn/ui: в июле 2026 года Base UI стал в нём реализацией по умолчанию, Radix остался полностью поддержанным, а React Aria добавился как ещё один вариант. Shadcn Studio обновил блоки и компоненты под Base UI и Radix UI и привёл Theme Generator в совместимость с shadcn/ui v4.

Как установить блок

CLI (основной способ)

Код раздаётся через реестры shadcn CLI v4. Сначала пропишите нужный namespace в components.json проекта, затем выполните команду со страницы блока:

# Точное имя блока и namespace берите со страницы блока
npx shadcn@latest add @ss-blocks/<block-name>

Реестров четыре: @shadcn-studio открывает бесплатные компоненты, блоки и темы без авторизации, а @ss-components, @ss-blocks и @ss-themes дают доступ и к премиум-контенту после аутентификации. CLI v2 больше не поддерживается. Порядок настройки описан в официальной инструкции.

Copy-paste

На странице блока есть кнопка копирования кода. Способ подходит, когда вы хотите разобрать разметку вручную или взять из блока только фрагмент.

Open in v0

Блок открывается в Vercel v0 для доработки промптом. Тот же маршрут работает из Figma-плагина: сгенерированный код можно скопировать, получить к нему CLI-команду или сразу открыть в v0.

Шаблоны

Для Astro и Next.js есть отдельные руководства по установке шаблонов, например гайд по Astro-шаблонам. Начать можно с бесплатного шаблона: например, блоговый лендинг Ink на Next.js и Astro v6 с Tailwind CSS v4, TypeScript и Figma-файлом в комплекте.

Проверка результата

Минимальный сценарий, который подтверждает, что подключение работает:

1. В проекте с настроенным shadcn/ui и Tailwind CSS v4 выполните команду установки блока со страницы этого блока.
2. Убедитесь, что в вашей папке компонентов появились новые файлы, а в package.json добавились нужные зависимости.
3. Импортируйте блок в любую страницу и запустите дев-сервер.

npm run dev

Признаки успеха: сборка проходит без ошибок импорта, блок рендерится на странице, а его цвета и радиусы совпадают с вашей темой, потому что блок использует те же CSS-переменные shadcn/ui. Если цвета отличаются от остального интерфейса, значит тема проекта не совпадает с темой блока: сверьте переменные в globals.css.

Theme Generator

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

AI-режим собирает тему по текстовому описанию, умеет ссылаться на существующую тему через @Theme и сохраняет чекпойнты правок; модель задаётся в настройках LLM. Темы импортируются и экспортируются, поэтому генератором можно пользоваться и в проекте без блоков Shadcn Studio.

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

MCP-сервер подключается к IDE и агентным средам: VS Code, Cursor, Windsurf и Cline. Через него агент решает три задачи:

• находит подходящий блок по описанию задачи;
• собирает страницу из библиотеки вместо генерации разметки с нуля;
• рефакторит уже установленные компоненты.

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

Figma-интеграция

UI Kit — библиотека компонентов и блоков в Figma, синхронизированная с кодовой базой. Дизайнер собирает экран из тех же элементов, которые разработчик потом установит через CLI.

Figma to Code — плагин анализирует выделенный фрейм и генерирует React-код на shadcn/ui. Результат можно скопировать или установить через CLI.

Лицензии и тарифы

Все платные лицензии оплачиваются один раз и дают пожизненный доступ. Цены на 1 августа 2026 года: Basic — 99 $, Pro — 199 $, Team — 449 $, Enterprise — 849 $. На сайте они показаны как акция со скидкой 30% и пометкой о скором повышении, поэтому перед покупкой сверьтесь с сайтом и лицензионным соглашением. Оплата идёт через Polar.

Чем отличается от оригинального shadcn/ui

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

• Только React. Версий для Vue, Svelte и Angular нет.
• Зависимость от shadcn/ui и Tailwind CSS v4. Без них блоки потребуют серьёзной адаптации.
• Платная часть значительная. Figma-кит, Builder и премиум-блоки закрыты лицензией.
• Премиум требует настройки реестров. Платный контент ставится только через shadcn CLI v4 с аутентификацией, поддержка CLI v2 прекращена.
• Обновления не приходят через npm. Установленный код становится вашим, а правки из библиотеки придётся переносить руками.
• Две реализации примитивов усложняют выбор. Решение про Base UI или Radix лучше принять до первой установки.
• Числа в маркетинге опережают потребности. Библиотека на сотни блоков полезна только там, где интерфейсов действительно много.

Если у вас один небольшой лендинг или устоявшаяся собственная дизайн-система, официальных блоков shadcn/ui обычно достаточно.

Когда стоит присмотреться

• Вы делаете фронтенд на React и Tailwind CSS и собираете много типовых интерфейсов.
• Вам нужны готовые маркетинговые секции и дашборд-экраны без ручной вёрстки.
• Вы работаете с ИИ-агентами в IDE и хотите, чтобы они брали проверенные блоки.
• Вам нужен маршрут из Figma в код внутри одной библиотеки.
• Вы используете Astro или Next.js и хотите единую систему компонентов для нескольких проектов.

Ссылки

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

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

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

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

• Статья: Пять интерактивных лендингов за час: что умеет Codex с правильными skills
• Блог: Скиллы для Codex, с которыми сайты выглядят дорого
• База знаний: Taste Skill — anti-slop набор скиллов для ИИ-агентов

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

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