49.5K ·GitHub
What is this?
React Bits is an open-source library of animated, interactive React UI components for building eye-catching websites - 165+ ready-made components covering text animations, backgrounds and UI elements.
React Bits is an open-source library of animated, interactive React UI components for building eye-catching websites - 165+ ready-made components covering text animations, backgrounds and UI elements.Is this a framework or just drop-in components?It is a component library, not a framework - you pick individual components and add them to any existing React project. Each one comes in 4 variants (JS-CSS, JS-TW, TS-CSS, TS-TW) to match your stack.
It is a component library, not a framework - you pick individual components and add them to any existing React project. Each one comes in 4 variants (JS-CSS, JS-TW, TS-CSS, TS-TW) to match your stack.How do I add a component to my project?Install it with the shadcn or jsrepo CLI straight from the component's page, or just copy the code manually after choosing your preferred language/styling combo.
Install it with the shadcn or jsrepo CLI straight from the component's page, or just copy the code manually after choosing your preferred language/styling combo.Do I need any extra libraries to use the animations?Most components are lightweight with minimal dependencies, but 3D and physics-based ones pull in Three.js packages like @react-three/fiber, @react-three/drei and @react-three/rapier, and some effects use GSAP.
Most components are lightweight with minimal dependencies, but 3D and physics-based ones pull in Three.js packages like @react-three/fiber, @react-three/drei and @react-three/rapier, and some effects use GSAP.What are the license terms?React Bits is licensed under MIT plus the Commons Clause, so it's free for personal and commercial use but the clause restricts selling the library itself as a service.
React Bits is licensed under MIT plus the Commons Clause, so it's free for personal and commercial use but the clause restricts selling the library itself as a service.What are the Background Studio, Shape Magic and Texture Lab tools?They're free companion web tools: Background Studio lets you customize animated backgrounds and export as video, image or code; Shape Magic builds rounded-corner shape transitions exportable as SVG, React or clip-path; and Texture Lab applies 20+ effects like noise, dithering and ASCII to images and videos.
They're free companion web tools: Background Studio lets you customize animated backgrounds and export as video, image or code; Shape Magic builds rounded-corner shape transitions exportable as SVG, React or clip-path; and Texture Lab applies 20+ effects like noise, dithering and ASCII to images and videos.Is React Bits available for frameworks other than React?Yes, there are official community ports for Vue.js (vue-bits.dev) and Svelte (sveltebits.xyz).
Yes, there are official community ports for Vue.js (vue-bits.dev) and Svelte (sveltebits.xyz).Where do the component ideas come from?React Bits sometimes draws inspiration from publicly available code examples, rewriting them into full customizable JS/TS/CSS/Tailwind components and crediting original authors if they ask.
React Bits sometimes draws inspiration from publicly available code examples, rewriting them into full customizable JS/TS/CSS/Tailwind components and crediting original authors if they ask.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