CodeariaAcademy

React Bits

171 анимированный React-компонент: фоны на шейдерах, текстовые эффекты, карточки и меню. Ставятся одной командой.

Сами не запускали: описание по документации и репозиторию.

В цифрах

компонент в бесплатной части
фонов, самый большой раздел
варианта: JS или TS, CSS или Tailwind
лицензия, с Commons Clause

Что это

React Bits это полка с готовыми анимированными эффектами для React: фоны на шейдерах, текстовые эффекты, карточки, меню. Задача простая: не писать с нуля то, что уже красиво сделано, а взять компонент и встроить в свой проект за минуту.

Главное отличие от обычной npm-библиотеки в том, что компонент ставится по модели shadcn: команда кладёт его исходник прямо в ваш проект, без записи в package.json. Дальше файл ваш, его можно править как угодно. Это удобно тем, кто собирает лендинги и хочет эффектный визуал без собственной графики, а через MCP-режим компоненты может искать и ставить сам Claude Code.

Как устроено

npx shadcn addбесплатно
Команда вида npx shadcn@latest add https://reactbits.dev/r/Aurora-TS-TW кладёт исходник в проект, хвост адреса выбирает вариант.
4 sections
Backgrounds (56), Components (45), Animations (38), Text Animations (32); новые компоненты добавляются еженедельно.
gsap · motion · ogl · three
Текстовым эффектам хватает gsap или motion, красивые фоны рисуются шейдерами через ogl или three.
MCP
Реестр прописывается в components.json, и Claude Code сам ищет и ставит компоненты.
React Bits Proплатно
Отдельный платный набор с блоками страниц и шаблонами; бесплатная часть при этом не урезана. Для Vue и Svelte есть официальные порты.

Знать до установки

Шейдерным фонам нужны проверка WebGL и статичный запасной вид: без аппаратного ускорения, в виртуалках и при исчерпанном лимите контекстов на вкладку вместо фона будет пустое место.
Исходник копируется в проект, поэтому обновления компонентов придётся забирать руками.
Commons Clause разрешает использовать компоненты в своих и клиентских проектах, но запрещает продавать саму библиотеку.

Комментарии