Як встановити макет

Що макет очікує від проєкту і як його додати.

Вимоги

React 19 — кільком макетам потрібні cleanup у ref і проп `inert`
Tailwind CSS v4
Токени shadcn (background, foreground, card, muted, border …) — макети використовують лише їх, тому переймають вашу палітру
Пакети npm: motion і lucide-react; подекуди ще react-dom

Три кроки

1
Скопіюйте команду зі сторінки макета. У Pro-макетів у ній ваш особистий токен.
2
Виконайте її — shadcn CLI покладе файли в components/patterns/<slug>/ і доставить відсутні пакети.
3
Прочитайте README поруч із кодом: там названо головний компонент і колбеки, куди підключається ваш бекенд.

$npx shadcn@latest add …/registry.json

Без CLI

Завантажте .zip зі сторінки макета й покладіть папку будь-куди в проєкт. Усі файли імпортують лише пакети npm і сусідні файли, тож нічого більше налаштовувати не треба.

Через AI-агента

На сторінці кожного макета є кнопка «Промт для AI». Вона копіює завдання для Claude Code, Cursor чи подібного агента: поставити макет, прочитати README, вставити компонент і підключити до справжніх даних, не чіпаючи ваші дизайн-токени.