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

Есть категория 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

Как устроено

Ключевые возможности

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

Способы установки

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.

Тарифы

Pro — $199 единоразово. Покупка открывает постоянный доступ ко всем текущим и будущим блокам, шаблонам, Figma-файлам и инструментам. Подписки нет.

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

Studio — отдельный проект, не связанный с оригинальным shadcn/ui. Берёт его как базу и расширяет. Совместимость полная: блоки из Studio ставятся той же командой npx shadcn add.

Когда использовать

• Фронтенд на React и Tailwind CSS, где нужно ускорить сборку интерфейса
• Проект требует готовых секций для лендингов, а не только базовых компонентов
• В команде используют AI-редакторы (Cursor, v0) для генерации UI
• Нужен путь от Figma-макета к коду без ручной вёрстки
• Стек на Next.js или Astro и нужен единый каталог компонентов

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