# Curated GitHub Repositories for UI/UX

Essential GitHub repositories for modern UI/UX development, organized by category.

---

## 🎨 UI Component Libraries

### Shadcn UI ⭐ **MOST RECOMMENDED**
- **Repo**: https://github.com/shadcn/ui
- **Stars**: 60k+
- **Language**: TypeScript
- **Stack**: React, Tailwind CSS, Radix UI
- **Why**: Copy-paste components, full control, excellent accessibility
- **Best for**: React + Tailwind projects
- **License**: MIT

### Chakra UI
- **Repo**: https://github.com/chakra-ui/chakra-ui
- **Stars**: 36k+
- **Language**: TypeScript
- **Stack**: React, Emotion (CSS-in-JS)
- **Why**: Accessible components, great DX, powerful theming
- **Best for**: React apps needing robust theming
- **License**: MIT

### Radix UI
- **Repo**: https://github.com/radix-ui/primitives
- **Stars**: 13k+
- **Language**: TypeScript
- **Stack**: React
- **Why**: Unstyled, accessible components (basis for Shadcn)
- **Best for**: Building custom design systems
- **License**: MIT

### Vuetify
- **Repo**: https://github.com/vuetifyjs/vuetify
- **Stars**: 39k+
- **Language**: TypeScript
- **Stack**: Vue.js
- **Why**: Material Design for Vue
- **Best for**: Vue projects
- **License**: MIT

### DaisyUI
- **Repo**: https://github.com/saadeghi/daisyui
- **Stars**: 30k+
- **Language**: CSS
- **Stack**: Tailwind CSS
- **Why**: Component classes for Tailwind
- **Best for**: Quick Tailwind prototypes
- **License**: MIT

### Headless UI
- **Repo**: https://github.com/tailwindlabs/headlessui
- **Stars**: 24k+
- **Language**: TypeScript
- **Stack**: React, Vue
- **Why**: Unstyled UI components by Tailwind team
- **Best for**: Tailwind projects needing accessibility
- **License**: MIT

---

## ✨ Animation Libraries

### Framer Motion ⭐
- **Repo**: https://github.com/framer/motion
- **Stars**: 22k+
- **Language**: TypeScript
- **Stack**: React
- **Why**: Production-ready animations, great DX
- **Best for**: React animations
- **License**: MIT

### GSAP
- **Repo**: https://github.com/greensock/GSAP
- **Stars**: 18k+
- **Language**: JavaScript
- **Stack**: Framework-agnostic
- **Why**: Industry standard, incredibly powerful
- **Best for**: Complex animations
- **License**: Custom (free for most uses)

### Auto Animate
- **Repo**: https://github.com/formkit/auto-animate
- **Stars**: 11k+
- **Language**: TypeScript
- **Stack**: Framework-agnostic
- **Why**: Zero-config animations
- **Best for**: Simple, automatic animations
- **License**: MIT

### React Spring
- **Repo**: https://github.com/pmndrs/react-spring
- **Stars**: 27k+
- **Language**: TypeScript
- **Stack**: React
- **Why**: Physics-based animations
- **Best for**: Fluid, natural animations
- **License**: MIT

---

## 🎨 Fancy/Premium Components

### Fancy Components (by Daniel Petho)
- **Repo**: https://github.com/danielpetho/fancy
- **Stars**: 1k+
- **Language**: TypeScript
- **Stack**: React
- **Why**: Beautiful, unique animated components
- **Best for**: Premium feel, standout designs
- **License**: MIT

### Magic UI
- **Repo**: https://github.com/magicuidesign/magicui
- **Stars**: 5k+
- **Language**: TypeScript
- **Stack**: React, Tailwind
- **Why**: Animated components, modern effects
- **Best for**: Modern, eye-catching UIs
- **License**: MIT

### Aceternity UI
- **Repo**: https://github.com/aceternity/ui
- **Stars**: 2k+
- **Language**: TypeScript
- **Stack**: React, Tailwind, Framer Motion
- **Why**: Premium, modern, animated components
- **Best for**: SaaS, portfolios
- **License**: MIT (some premium components)

---

## 🎯 Icon Libraries

### Lucide Icons ⭐ **RECOMMENDED**
- **Repo**: https://github.com/lucide-icons/lucide
- **Stars**: 8k+
- **Language**: TypeScript
- **Why**: Beautiful, consistent, many frameworks
- **Best for**: Most projects
- **License**: ISC

### Hero Icons
- **Repo**: https://github.com/tailwindlabs/heroicons
- **Stars**: 20k+
- **Language**: JavaScript
- **Why**: By Tailwind team, clean SVGs
- **Best for**: Tailwind projects
- **License**: MIT

### Phosphor Icons
- **Repo**: https://github.com/phosphor-icons/homepage
- **Stars**: 6k+
- **Language**: JavaScript
- **Why**: Multiple weights, extensive library
- **Best for**: When you need variety
- **License**: MIT

### Tabler Icons
- **Repo**: https://github.com/tabler/tabler-icons
- **Stars**: 17k+
- **Language**: JavaScript
- **Why**: 4k+ icons, consistent style
- **Best for**: Large icon needs
- **License**: MIT

---

## 🖼️ UI Patterns & Inspiration

### React Bits
- **Repo**: https://github.com/DavidHDev/react-bits
- **Stars**: 14k+
- **Language**: TypeScript
- **Why**: Curated React patterns and components
- **Best for**: Learning React patterns
- **License**: MIT

### UI Design Daily (GitHub version)
- **Repo**: https://github.com/uidesigndaily/UI-Design-Daily
- **Language**: Various
- **Why**: Daily UI designs
- **Best for**: Inspiration
- **License**: CC BY 4.0

---

## 🎨 CSS & Styling

### Tailwind CSS
- **Repo**: https://github.com/tailwindlabs/tailwindcss
- **Stars**: 78k+
- **Language**: JavaScript
- **Why**: Utility-first CSS framework
- **Best for**: Modern CSS approach
- **License**: MIT

### Styled Components
- **Repo**: https://github.com/styled-components/styled-components
- **Stars**: 40k+
- **Language**: JavaScript
- **Why**: CSS-in-JS for React
- **Best for**: Component-scoped styles
- **License**: MIT

### Emotion
- **Repo**: https://github.com/emotion-js/emotion
- **Stars**: 17k+
- **Language**: JavaScript
- **Why**: Performant CSS-in-JS
- **Best for**: React styling
- **License**: MIT

### UnoCSS
- **Repo**: https://github.com/unocss/unocss
- **Stars**: 15k+
- **Language**: TypeScript
- **Why**: Instant on-demand atomic CSS
- **Best for**: Performance-focused projects
- **License**: MIT

---

## 🎭 Design Systems

### Semantic UI
- **Repo**: https://github.com/Semantic-Org/Semantic-UI
- **Stars**: 51k+
- **Language**: JavaScript
- **Why**: Human-friendly HTML, comprehensive
- **Best for**: Learning design system structure
- **License**: MIT

### Material UI (MUI)
- **Repo**: https://github.com/mui/material-ui
- **Stars**: 91k+
- **Language**: TypeScript
- **Stack**: React
- **Why**: Material Design for React
- **Best for**: Enterprise React apps
- **License**: MIT

### Ant Design
- **Repo**: https://github.com/ant-design/ant-design
- **Stars**: 90k+
- **Language**: TypeScript
- **Stack**: React
- **Why**: Enterprise-level design system
- **Best for**: Admin dashboards, enterprise
- **License**: MIT

### Mantine
- **Repo**: https://github.com/mantinedev/mantine
- **Stars**: 24k+
- **Language**: TypeScript
- **Stack**: React
- **Why**: Fully featured, great hooks
- **Best for**: React apps needing everything
- **License**: MIT

---

## 🎨 Gradio (AI/ML UIs)

### Gradio
- **Repo**: https://github.com/gradio-app/gradio
- **Stars**: 29k+
- **Language**: Python
- **Why**: Build ML/AI interfaces quickly
- **Best for**: AI demos, ML applications
- **License**: Apache 2.0

---

## 🔧 Development Tools

### React Developer Tools
- **Repo**: https://github.com/facebook/react-devtools
- **Stars**: 14k+
- **Language**: JavaScript
- **Why**: Debug React components
- **Best for**: React development

### Storybook
- **Repo**: https://github.com/storybookjs/storybook
- **Stars**: 82k+
- **Language**: TypeScript
- **Why**: Component development environment
- **Best for**: Building component libraries
- **License**: MIT

### Vite
- **Repo**: https://github.com/vitejs/vite
- **Stars**: 64k+
- **Language**: TypeScript
- **Why**: Lightning fast build tool
- **Best for**: Modern web development
- **License**: MIT

### TurboRepo
- **Repo**: https://github.com/vercel/turbo
- **Stars**: 24k+
- **Language**: Rust/TypeScript
- **Why**: High-performance monorepos
- **Best for**: Multi-project workspaces
- **License**: MIT

---

## 📱 React Native UI

### React Native Paper
- **Repo**: https://github.com/callstack/react-native-paper
- **Stars**: 12k+
- **Language**: TypeScript
- **Why**: Material Design for React Native
- **Best for**: React Native apps
- **License**: MIT

### NativeBase
- **Repo**: https://github.com/GeekyAnts/NativeBase
- **Stars**: 20k+
- **Language**: TypeScript
- **Why**: Universal components (web + mobile)
- **Best for**: Cross-platform apps
- **License**: MIT

---

## 🎯 Specialized Libraries

### React Hook Form
- **Repo**: https://github.com/react-hook-form/react-hook-form
- **Stars**: 39k+
- **Language**: TypeScript
- **Why**: Performant form library
- **Best for**: Complex forms
- **License**: MIT

### Recharts
- **Repo**: https://github.com/recharts/recharts
- **Stars**: 22k+
- **Language**: JavaScript
- **Why**: Composable charting library
- **Best for**: Data visualization in React
- **License**: MIT

### React Table
- **Repo**: https://github.com/TanStack/table
- **Stars**: 24k+
- **Language**: TypeScript
- **Why**: Headless table library
- **Best for**: Complex data tables
- **License**: MIT

### React Dropzone
- **Repo**: https://github.com/react-dropzone/react-dropzone
- **Stars**: 10k+
- **Language**: JavaScript
- **Why**: File upload with drag & drop
- **Best for**: File uploads
- **License**: MIT

---

## 🏆 Top Picks by Use Case

### Building a SaaS Product
1. Shadcn UI (components)
2. Framer Motion (animations)
3. Recharts (analytics)
4. React Hook Form (forms)
5. Lucide Icons (icons)

### Building a Portfolio
1. Aceternity UI (premium feel)
2. Framer Motion (smooth animations)
3. Fancy Components (unique elements)
4. Lucide Icons (icons)

### Building an Admin Dashboard
1. Shadcn UI (components)
2. React Table (data tables)
3. Recharts (charts)
4. Lucide Icons (icons)
5. React Hook Form (forms)

### Building a Marketing Site
1. Tailwind CSS (styling)
2. Framer Motion (animations)
3. Shadcn UI (components)
4. Hero Icons (icons)

### Building a Mobile App (React Native)
1. NativeBase (components)
2. React Native Paper (Material Design)
3. React Navigation (routing)

---

## 🔖 How to Explore

### Discovery Workflow
1. **Browse by topic** above
2. **Check stars & activity** (recent commits = maintained)
3. **Read the README** (quality indicator)
4. **Try the demo/docs** (good docs = good library)
5. **Check issues** (responsive maintainers?)
6. **Look at code** (readable, well-structured?)

### Red Flags
- ❌ No commits in 1+ year
- ❌ Many unresolved issues
- ❌ Poor documentation
- ❌ No TypeScript support (if you use TS)
- ❌ Huge bundle size
- ❌ Breaking changes frequently

### Green Flags
- ✅ Active development
- ✅ Responsive maintainers
- ✅ Good documentation
- ✅ TypeScript support
- ✅ Good test coverage
- ✅ Stable API

---

## 📚 Learning from Repos

**What to study in these repos:**

1. **Component structure** - How are components organized?
2. **API design** - How are props/APIs designed?
3. **Accessibility** - How is a11y implemented?
4. **Styling approach** - CSS-in-JS? Tailwind? Modules?
5. **Testing** - What testing strategies are used?
6. **Documentation** - How are docs written?
7. **TypeScript usage** - How are types defined?

---

## 🌟 Contributing

Many of these are open source and welcome contributions:

**Good first contribution ideas:**
- Documentation improvements
- Adding examples
- Fixing typos
- Adding tests
- Reporting bugs (with reproductions)

**Before contributing:**
1. Read CONTRIBUTING.md
2. Check existing issues/PRs
3. Start small (docs, tests)
4. Follow the code style
5. Write clear commit messages

---

**Explore these repos and level up your UI/UX skills!** 🚀

*Star count as of 2024. Check GitHub for current stats.*
