About this project

Roux UI is a Louisiana-inspired component platform where developers discover, install, and contribute custom React UI components — think shadcn/ui but community-driven and installable via npm, bun, yarn, or pnpm. Components are built with Framer Motion and GSAP, many free with a subscription tier for premium ones. An AI-powered component builder lets users generate React components by text prompt or voice using OpenAI, Anthropic, and Gemini. Developers can upload their own components, which trigger a Vercel redeploy on admin approval and auto-snapshot the component preview for social sharing. Features a like and rating system, real-time chat via Ably, interactive coding courses with Monaco Editor challenges, PWA support with iOS push notifications, and full SEO optimization.

Technology & Features

Next.js (App Router)
TypeScript
Framer Motion
Prisma
PostgreSQL
GraphQL
Tailwind CSS v4
GSAP
Prisma ORM
PostgreSQL (Neon)
NextAuth v5
Sandpack
TanStack Query
Ably
UploadThing
Zustand
React Hook Form
Zod
Resend
Vercel Analytics
web-push

# package.json

{
  "dependencies": {
    "@auth/prisma-adapter": "^2.11.1",
    "@codesandbox/sandpack-react": "^2.20.0",
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@emoji-mart/data": "^1.1.1",
    "@emoji-mart/react": "^1.1.1",
    "@hookform/resolvers": "^5.2.2",
    "@mdx-js/loader": "^3.1.1",
    "@mdx-js/react": "^3.1.1",
    "@monaco-editor/loader": "^1.6.1",
    "@monaco-editor/react": "^4.7.0",
    "@neondatabase/serverless": "^1.0.2",
    "@next/mdx": "^16.0.2",
    "@nivo/bar": "^0.99.0",
    "@nivo/core": "^0.99.0",
    "@nivo/line": "^0.99.0",
    "@nivo/pie": "^0.99.0",
    "@prisma/adapter-neon": "^7.1.0",
    "@prisma/client": "^6.19.0",
    "@radix-ui/react-popover": "^1.1.15",
    "@tailwindcss/postcss": "^4",
    "@tanstack/ai": "^0.4.2",
    "@tanstack/ai-anthropic": "^0.4.2",
    "@tanstack/ai-gemini": "^0.4.1",
    "@tanstack/ai-ollama": "^0.4.0",
    "@tanstack/ai-openai": "^0.4.0",
    "@tanstack/react-query": "^5.90.12",
    "@tanstack/react-query-devtools": "^5.91.1",
    "@types/node": "^20",
    "@types/nodemailer": "^7.0.4",
    "@types/react": "^19.2.7",
    "@types/react-dom": "^19.2.3",
    "@types/react-syntax-highlighter": "^15.5.13",
    "@types/ua-parser-js": "^0.7.39",
    "@types/web-push": "^3.6.3",
    "@typescript-eslint/eslint-plugin": "^8.46.4",
    "@typescript-eslint/parser": "^8.46.4",
    "@typescript-eslint/utils": "^8.46.4",
    "@uploadthing/react": "^7.3.3",
    "@vercel/analytics": "^1.6.1",
    "ably": "^2.14.0",
    "animate.css": "^4.1.1",
    "clsx": "^2.1.1",
    "concurrently": "^9.2.1",
    "date-fns": "^4.1.0",
    "dayzed": "^3.2.3",
    "emoji-mart": "^5.6.0",
    "eslint": "^9",
    "eslint-config-next": "^16.0.8",
    "framer-motion": "^12.23.24",
    "html-to-image": "^1.11.13",
    "install": "^0.13.0",
    "lucide-react": "^0.552.0",
    "monaco-editor": "^0.54.0",
    "motion": "^12.23.24",
    "next": "^16.0.8",
    "next-auth": "^5.0.0-beta.30",
    "next-mdx-remote": "^6.0.0",
    "next-themes": "^0.4.6",
    "next13-progressbar": "^1.2.2",
    "nodemailer": "^7.0.12",
    "prism-react-renderer": "^2.4.1",
    "prisma": "^6.19.0",
    "qrcode-terminal": "^0.12.0",
    "react": "19.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "19.2.0",
    "react-easy-crop": "^5.5.6",
    "react-google-recaptcha-v3": "^1.11.0",
    "react-hook-form": "^7.66.0",
    "react-icons": "^5.5.0",
    "react-spinners": "^0.17.0",
    "react-syntax-highlighter": "^16.1.0",
    "react-use-measure": "^2.1.7",
    "resend": "^6.4.2",
    "server-only": "^0.0.1",
    "sucrase": "^3.35.1",
    "tailwind-merge": "^3.3.1",
    "tailwindcss": "^4",
    "tailwindcss-animate": "^1.0.7",
    "tsx": "^4.20.6",
    "typescript": "^5",
    "ua-parser-js": "^2.0.7",
    "uploadthing": "^7.7.4",
    "web-push": "^3.6.7",
    "zod": "^4.1.12",
    "zustand": "^5.0.8"
  }
}