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

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

Зачем это нужно

shadcn/ui — набор красиво оформленных React-компонентов на базе Radix UI и Tailwind CSS. Вы не ставите NPM-пакет, а копируете код в проект и владеете им. Идея отличная, но у оригинала есть ограничения: мало вариантов компонентов, почти нет готовых блоков для маркетинговых страниц, нет визуального генератора тем, нет Figma-интеграции.

Shadcn Studio закрывает все эти пробелы: сотни вариантов компонентов с анимациями, готовые блоки (hero, pricing, features, footer и десятки других), шаблоны, Theme Generator с AI, Figma-плагин для конвертации дизайна в код, MCP-сервер для работы AI-агентов и расширение для IDE.

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

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

Как подключить

CLI (рекомендуемый способ)

npx shadcn add hero-section-01

Автоматически создаёт файлы компонентов и устанавливает зависимости.

Copy-paste

На странице каждого блока — кнопка копирования кода. Вставляете в проект и адаптируете под задачу.

Open in v0

Каждый блок можно открыть в Vercel v0 для AI-модификации через промпт.

Theme Generator

Визуальный редактор тем с предпросмотром. Настройте цвета, типографику, радиусы, light/dark-режимы. Есть готовые стартеры (Spotify, Neo Brutalism, Claude и др.).

AI Theme Generator создаёт тему по текстовому промпту или изображению — удобно для быстрого прототипирования.

Результат экспортируется как CSS-переменные или Tailwind-конфиг.

MCP-сервер и AI-инструменты

MCP-сервер позволяет AI-агентам (Cursor, Windsurf, Claude и др.) работать с библиотекой блоков:

• Искать подходящие блоки по описанию
• Генерировать UI из промпта
• Рефакторить существующие компоненты

У каждого блока есть готовый промпт (Copy Prompt) для генерации в AI-инструментах — v0, Cursor и др.

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

UI Kit — полный набор компонентов и блоков в Figma, синхронизированный с кодовой базой. Проектируете в Figma — получаете готовый код.

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

Тарифы

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

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

Ограничения

• Только React — Vue/Svelte-версий нет
• Привязка к shadcn/ui — без shadcn/ui в проекте блоки потребуют серьёзной адаптации
• Pro-контент закрыт — значительная часть блоков и все Figma-инструменты только в Pro
• Не NPM-пакет — код копируется в проект и становится вашей ответственностью
• Нет серверных компонентов — блоки ориентированы на клиентский рендеринг

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

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

Ссылки

• Официальный сайт
• GitHub
• Компоненты
• Блоки
• Шаблоны
• Theme Generator
• MCP Server
• Figma Plugin
• IDE Extension (VS Code)
• Оригинальный shadcn/ui
• Discord

По теме

• Статья: Как мы переделывали главную pimenov.ai: от оценки Comet до нового визуального языка
• Блог: EmDash — Cloudflare собрал «наследника WordPress» за два месяца с помощью ИИ-агентов
• База знаний: DESIGN.md — дизайн-система в одном файле для AI-кодинга

Если вы собираете интерфейс на React и Tailwind и хотите разобраться, какие инструменты реально экономят время — напишите, помогу подобрать стек.