Skip to content

An open source collection of animated, interactive & fully customizable React components for building stunning, memorable user interfaces.

Notifications You must be signed in to change notification settings

DavidHDev/react-bits

Repository files navigation

Welcome to React Bits, the go-to open source library for high quality animated React components!


react-bits logo

About

React Bits is a library of animated and interactive React components designed to streamline UI development and simplify your workflow. From simple text animations to complex 3D components, React Bits provides everything you need to create unique and impactful websites.

The project embraces simplicity as its core philosophy—it maintains minimal dependencies and offers code that integrates seamlessly into your projects. Components often rely on zero dependencies or in some cases, a single animation library, for smooth effects and cleaner code, leaving plenty of room for customization.

Key Features

  • A variety of animated text and UI components
  • Customizable and lightweight with minimal dependencies
  • Designed to integrate seamlessly with any React project

Links

Installing Components Via CLI - jsrepo

One-Time Installation

npx jsrepo add github/davidhdev/react-bits/<CategoryName>/<ComponentName>

# Example: npx jsrepo add github/davidhdev/react-bits/TextAnimations/SplitText

One-Time Installation (Tailwind)

npx jsrepo add github/davidhdev/react-bits/Tailwind<CategoryName>/<ComponentName>

# Example: npx jsrepo add github/davidhdev/react-bits/TailwindTextAnimations/SplitText

Full CLI Setup

# 1. Initialize a config file for your project
npx jsrepo init --project --repos github/davidhdev/react-bits

# 2. Browse & add components from the list
npx jsrepo add

# 3. Or just add a specific component
npx jsrepo add <CategoryName>/<ComponentName>

# Optionally, install jsrepo globally to remove 'npx' from the commands
npm i -g jsrepo

Running The Project Locally

Clone The Project (fork for contributions)

git clone https://github.com/DavidHDev/react-bits.git .

Install Dependencies

npm install

Start The Development Server

npm run dev

Contributing

This project is always open to improvements and contributions, you can check the Open Issues if you want to contribute, and it's also possible to request to add your own improvements/ideas using the Feature Request template. Before contributing, please read the Contribution Guide and make sure to respect the standards! Thank you for your time!

CONTENTS

TEXT ANIMATIONS

ANIMATIONS

COMPONENTS

BACKGROUNDS

Maintainers

David Haz

License

MIT