Бесплатные анимированные компоненты shadcn/ui: Cult UI

Когда агент собирает лендинг с нуля, карточки и кнопки на нём почти всегда выглядят одинаково: плоский фон, обычная тень, никакого движения. Я давно смотрю на готовые куски интерфейса именно затем, чтобы не объяснять агенту каждую анимацию отдельными словами.

На этой неделе я наткнулся на набор, который подходит для такой задачи прямо. Авторы описывают его как коллекцию из более чем 150 бесплатных анимированных компонентов, и ещё 58 добавили совсем недавно. Всё открытое и бесплатное, лицензия MIT.

Компоненты сделаны поверх shadcn/ui и Tailwind CSS четвёртой версии, а анимация идёт через библиотеку Motion. Важная деталь: команда установки не кладёт в проект чужой пакет, а копирует исходный код компонента прямо в ваши файлы, и дальше это полностью ваш код, который можно менять как угодно. Из-за этого способа есть и ограничение — компоненты рассчитаны на проект с React, Tailwind и уже настроенным shadcn/ui, в обычный статический HTML-сайт без сборки их вставить не получится.

1Как этим пользоваться

Самый простой способ — поставить один нужный компонент прямо по ссылке на его файл в каталоге Cult UI. Команду достаточно отдать агенту, он сам выполнит её в терминале проекта.

npx shadcn@latest add https://www.cult-ui.com/r/shift-card.json

Если компонентов из Cult UI понадобится несколько, есть способ удобнее. Один раз регистрируете каталог как отдельный источник в файле components.json, а потом ставите нужные компоненты просто по имени.

{
  "registries": {
    "@cult-ui": "https://www.cult-ui.com/r/{name}.json"
  }
}

npx shadcn@latest add @cult-ui/shift-card

Есть ещё один вариант — свой сервер по протоколу MCP. Если агент работает в Cursor, Claude Code или VS Code, он может через этот сервер сам найти и поставить нужный компонент по текстовому описанию, без того, чтобы вы искали ссылку на компонент руками.