---

UX Patterns for Developers

A comprehensive ecosystem for learning, building, and showcasing UX patterns with developer-focused documentation and ready-to-use components.

🏗️ The Ecosystem

UX Patterns consists of three interconnected projects:

📚 Web

Learn & Reference - Comprehensive documentation for UX patterns with best practices, accessibility guidelines, and implementation details.

🧩 Kit

Build & Install - Ready-to-use component library compatible with shadcn/ui. Copy, paste, and customize components for your projects.

🖼️ Gallery

Explore & Inspire - Real-world examples and implementations of UX patterns from popular applications.

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm 8+

Installation

# Clone the repository
git clone https://github.com/thedaviddias/ux-patterns-for-developers.git

# Install dependencies
pnpm install

# Run all projects in development mode
pnpm dev

This will start:

• Web → http://localhost:3060
• Kit → http://localhost:3061
• Gallery → http://localhost:3062

Running Individual Projects

# Run only the documentation site
pnpm dev:web

# Run only the component kit
pnpm dev:kit

# Run only the gallery
pnpm dev:gallery

📦 Project Structure

This is a monorepo managed with Turbo and pnpm workspaces:

ux-patterns-for-developers/
├── apps/
│   ├── web/        # Documentation site
│   ├── kit/        # Component library
│   └── gallery/    # Visual examples
├── packages/
│   ├── ui/         # Shared UI components
│   ├── constants/  # Shared constants
│   ├── tracking/   # Analytics utilities
│   └── ...         # Other shared packages

🛠️ Development

# Build all projects
pnpm build

# Run tests
pnpm test

# Lint and format
pnpm lint
pnpm format

✨ Contributing

We welcome contributions! Please read our Contributing Guide before submitting a pull request.

• 🐛 Report bugs
• 💡 Suggest new patterns
• 📝 Improve documentation
• 🔧 Submit pull requests

📄 Dual License

This project is available under a dual license:

1. MIT License (Non-Commercial)

• ✅ Free for personal use and non-commercial projects
• ✅ Attribution required
• ✅ Modifications and distributions allowed
• ❌ Commercial use not permitted
• View MIT License Details

2. Commercial License

• 💼 Required for commercial use
• 🏢 Suitable for businesses and commercial projects
• 🔒 Includes additional rights and support
• View Commercial License Details

---

If you find this project useful, please consider giving it a ⭐️