Repolode
Предложить
DavidHDev

DavidHDev/react-bits

Библиотека из более чем 215 бесплатных анимированных и настраиваемых компонентов и фонов для React и Next.js, которые можно установить через shadcn или jsrepo.

Открыть на GitHubСайт
Звёзды
49,810
Форки
2,464
Открытые issues
1
Последний коммит
позавчера

Что это?

React Bits — коллекция анимированных интерактивных компонентов для React и Next.js, с помощью которых можно создавать выразительные веб-интерфейсы. В неё входят анимации текста — например, разделение текста, эффект печатной машинки и появление при прокрутке, — а также эффекты курсора, реакции на наведение, карточки, карусели, небольшие UI-анимации и анимированные фоны на всю секцию.

Для каждого компонента есть интерактивное демо с настройками и четыре варианта: JavaScript или TypeScript, со стилями на обычном CSS или Tailwind. Компоненты можно добавить через shadcn CLI или jsrepo либо скопировать исходный код вручную. Настроенный реестр shadcn MCP помогает AI-агентам для написания кода, таким как Claude Code и Cursor, находить и добавлять компоненты.

В проект также входят бесплатные браузерные инструменты для генерации кода и изображений фонов, мокапов продуктовых снимков, логотипов с 3D-материалами, текстурных эффектов и звуков для интерфейсов. Pro — платный тариф с дополнительными компонентами, секциями страниц, шаблонами и навыками для агентов.

Ключевые возможности

  • 01Более 215 анимированных компонентов и фонов: анимации текста, интерактивные элементы, карточки и фоны.
  • 02Каждый компонент доступен на JavaScript или TypeScript, со стилями на CSS или Tailwind.
  • 03Установка через shadcn CLI или jsrepo либо копирование исходного кода напрямую.
  • 04Интеграция с AI-агентами для написания кода через реестр shadcn MCP.
  • 05Бесплатные браузерные инструменты для создания фонов, мокапов продуктов, логотипов, текстур и звуков.

Сценарии использования

  • Добавление выразительной анимации текста или эффектов появления при прокрутке на маркетинговый сайт или лендинг.
  • Создание анимированных главных секций и полноэкранных фонов в приложении на Next.js или React.
  • Подключение готовых компонентов к проекту на Tailwind с помощью AI-агента для написания кода.
  • Создание снимков продуктов, зацикленных фоновых видео или звуковых эффектов для запусков и демонстраций.

Быстрый старт

  1. 1

    Добавьте компонент с помощью shadcn CLI

    npx shadcn@latest add @react-bits/SplitText-TS-TW
  2. 2

    Или добавьте его с помощью jsrepo

    npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW

Что важно знать

  • В названии лицензии есть Commons Clause, ограничивающая продажу самого программного обеспечения. Перед коммерческим использованием прочитайте LICENSE.md.
  • В метаданных репозитория лицензия не обнаружена. Проверьте условия лицензии непосредственно в LICENSE.md.

Темы

#react#nextjs#component-library#animation#tailwind#ui-components#typescript#shadcn#3d#animations

Частые вопросы

Что такое react-bits?
Библиотека из более чем 215 бесплатных анимированных и настраиваемых компонентов и фонов для React и Next.js, которые можно установить через shadcn или jsrepo. React Bits — коллекция анимированных интерактивных компонентов для React и Next.js, с помощью которых можно создавать выразительные веб-интерфейсы. В неё входят анимации текста — например, разделение текста, эффект печатной машинки и появление при прокрутке, — а также эффекты курсора, реакции на наведение, карточки, карусели, небольшие UI-анимации и анимированные фоны на всю секцию.
react-bits можно использовать бесплатно? Какая у него лицензия?
react-bits распространяется с открытым исходным кодом под лицензией Other. Перед использованием в коммерческих продуктах проверьте условия лицензии.
react-bits всё ещё поддерживается?
Активно поддерживается. Последний коммит в react-bits — 19 окт. 2026 г..
Для чего можно использовать react-bits?
Добавление выразительной анимации текста или эффектов появления при прокрутке на маркетинговый сайт или лендинг. Создание анимированных главных секций и полноэкранных фонов в приложении на Next.js или React. Подключение готовых компонентов к проекту на Tailwind с помощью AI-агента для написания кода. Создание снимков продуктов, зацикленных фоновых видео или звуковых эффектов для запусков и демонстраций.
Как установить react-bits?
Добавьте компонент с помощью shadcn CLI: npx shadcn@latest add @react-bits/SplitText-TS-TW Или добавьте его с помощью jsrepo: npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW
Где скачать react-bits?
Исходный код и инструкции по установке — на GitHub: https://github.com/DavidHDev/react-bits

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты