React UI Libraries Component Collection 🎨

A comprehensive collection of UI component libraries and animation libraries for React/Next.js projects with automated installation scripts. Choose your preferred stack and get started in seconds.

📖 Table of Contents

✨ Overview
🎯 Quick Start
📦 UI Component Libraries
🎬 Animation Libraries
🚀 Installation
📂 Repository Structure
🔧 Usage Examples
📊 Comparison Guide
🤝 Contributing

✨ Overview

This repository provides automated installation scripts and starter configurations for the most popular UI component libraries and animation libraries in the React ecosystem. Each library includes:

✅ Automated installation scripts (Windows & Unix)
✅ Pre-configured setup files
✅ Basic usage examples
✅ TypeScript support
✅ Next.js integration
✅ Tailwind CSS compatibility (where applicable)

🎯 Quick Start

Clone Repository

git clone https://github.com/cloud-premises/react-ui-lib-components.git
cd ui-libraries

Install a UI Library

On Windows:

cd shadcn
install.bat

On Linux/Mac:

cd shadcn
chmod +x install.sh
./install.sh

Install an Animation Library

On Windows:

cd framer-motion
install.bat

On Linux/Mac:

cd framer-motion
chmod +x install.sh
./install.sh

📦 UI Component Libraries

1. shadcn/ui ⭐ Recommended

Directory: shadcn/

Beautiful, accessible components built on Radix UI with Tailwind CSS.

Features:

🎨 Customizable via Tailwind
♿ Fully accessible (WCAG 2.1)
🎯 Copy-paste components
📦 No npm package dependency
🎨 40+ components

Best For: Modern web apps, SaaS products, landing pages

Installation:

cd shadcn && ./install.sh

2. Radix UI

Directory: radix-ui/

Unstyled, accessible component primitives.

Features:

♿ WAI-ARIA compliant
🎨 Fully customizable styling
🔧 Composable primitives
⚡ Lightweight

Best For: Custom design systems, full control over styling

Installation:

cd radix-ui && ./install.sh

3. Material UI (MUI)

Directory: mui/

Google's Material Design implementation for React.

Features:

🎨 Material Design 3
📦 100+ components
🎨 Theming system
📱 Responsive by default
🌍 Internationalization

Best For: Enterprise apps, admin dashboards, Google-style interfaces

Installation:

cd mui && ./install.sh

4. Ant Design

Directory: ant-design/

Enterprise-grade UI design language and React library.

Features:

🏢 Enterprise-ready
📦 50+ components
🌐 i18n support
🎨 Customizable themes
📊 Data visualization

Best For: Enterprise applications, back-office systems, data-heavy apps

Installation:

cd ant-design && ./install.sh

5. Chakra UI

Directory: chakra-ui/

Simple, modular, and accessible component library.

Features:

♿ Accessibility first
🎨 Style props
🌙 Dark mode built-in
📦 50+ components
⚡ Fast development

Best For: Quick prototypes, modern web apps, developer-friendly projects

Installation:

cd chakra-ui && ./install.sh

6. NextUI

Directory: nextui/

Beautiful, fast, and modern React UI library for Next.js.

Features:

⚡ Built for Next.js
🎨 Beautiful defaults
🌙 Dark mode
📦 30+ components
🎯 Zero config

Best For: Next.js projects, modern web apps, rapid development

Installation:

cd nextui && ./install.sh

7. Mantine

Directory: maintine/

Fully featured React components library.

Features:

📦 100+ hooks
🎨 120+ components
🌙 Dark theme
📱 Responsive
🎯 Form management

Best For: Full-featured applications, forms-heavy apps, data dashboards

Installation:

cd maintine && ./install.sh

8. Headless UI

Directory: headless-ui/

Unstyled, fully accessible UI components by Tailwind Labs.

Features:

♿ Fully accessible
🎨 100% unstyled
⚡ Lightweight
🔧 Tailwind optimized

Best For: Custom designs with Tailwind CSS, full styling control

Installation:

cd headless-ui && ./install.sh

9. Fluent UI

Directory: fluent-ui/

Microsoft's Fluent Design System for React.

Features:

🏢 Microsoft design language
📦 Office-style components
🎨 Fluent Design 2
♿ Accessible

Best For: Microsoft ecosystem integration, enterprise apps, Office-style UIs

Installation:

cd fluent-ui && ./install.sh

10. Blueprint

Directory: blueprint/

React UI toolkit for building complex data-dense web interfaces.

Features:

📊 Data-dense UIs
🏢 Desktop-class applications
📦 50+ components
🎨 Professional aesthetic

Best For: Desktop apps, data visualization, analytics dashboards

Installation:

cd blueprint && ./install.sh

11. Evergreen

Directory: everygreen/

React UI framework by Segment.

Features:

🌲 30+ components
🎨 Clean design
📦 Lightweight
🏢 Production-ready

Best For: Business applications, internal tools, admin panels

Installation:

cd everygreen && ./install.sh

12. Flowbite

Directory: flow-bite/

Tailwind CSS component library.

Features:

🎨 Built on Tailwind
📦 Figma design system
🌙 Dark mode
⚡ Fast integration

Best For: Tailwind projects, marketing sites, quick prototypes

Installation:

cd flow-bite && ./install.sh

13. Grommet

Directory: gromeet/

Mobile-first, accessible React components.

Features:

📱 Mobile-first
♿ WCAG 2.1 AA
🎨 HPE design system
🌍 Internationalization

Best For: Responsive apps, accessibility-focused projects, HPE-style designs

Installation:

cd gromeet && ./install.sh

14. Semantic UI React

Directory: semantic-ui/

Official React integration for Semantic UI.

Features:

🎨 Human-friendly HTML
📦 jQuery-free
🎯 Intuitive naming
🌍 50+ UI elements

Best For: Rapid prototyping, semantic HTML lovers, Bootstrap alternatives

Installation:

cd semantic-ui && ./install.sh

🎬 Animation Libraries

1. Framer Motion ⭐ Recommended

Directory: framer-motion/

Production-ready animation library for React.

Features:

🎭 Declarative animations
🎯 Gesture support
🔄 Layout animations
📱 SVG support
⚡ 60fps performance

Best For: Modern web apps, interactive UIs, smooth transitions

Installation:

cd framer-motion && ./install.sh

Quick Example:

import { motion } from 'framer-motion'

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
/>

2. GSAP (GreenSock)

Directory: gsap/

Professional-grade JavaScript animation platform.

Features:

🎬 Timeline-based animations
🎯 ScrollTrigger plugin
⚡ Best performance
🌟 Rich plugin ecosystem

Best For: Complex animations, scroll animations, professional projects

Installation:

cd gsap && ./install.sh

3. React Spring

Directory: react-spring/

Spring-physics based animation library.

Features:

🌊 Natural spring physics
⚡ Performance optimized
🎯 Hook-based API
🔄 Interpolation

Best For: Physics-based animations, natural motion, fluid UIs

Installation:

cd react-spring && ./install.sh

4. Anime.js

Directory: anime/

Lightweight JavaScript animation library.

Features:

🎨 CSS, SVG, DOM animations
🎯 Staggering effects
📦 Lightweight (6KB)
🔧 Timeline controls

Best For: Lightweight projects, complex sequences, SVG animations

Installation:

cd anime && ./install.sh

5. Lottie React

Directory: lottie-react/

Airbnb's animation library for JSON-based animations.

Features:

🎨 After Effects export
📦 Vector animations
🌐 Cross-platform
⚡ Small file sizes

Best For: Designer-created animations, vector graphics, micro-interactions

Installation:

cd lottie-react && ./install.sh

6. React Motion

Directory: react-motion/

Spring-based animation library.

Features:

🌊 Spring animations
🎯 Predictable API
🔄 Stagger effects
📐 Physics-based

Best For: Natural motion, spring effects, smooth transitions

Installation:

cd react-motion && ./install.sh

7. React Transition Group

Directory: react-transition-group/

Exposes transition stages for managing component states.

Features:

🔄 Enter/exit transitions
🎯 Simple API
📦 Lightweight
✅ Official React library

Best For: Simple transitions, mount/unmount animations, list animations

Installation:

cd react-transition-group && ./install.sh

8. React Bits

Directory: react-bits/

Collection of React animation patterns and components.

Features:

🎨 Pre-built patterns
📦 Copy-paste ready
🎯 Best practices
⚡ Performance focused

Best For: Learning animations, quick implementations, pattern library

Installation:

cd react-bits && ./install.sh

9. tsParticles

Directory: ts-particles/

Lightweight particles animation library.

Features:

✨ Particle effects
🎨 Highly customizable
📦 TypeScript native
🌐 Canvas & WebGL

Best For: Background effects, particle systems, hero sections

Installation:

cd ts-particles && ./install.sh

🚀 Installation

Prerequisites

Node.js 18+ 
npm, pnpm, or yarn
Git

General Installation Steps

Clone the repository:

git clone https://github.com/cloud-premises/react-ui-lib-components.git
cd ui-libraries

Navigate to desired library:

cd <library-name>

Run installation script:

Windows:

install.bat

Linux/Mac:

chmod +x install.sh
./install.sh

Follow on-screen instructions

Each library includes:

Package installation
Configuration setup
Example components
Documentation links

📂 Repository Structure

ui-libraries/
│
├── README.md
├── LICENSE
├── .gitignore
│
├── UI_COMPONENT_LIBRARIES/
│   ├── shadcn/
│   │   ├── install.sh
│   │   ├── install.bat
│   │   ├── README.md
│   │   ├── components.json
│   │   ├── tailwind.config.js
│   │   └── examples/
│   │
│   ├── radix-ui/
│   │   ├── install.sh
│   │   ├── install.bat
│   │   ├── README.md
│   │   └── examples/
│   │
│   ├── mui/
│   │   ├── install.sh
│   │   ├── install.bat
│   │   ├── README.md
│   │   ├── theme.ts
│   │   └── examples/
│   │
│   ├── ant-design/
│   ├── chakra-ui/
│   ├── nextui/
│   ├── maintine/
│   ├── headless-ui/
│   ├── fluent-ui/
│   ├── blueprint/
│   ├── everygreen/
│   ├── flow-bite/
│   ├── gromeet/
│   └── semantic-ui/
│
└── ANIMATION_LIBRARIES/
    ├── framer-motion/
    │   ├── install.sh
    │   ├── install.bat
    │   ├── README.md
    │   └── examples/
    │       ├── basic-animations.tsx
    │       ├── gestures.tsx
    │       ├── layout-animations.tsx
    │       └── scroll-animations.tsx
    │
    ├── gsap/
    │   ├── install.sh
    │   ├── install.bat
    │   ├── README.md
    │   └── examples/
    │
    ├── react-spring/
    ├── anime/
    ├── lottie-react/
    ├── react-motion/
    ├── react-transition-group/
    ├── react-bits/
    └── ts-particles/

🔧 Usage Examples

Example: shadcn/ui + Framer Motion

# Install shadcn/ui
cd shadcn && ./install.sh && cd ..

# Install Framer Motion
cd framer-motion && ./install.sh && cd ..

# Now use them together

// app/page.tsx
import { Button } from '@/components/ui/button'
import { motion } from 'framer-motion'

export default function Home() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      <Button>Animated Button</Button>
    </motion.div>
  )
}

📊 Comparison Guide

UI Libraries Comparison

Library	Bundle Size	Components	Accessibility	Customization	Learning Curve
shadcn/ui	⭐⭐⭐⭐⭐	40+	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
Radix UI	⭐⭐⭐⭐⭐	25+	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
MUI	⭐⭐⭐	100+	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
Ant Design	⭐⭐⭐	50+	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
Chakra UI	⭐⭐⭐⭐	50+	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
NextUI	⭐⭐⭐⭐	30+	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐

Animation Libraries Comparison

Library	Bundle Size	Ease of Use	Performance	Features	Use Case
Framer Motion	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	General purpose
GSAP	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Professional
React Spring	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	Physics-based
Anime.js	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	Lightweight
Lottie	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	Designer collab

🤝 Contributing

Contributions are welcome! Please read our CONTRIBUTING.md for details.

How to Contribute

Fork the repository
Create a feature branch
Add new library setup scripts
Test installation scripts
Submit a pull request

📜 License

MIT License - see LICENSE file for details

🌟 Star History

If you find this repository helpful, please consider giving it a star! ⭐

📞 Support

Issues: GitHub Issues
Discussions: GitHub Discussions
Documentation: Each library folder contains detailed README

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
animation-lib		animation-lib
ui-lib		ui-lib
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
COOKIE_POLICY.md		COOKIE_POLICY.md
Dockerfile		Dockerfile
PRIVACY_POLICY.md		PRIVACY_POLICY.md
README.md		README.md
SECURITY		SECURITY
TERMS.md		TERMS.md
TERMS_OF_SERVICE.md		TERMS_OF_SERVICE.md
docker-compose.yml		docker-compose.yml
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
ui-libraries-install.bat		ui-libraries-install.bat
ui-libraries-install.sh		ui-libraries-install.sh

Cloud-Premises/react-ui-lib-components

Folders and files

Latest commit

History

Repository files navigation

React UI Libraries Component Collection 🎨

📖 Table of Contents

✨ Overview

🎯 Quick Start

Clone Repository

Install a UI Library

Install an Animation Library

📦 UI Component Libraries

1. shadcn/ui ⭐ Recommended

2. Radix UI

3. Material UI (MUI)

4. Ant Design

5. Chakra UI

6. NextUI

7. Mantine

8. Headless UI

9. Fluent UI

10. Blueprint

11. Evergreen

12. Flowbite

13. Grommet

14. Semantic UI React

🎬 Animation Libraries

1. Framer Motion ⭐ Recommended

2. GSAP (GreenSock)

3. React Spring

4. Anime.js

5. Lottie React

6. React Motion

7. React Transition Group

8. React Bits

9. tsParticles

🚀 Installation

Prerequisites

General Installation Steps

📂 Repository Structure

🔧 Usage Examples

Example: shadcn/ui + Framer Motion

📊 Comparison Guide

UI Libraries Comparison

Animation Libraries Comparison

🤝 Contributing

How to Contribute

📜 License

🌟 Star History

📞 Support

About

Topics

Resources

Code of conduct

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

Packages