Есть категория frontend-инструментов, которые делают одну вещь и делают её хорошо, но на этом останавливаются. shadcn/ui — именно такой случай. Красивые React-компоненты на базе Radix UI и Tailwind CSS, которые вы копируете в проект вместо установки NPM-пакета. Идея чистая: вы владеете кодом, а не зависите от чужого пакета. Но за пределами базовых компонентов — кнопок, диалогов, аккордеонов — оригинал почти ничего не предлагает. Нет готовых блоков для лендингов, нет визуального редактора тем, нет интеграции с Figma.
Shadcn Studio берёт этот фундамент и масштабирует. В каталоге — сотни вариантов компонентов с анимациями на базе Motion. Поверх компонентов — готовые секции: hero-блоки, pricing-таблицы, блоки преимуществ, футеры, элементы дашбордов и eCommerce. Дальше — шаблоны для Next.js и Astro, визуальный редактор тем с AI, плагин для Figma, MCP-сервер, расширение для VS Code. Бесплатно — open-source ядро. Полный доступ — разовый платёж $199, lifetime.
Команда ThemeSelection создала Studio как независимый проект. Связи с оригинальным shadcn/ui нет — но совместимость сохранена: блоки из Studio ставятся через npx shadcn add, как и оригинальные компоненты.
Что это и как начать использовать
Представьте конструктор, где каждая деталь — не пластиковый кубик, а исходный код, который вы можете переписать. shadcn/ui дал идею: компоненты не ставятся через NPM, а копируются в проект. Вы меняете стили, структуру, логику — никто не присылает breaking change в package.json. Shadcn Studio берёт этот принцип и масштабирует: от десятков базовых компонентов к сотням готовых блоков и шаблонов.
Три шага для старта:
- Убедитесь, что проект использует React + Tailwind CSS v4 и в нём уже установлен shadcn/ui. Без этой основы блоки из Studio потребуют серьёзной адаптации.
- Установите нужный блок одной командой: npx shadcn add hero-section-01. CLI автоматически создаёт файлы компонентов и подтягивает зависимости.
- Откройте блок в редакторе и адаптируйте под задачу — тексты, цвета, отступы. Код ваш, правьте как угодно.
Важно: Shadcn Studio — это не замена shadcn/ui, а надстройка. Если в проекте нет shadcn/ui, блоки Studio не заработают без ручной адаптации.
Зачем нужно
shadcn/ui — набор React-компонентов на базе Radix UI (библиотека доступных UI-примитивов: аккордеоны, диалоги, выпадающие меню) и Tailwind CSS (utility-first CSS-фреймворк, где стили собираются из готовых классов-утилит). Компоненты не устанавливаются через пакетный менеджер — исходный код копируется прямо в репозиторий, и после этого вы полностью отвечаете за него: меняйте стили, логику, структуру без риска, что чужое обновление сломает сборку.
У оригинала есть пределы. Мало вариантов компонентов — обычно один-два на тип. Почти нет готовых блоков для маркетинговых страниц: hero-секции, pricing-таблицы, блоки преимуществ, футеры. Нет визуального редактора тем. Нет связи с Figma. Нет инструментов для AI-агентов.
Shadcn Studio закрывает каждый из этих пробелов:
- Сотни вариантов компонентов с анимациями через Motion (бывший Framer Motion — библиотека декларативных анимаций для React)
- Готовые блоки: Hero, Pricing, Features, CTA, Footer, Dashboard, eCommerce и десятки других
- 10+ полноценных шаблонов для лендингов, дашбордов и приложений на Next.js и Astro
- Theme Generator с визуальным редактором и AI-генерацией тем
- Figma UI Kit и плагин Figma to Code
- MCP-сервер для AI-агентов
- Расширение для VS Code
Как устроено
Ключевые возможности
| Возможность | Что даёт | Доступность |
|---|---|---|
| Компоненты | Расширенные варианты shadcn/ui-компонентов с анимациями через Motion | Free + Pro |
| Блоки | Готовые секции: Hero, Pricing, Features, CTA, Footer, Dashboard, eCommerce и др. | Free + Pro |
| Шаблоны | 10+ полноценных шаблонов для лендингов, дашбордов и приложений. Next.js и Astro | Free + Pro |
| Theme Generator | Визуальный редактор тем: цвета, типографика, радиусы, light/dark. AI-генерация по промпту или изображению | Free (базовый) + Pro |
| Figma UI Kit | Полный набор элементов и секций в Figma, привязанный к кодовой базе | Pro |
| Figma to Code | Плагин конвертирует Figma-фреймы в React-код на shadcn/ui | Pro |
| MCP Server | AI-агенты ищут, генерируют и рефакторят UI из библиотеки блоков | Free + Pro |
| IDE Extension | Поиск, предпросмотр и установка блоков прямо из VS Code | Free + Pro |
| Drag & Drop Builder | Визуальный конструктор лендингов из готовых блоков | Pro |
Стек и совместимость
| Технология | Поддержка |
|---|---|
| UI-фреймворк | React |
| Мета-фреймворки | Next.js, Astro |
| CSS | Tailwind CSS v4 |
| Примитивы | Radix UI |
| Типизация | TypeScript |
| Анимации | Motion (Framer Motion) |
| Установка | shadcn CLI, copy-paste, v0, MCP |
Способы установки
CLI (рекомендуемый):
npx shadcn add hero-section-01Автоматически создаёт файлы компонентов и устанавливает зависимости.
Copy-paste: у каждого блока в каталоге есть кнопка копирования исходного кода. Берёте код, переносите в свой репозиторий и правите под задачу.
Open in v0: каждый блок можно открыть в Vercel v0 (AI-инструмент для генерации UI по текстовому описанию) для модификации через промпт.
Theme Generator
Визуальный редактор тем с предпросмотром. Настраиваете цвета, типографику, радиусы скруглений, light/dark-режимы. Есть готовые стартеры — Spotify, Neo Brutalism, Claude и другие.
AI Theme Generator собирает тему по текстовому описанию или картинке. Подходит для быстрого прототипирования: описали настроение — получили готовый набор токенов. На выходе — CSS-переменные (механизм настройки тем через переменные CSS, который Tailwind и shadcn/ui используют для цветовой схемы) или Tailwind-конфиг.
Совет: AI-генерация тем работает лучше всего, когда промпт описывает конкретные ощущения, а не абстрактные направления. «Тёмная тема в стиле Linear, холодные оттенки, минимум цвета» сработает точнее, чем «современная красивая тема».
MCP-сервер и AI-инструменты
MCP (Model Context Protocol — открытый протокол, через который AI-агенты получают доступ к внешним инструментам и данным) даёт редакторам вроде Cursor, Windsurf и Claude прямой доступ к каталогу блоков Studio:
- Находить блоки по текстовому запросу
- Собирать интерфейсы по описанию
- Перерабатывать уже написанные компоненты
У каждого блока в каталоге есть кнопка Copy Prompt — это заранее написанное описание, которое передаёт контекст блока в AI-редактор: v0, Cursor и другие. Не магия, а подготовленный промпт.
Figma-интеграция
UI Kit — коллекция всех элементов и секций Studio внутри Figma, привязанная к кодовой базе. Дизайн в Figma → готовый код.
Figma to Code Plugin — выделяете фрейм, плагин разбирает его структуру и выдаёт React-код на базе shadcn/ui. Готовый результат можно скопировать или поставить через CLI.
Внимание: Figma-инструменты доступны только в Pro. В бесплатной версии их нет — ни UI Kit, ни плагина Figma to Code.
Тарифы
| Возможность | Free | Pro ($199, lifetime) |
|---|---|---|
| Компоненты и блоки | Бесплатные варианты | Все варианты + премиум |
| Шаблоны | Бесплатные | Все (Next.js + Astro) |
| Theme Generator | Базовые функции | AI-генерация, все стартеры, import/export |
| Figma UI Kit + to Code | Нет | Да |
| MCP Server | Бесплатные блоки | Все блоки |
| Drag & Drop Builder | Нет | Да |
| Обновления | — | Все будущие обновления бесплатно |
Pro — $199 единоразово. Покупка открывает постоянный доступ ко всем текущим и будущим блокам, шаблонам, Figma-файлам и инструментам. Подписки нет.
Отличие от оригинального shadcn/ui
| Аспект | shadcn/ui | Shadcn Studio |
|---|---|---|
| Компоненты | Базовые (accordion, button, dialog и др.) | Расширенные варианты с анимациями + сотни новых |
| Блоки | Ограниченный набор | Сотни: marketing, dashboard, eCommerce |
| Шаблоны | Несколько примеров | 10+ полноценных (Next.js, Astro) |
| Темы | Базовый генератор | Theme Generator с AI, стартерами, import/export |
| Figma | Ссылки на сторонние наборы | Собственный UI Kit + Figma to Code |
| AI-инструменты | MCP Server (базовый) | MCP + IDE Extension + Copy Prompt + AI Theme |
Studio — отдельный проект, не связанный с оригинальным shadcn/ui. Берёт его как базу и расширяет. Совместимость полная: блоки из Studio ставятся той же командой npx shadcn add.
Когда использовать
- Фронтенд на React и Tailwind CSS, где нужно ускорить сборку интерфейса
- Проект требует готовых секций для лендингов, а не только базовых компонентов
- В команде используют AI-редакторы (Cursor, v0) для генерации UI
- Нужен путь от Figma-макета к коду без ручной вёрстки
- Стек на Next.js или Astro и нужен единый каталог компонентов
Инсайт: Shadcn Studio не заменяет shadcn/ui — он расширяет. Если оригинал — это набор кирпичей, то Studio — каталог готовых стен, перекрытий и лестниц из тех же кирпичей.
Ограничения
Ограничения
Что учитывать перед внедрением.
Только React — Версий для Vue и Svelte не существует.
Блоки построены на React-компонентах Radix UI, портировать на другой фреймворк вручную — неоправданный труд. Если проект не на React, Studio не подходит.
Жёсткая привязка к shadcn/ui — Без установленного в проекте shadcn/ui блоки Studio не заработают.
Они опираются на те же примитивы, токены тем и утилиты Tailwind. Другой UI-фреймворк — значит переписывать основу.
Pro-контент закрыт — Существенная доля блоков и все Figma-инструменты доступны только в Pro.
Бесплатная версия даёт достаточный набор для старта, но для production-проектов с Figma-дизайном без Pro не обойтись.
Код становится вашим — Блоки копируются в репозиторий, и после этого вы сами отвечаете за поддержку.
Обновления не приходят через npm update. Когда выйдет новая версия блока, обновлять придётся вручную или повторной установкой через CLI.
Только клиентский рендеринг — Блоки рассчитаны на клиент.
Для Next.js App Router с серверными компонентами потребуется ручная адаптация: добавление директивы ‘use client’ или разделение на серверные и клиентские части.
Антипаттерны
Антипаттерны
Чего не делать при работе с Shadcn Studio.
Не копировать блок вслепую — Блок из Studio — это стартовая точка, не финальный продукт.
Скопировали hero-секцию, поменяли текст и цвета, оставили как есть — получили шаблонный вид, который повторяет сотни других сайтов. Адаптируйте структуру: уберите лишнее, поменяйте расположение, добавьте специфичные для проекта детали.
Не тянуть Pro-блоки без лицензии — Pro-блоки доступны для просмотра, но их код закрыт.
Использование без лицензии нарушает условия. Если блок нужен — купите Pro. Если бюджет не позволяет — соберите аналог из бесплатных компонентов shadcn/ui вручную.
Не заменять shadcn/ui на Studio — Studio не заменяет оригинал, а надстраивает.
Удалять shadcn/ui из проекта и ставить только Studio — ошибка. Без базовых компонентов shadcn/ui (accordion, button, dialog) расширенные варианты Studio не работают.
Чеклист
Чеклист
Проверка перед запуском.
Проверьте наличие shadcn/ui — Выполните npx shadcn add button в терминале.
Если компонент установлен и работает, основа готова. Если команда не найдена — сначала настройте shadcn/ui по официальной документации.
Проверьте версию Tailwind CSS — Studio использует Tailwind CSS v4.
Откройте package.json и найдите tailwindcss в зависимостях. Версия 4.x — совместима, 3.x — потребует обновления или работы с legacy-документацией shadcn/ui.
Проверьте meta-фреймворк — Studio поддерживает Next.js и Astro.
Если проект на Remix, Gatsby, Vite или чистом React — блоки заработают, но шаблоны из Studio могут потребовать адаптации маршрутизации и структуры.
Оцените, нужен ли Pro — Перед покупкой $199 проверьте, достаточно ли бесплатных блоков для вашей задачи.
Откройте каталог блоков на сайте Studio и отфильтруйте по Free. Если покрывает 80% задач — Pro пока не нужен.
Ссылки
Ссылки
- Сайт: Shadcn Studio
- Сайт: ThemeSelection
- Репозиторий: GitHub
- Документация: Компоненты
- Документация: Блоки
- Документация: Templates
- Документация: Theme Generator
- Документация: MCP Server
- Документация: Figma Plugin
- Документация: VS Code Extension
- Документация: shadcn/ui
- Документация: Discord