49.5K ·GitHub
Что это такое?
React Bits - это библиотека анимированных интерактивных UI-компонентов для React с открытым исходным кодом, которая помогает создавать яркие сайты. Более 165+ готовых компонентов, включая анимацию текста, фоны и элементы интерфейса.
React Bits - это библиотека анимированных интерактивных UI-компонентов для React с открытым исходным кодом, которая помогает создавать яркие сайты. Более 165+ готовых компонентов, включая анимацию текста, фоны и элементы интерфейса.Это фреймворк или просто готовые компоненты для подключения?Это библиотека компонентов, а не фреймворк: вы выбираете отдельные компоненты и добавляете их в любой существующий проект на React. Каждый компонент доступен в 4 вариантах (JS-CSS, JS-TW, TS-CSS, TS-TW), чтобы подойти к вашему стеку.
Это библиотека компонентов, а не фреймворк: вы выбираете отдельные компоненты и добавляете их в любой существующий проект на React. Каждый компонент доступен в 4 вариантах (JS-CSS, JS-TW, TS-CSS, TS-TW), чтобы подойти к вашему стеку.Как добавить компонент в мой проект?Установите его через CLI shadcn или jsrepo прямо со страницы компонента или просто скопируйте код вручную, выбрав подходящее сочетание языка и стилизации.
Установите его через CLI shadcn или jsrepo прямо со страницы компонента или просто скопируйте код вручную, выбрав подходящее сочетание языка и стилизации.Нужны ли мне дополнительные библиотеки, чтобы использовать анимации?Большинство компонентов легковесные и почти не имеют зависимостей, но 3D-компоненты и компоненты на основе физики подтягивают пакеты Three.js, такие как @react-three/fiber, @react-three/drei и @react-three/rapier, а некоторые эффекты используют GSAP.
Большинство компонентов легковесные и почти не имеют зависимостей, но 3D-компоненты и компоненты на основе физики подтягивают пакеты Three.js, такие как @react-three/fiber, @react-three/drei и @react-three/rapier, а некоторые эффекты используют GSAP.Какие условия лицензии?React Bits распространяется по лицензии MIT с дополнением Commons Clause: его можно бесплатно использовать в личных и коммерческих целях, но дополнение запрещает продавать саму библиотеку как услугу.
React Bits распространяется по лицензии MIT с дополнением Commons Clause: его можно бесплатно использовать в личных и коммерческих целях, но дополнение запрещает продавать саму библиотеку как услугу.Что такое инструменты Background Studio, Shape Magic и Texture Lab?Это бесплатные вспомогательные веб-инструменты: Background Studio позволяет настраивать анимированные фоны и экспортировать их как видео, изображение или код; Shape Magic создает переходы между фигурами со скругленными углами, которые можно экспортировать как SVG, React или clip-path; Texture Lab применяет более 20 эффектов, таких как шум, дизеринг и ASCII, к изображениям и видео.
Это бесплатные вспомогательные веб-инструменты: Background Studio позволяет настраивать анимированные фоны и экспортировать их как видео, изображение или код; Shape Magic создает переходы между фигурами со скругленными углами, которые можно экспортировать как SVG, React или clip-path; Texture Lab применяет более 20 эффектов, таких как шум, дизеринг и ASCII, к изображениям и видео.Есть ли React Bits для фреймворков, кроме React?Да, есть официальные версии от сообщества для Vue.js (vue-bits.dev) и Svelte (sveltebits.xyz).
Да, есть официальные версии от сообщества для Vue.js (vue-bits.dev) и Svelte (sveltebits.xyz).Откуда берутся идеи для компонентов?React Bits иногда черпает вдохновение в общедоступных примерах кода, переписывая их в полноценные настраиваемые компоненты JS/TS/CSS/Tailwind и указывая авторов оригинала, если они об этом попросят.
React Bits иногда черпает вдохновение в общедоступных примерах кода, переписывая их в полноценные настраиваемые компоненты JS/TS/CSS/Tailwind и указывая авторов оригинала, если они об этом попросят.What are similar projects?rare-ui, arc-library, Monocharts, tremor-npm, daisyui, canvas-ui, ink-kit, magicui
rare-ui, arc-library, Monocharts, tremor-npm, daisyui, canvas-ui, ink-kit, magicuiWhich topics is it in?css-animations, animations, tailwind, shadcn, react-components, components, reactjs, ui-library, threejs, tailwindcss, vite, component-library
css-animations, animations, tailwind, shadcn, react-components, components, reactjs, ui-library, threejs, tailwindcss, vite, component-library