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:

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.

📄 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 ⭐️