Что это такое?
Magic UI — это бесплатная UI-библиотека с открытым исходным кодом для дизайн-инженеров: анимированные компоненты и эффекты, которые можно просто скопировать и вставить в своё приложение.
Magic UI — это бесплатная UI-библиотека с открытым исходным кодом для дизайн-инженеров: анимированные компоненты и эффекты, которые можно просто скопировать и вставить в своё приложение.То есть это не npm-пакет, который я устанавливаю — как он распространяется?Он распространяется в виде исходного кода: вы смотрите каталог анимированных компонентов и эффектов в документации и вставляете нужное в своё приложение — устанавливать никакую runtime-зависимость не нужно.
Он распространяется в виде исходного кода: вы смотрите каталог анимированных компонентов и эффектов в документации и вставляете нужное в своё приложение — устанавливать никакую runtime-зависимость не нужно.Как добавить один из этих компонентов в своё приложение?Откройте сайт документации, ссылка на него есть в начале README, выберите компонент и скопируйте его код в свой проект. Чтобы запустить сам сайт: репозиторий — это монорепозиторий на pnpm + Turborepo, требуется Node >= 22.14 и pnpm >= 9, запуск через pnpm dev.
Откройте сайт документации, ссылка на него есть в начале README, выберите компонент и скопируйте его код в свой проект. Чтобы запустить сам сайт: репозиторий — это монорепозиторий на pnpm + Turborepo, требуется Node >= 22.14 и pnpm >= 9, запуск через pnpm dev.Что нужно в проекте, чтобы эти компоненты работали?Это компоненты на React + TypeScript, стилизованные с помощью Tailwind CSS поверх shadcn/ui и анимированные через Framer Motion, в стеке присутствует Next.js — то есть целевой вариант это приложение на React или Next.js с уже настроенным Tailwind.
Это компоненты на React + TypeScript, стилизованные с помощью Tailwind CSS поверх shadcn/ui и анимированные через Framer Motion, в стеке присутствует Next.js — то есть целевой вариант это приложение на React или Next.js с уже настроенным Tailwind.Можно ли бесплатно использовать это в коммерческих проектах?Да — проект бесплатный и открытый, под лицензией MIT, так что компоненты можно использовать в коммерческих приложениях без оплаты.
Да — проект бесплатный и открытый, под лицензией MIT, так что компоненты можно использовать в коммерческих приложениях без оплаты.Могу ли я добавить в библиотеку свои компоненты?Да — в README сказано, что добавить свой компонент можно примерно за пять минут, следуя гайду по контрибуции проекта, а для вопросов и отзывов есть Discord.
Да — в README сказано, что добавить свой компонент можно примерно за пять минут, следуя гайду по контрибуции проекта, а для вопросов и отзывов есть Discord.Могу ли я доработать компонент после вставки или я привязан к внешнему виду по умолчанию?Меняйте что угодно — после вставки код лежит в вашем репозитории как ваш собственный, поэтому переделать стили или расширить компонент можно точно так же, как править свой код.
Меняйте что угодно — после вставки код лежит в вашем репозитории как ваш собственный, поэтому переделать стили или расширить компонент можно точно так же, как править свой код.Проект активно поддерживается?Признаки говорят, что да: около 22 600 звёзд на GitHub, CI-воркфлоу для проверок кода и публикации, а репозиторий не переведён в архив.
Признаки говорят, что да: около 22 600 звёзд на GitHub, CI-воркфлоу для проверок кода и публикации, а репозиторий не переведён в архив.What are similar projects?cult-ui, rare-ui, arc-library, canvas-ui, Monocharts, open-claude-ui, boardui, chakra-ui
cult-ui, rare-ui, arc-library, canvas-ui, Monocharts, open-claude-ui, boardui, chakra-uiWhich topics is it in?framer-motion, snippets, mdx, react-components, shadcn-ui, components, ui-library, tailwindcss, component-library, design, nextjs, ui-components
framer-motion, snippets, mdx, react-components, shadcn-ui, components, ui-library, tailwindcss, component-library, design, nextjs, ui-components