React Templates - React

The shadcn Theme Editor is a must-have developer tool that provides an intuitive visual interface for customizing shadcn/ui color themes without manually editing CSS variables or converting between color formats. Built with Next.js, React, TypeScript, and Tailwind CSS, this component allows developers and designers to interactively adjust all theme tokens, preview changes in real-time across light and dark modes, and export ready-to-use CSS configurations. The editor features interactive color pickers for all shadcn/ui theme tokens including background, foreground, primary, secondary, accent, destructive, and border colors, live preview showing how components look with the selected theme applied, automatic HSL to CSS variable conversion eliminating manual color format calculations, one-click copying of generated CSS for immediate integration into projects, preset theme templates to jumpstart customization from popular color schemes, and accessibility contrast checking to ensure color combinations meet WCAG standards. The interface organizes theme tokens by their semantic purpose, making it clear which colors affect buttons versus backgrounds versus text, helping developers understand the shadcn/ui theming system while customizing it. This tool is invaluable for designers creating custom brand themes without CSS expertise, developers building white-label applications requiring multiple tenant-specific themes, teams experimenting with color palettes before committing to final designs, projects needing to match precise brand guidelines with exact color control, and anyone frustrated with manually converting hex colors to the HSL format required by shadcn/ui. The Theme Editor can be installed as a dev dependency via npm or integrated using the Scaflo CLI, bridging the gap between visual design and technical implementation to make theme customization accessible and efficient.

Luro AI is a stunning, modern social media marketing platform landing page that showcases next-generation SaaS design with AI-powered features for streamlining social media management. Built with Next.js, TypeScript, Tailwind CSS, and a combination of premium UI libraries including shadcn/ui, Magic UI, and Aceternity UI, this project demonstrates how to create visually impressive marketing websites with smooth animations, interactive components, and professional design patterns. The platform features real-time social media performance tracking across multiple channels, engagement rate calculations and analytics visualization using Recharts, audience growth insights with trend analysis, custom report generation for stakeholder presentations, ROI tracking and analysis for marketing campaigns, and comprehensive data visualization capabilities powered by React charts. The tech stack includes Prisma ORM with MongoDB for flexible data modeling, Clerk authentication for user management, React Hook Form for validated input handling, and Framer Motion for fluid animations and micro-interactions that enhance user experience. The design emphasizes clean layouts with strategic use of whitespace, glassmorphism effects and modern gradient backgrounds, responsive components that adapt beautifully to all screen sizes, and accessibility-first patterns ensuring inclusive user experiences. This project is perfect for developers building SaaS marketing pages that need to impress investors and customers, learning how to combine multiple UI libraries cohesively, studying modern design trends in AI and analytics platforms, creating portfolio pieces that demonstrate frontend expertise, and understanding how to implement complex data visualizations in React. Luro AI serves as an excellent reference for contemporary SaaS landing page design, showing how to balance aesthetics with functionality.

Frontend Nav is a curated navigation website designed to collect, organize, and showcase high-quality frontend development resources from both domestic and international sources, making it easy for developers to discover essential tools, libraries, tutorials, and communities. Built with Next.js 13, TypeScript, Radix UI components, Tailwind CSS, NextAuth.js for authentication, Prisma ORM with MySQL on PlanetScale, and Puppeteer for automated screenshot generation, this project demonstrates modern web application development while solving a real problem: the overwhelming fragmentation of frontend resources across the internet. The platform features automated webpage information capture using Puppeteer to extract metadata, titles, and descriptions, shareable website cards with screenshots for visual recognition, user authentication allowing developers to save their personal collections, organized categorization of resources by topic, framework, or use case, dark mode support for comfortable browsing in different environments, and one-click deployment to Vercel for easy hosting. Inspired by the Taxonomy project, Frontend Nav emphasizes clean data presentation, intuitive navigation, and rapid resource discovery. The application uses MySQL hosted on PlanetScale for scalable database management, Prisma for type-safe database queries, and NextAuth.js for flexible authentication supporting multiple providers. This project is valuable for developers building resource directories or curated link collections, learning modern full-stack Next.js development patterns, studying how to implement web scraping with Puppeteer for metadata extraction, creating personal knowledge bases or bookmark managers, and understanding how to build CRUD applications with authentication and database integration. Frontend Nav serves both as a practical tool for organizing frontend resources and as an educational codebase demonstrating production-ready Next.js architecture.

Jetpack is a comprehensive, production-ready Next.js 14 starter template that eliminates weeks of configuration by providing a fully integrated stack with Bun, shadcn/ui, TypeScript, Supabase, Drizzle ORM, Docker, Clerk authentication, and Resend email, perfect for launching modern web applications rapidly. Unlike minimal starters, Jetpack provides opinionated, battle-tested configurations that work together seamlessly, allowing developers to focus on building features rather than debugging integration issues between different technologies. The template includes Supabase for PostgreSQL database hosting with real-time capabilities, Drizzle ORM for type-safe database queries and migrations, Clerk for comprehensive user authentication and management, shadcn/ui and Tailwind CSS for beautiful, accessible components, Zod validation for runtime type checking across forms and APIs, Docker containerization for consistent development and deployment environments, GitHub Actions CI configured for automated testing and deployment, and Resend integration for transactional email delivery. The codebase demonstrates proper Next.js 14 app router patterns, environment variable management with validation, database schema design and migration workflows, and authentication flows including protected routes and user sessions. Jetpack's roadmap includes a planned "Pro" version with Stripe checkout integration, advanced user management features, admin dashboards, notification systems, and LLM integrations, showing the template's extensibility. This starter is invaluable for developers building SaaS products who want to skip months of boilerplate setup, teams establishing consistent architecture patterns across multiple projects, indie hackers launching MVPs who need to move fast with reliable foundations, and anyone learning modern full-stack development with current best practices. Jetpack represents the stack you'd build after launching several products and learning what actually matters.

The shadcn Calendar Heatmap is a modern, sophisticated alternative to primitive React heatmap libraries, providing a GitHub-style contribution calendar visualization built with Next.js, TypeScript, shadcn/ui components, and Tailwind CSS. Designed to display temporal data patterns in an intuitive, visually appealing format, this component transforms activity data into color-coded calendar grids that make it easy to identify trends, gaps, and patterns at a glance. The heatmap features a year-view calendar layout with weekly rows showing activity intensity through color gradients, customizable color schemes to match different themes and data types, tooltip displays showing exact values and dates on hover, responsive design that adapts calendar density to screen sizes, TypeScript support ensuring type safety for data inputs, integration with shadcn/ui's theming system for consistent styling, and performance optimizations for rendering large datasets efficiently. Unlike basic heatmap solutions that offer limited customization or poor mobile experiences, this component provides the flexibility and polish expected in modern applications. Use cases include displaying user contribution history similar to GitHub's activity graph, visualizing fitness or habit tracking data across months or years, showing sales or revenue patterns to identify seasonal trends, tracking content publication frequency for blogs or social media, monitoring system uptime or error rates in DevOps dashboards, and presenting any time-series data where visual pattern recognition is valuable. The component's GitHub-inspired design is immediately familiar to developers while being flexible enough for diverse data visualization needs. Built with TypeScript throughout, it provides excellent developer experience with autocomplete and type checking, making integration smooth and reducing runtime errors.

Chef Genie is an AI-powered recipe generation application that leverages OpenAI's GPT 3.5 Turbo to create personalized recipes based on user preferences, dietary restrictions, and available ingredients. Built with Next.js 14 Server Actions, Supabase for database and authentication, Clerk for user management, Tailwind CSS, Radix UI, and shadcn/ui components, this project demonstrates how to integrate cutting-edge AI capabilities into modern web applications for practical, everyday use cases. The application features intelligent recipe generation by analyzing user inputs for ingredients, cuisines, and dietary needs, personalized recommendations considering allergies, preferences, and skill levels, recipe saving and organization in user accounts powered by Supabase, beautiful, responsive UI with shadcn/ui components ensuring excellent user experience, server-side rendering for optimal performance and SEO, Zod validation for type-safe form inputs and API requests, and Vercel Analytics integration for monitoring user behavior and performance. The AI integration showcases proper OpenAI API implementation including prompt engineering for consistent recipe outputs, error handling for API failures and rate limits, streaming responses for real-time recipe generation feedback, and cost-effective token usage patterns. This project is currently in active development and serves as an excellent reference for developers building AI-powered food and cooking applications, learning how to integrate OpenAI with Next.js Server Actions, creating personalized content generation systems, implementing user authentication with Clerk and Supabase together, and studying modern full-stack architecture patterns. Chef Genie solves the common problem of "what should I cook" by providing creative, AI-generated recipes tailored to what users have on hand and their dietary needs, making cooking more accessible and enjoyable.

SearchAddress is a powerful, reusable React component that provides intelligent address search and autocomplete functionality using OpenStreetMap's Nominatim geocoding service, perfect for forms requiring location input without the cost of commercial geocoding APIs. Built with React, shadcn/ui components, leaflet-geosearch for geocoding, and Tailwind CSS for styling, this component offers autocomplete suggestions as users type, grouped search results organized by address classification (cities, streets, buildings), support for multiple geocoding providers beyond OpenStreetMap, debounced search for performance optimization, and server-side rendering compatibility with Next.js dynamic imports. The component implements custom hooks for search logic and debouncing, ensuring efficient API usage and responsive user experience even with large result sets. Unlike basic address inputs, SearchAddress provides real-time suggestions that reduce user typing effort, eliminate address format inconsistencies, improve data quality by selecting from validated addresses, and enhance user experience with visual feedback and clear result presentation. The implementation dynamically groups results by address type, making it easier for users to distinguish between similar addresses or select the correct level of specificity (e.g., city vs. specific building). Use cases include e-commerce checkout forms where accurate shipping addresses are critical, service booking applications requiring location selection for appointments, real estate platforms where users search for properties by address, event registration systems needing venue location input, and any form requiring validated, geocoded address data. The component is highly customizable with flexible configuration for different geocoding providers, supports TypeScript for type safety, and follows accessibility best practices. Released under the MIT License, it encourages community contributions and adaptation for diverse address input needs.

The Threads Clone is a comprehensive, full-featured recreation of Meta's Threads social media platform built with the T3 stack, showcasing modern web development practices for building complex, production-ready social applications. Created with Next.js 14, TypeScript, tRPC for end-to-end type-safe APIs, Tailwind CSS, shadcn/ui components, Prisma ORM with Neon PostgreSQL, and Clerk authentication, this project demonstrates how to architect scalable social networking features with contemporary tools. The application includes complete user authentication and profile management via Clerk, file upload capabilities for images and media, threaded conversations with nested replies and interactions, text and image content filtering for moderation, custom notification systems for user engagement, recursive thread rendering for deep conversation trees, real-time updates reflecting new posts and interactions, Zod validation ensuring data integrity throughout the stack, and advanced Prisma ORM patterns for complex relational queries. Built with create-t3-app, the project follows T3 stack principles emphasizing type safety, developer experience, and rapid iteration. The implementation showcases tRPC's ability to provide fully typed API routes without code generation, Prisma's sophisticated ORM features for managing complex database relationships, Clerk's comprehensive auth solution including social logins and user metadata, and Next.js 14's app router for optimal performance and SEO. This clone is invaluable for developers learning to build social media platforms from scratch, studying how to implement threaded conversations and notifications, understanding T3 stack architecture and patterns, creating portfolio pieces demonstrating full-stack expertise, and exploring how to scale social features with modern tooling. The codebase serves as both a functional social platform and an educational resource for contemporary web development.

The Eraser Clone is an open-source recreation of Eraser.io, a popular web-based diagramming and collaborative whiteboarding tool, built with Next.js 14, TypeScript, Tailwind CSS, shadcn/ui components, Convex as a real-time database, and Kinde for authentication. With 178 stars on GitHub, this project demonstrates how to build sophisticated, real-time collaborative applications using modern web technologies, pushing the boundaries of what's possible with contemporary JavaScript frameworks. The application features a web-based diagramming canvas for creating flowcharts, wireframes, and technical diagrams, real-time collaboration powered by Convex's real-time database capabilities allowing multiple users to work simultaneously, authentication and user management through Kinde's streamlined auth service, beautiful, responsive UI built with shadcn/ui components and Tailwind CSS, TypeScript throughout for type safety and improved developer experience, and deployment on Vercel for global edge network distribution. The tech stack showcases Convex's unique approach to backend development where database queries and mutations are written as TypeScript functions with automatic real-time subscriptions, Kinde's modern authentication solution eliminating the complexity of building auth from scratch, and Next.js 14's app router for optimal performance and developer ergonomics. This clone is valuable for developers learning to build real-time collaborative applications similar to Figma or Miro, understanding how Convex enables reactive, real-time features without WebSocket management, studying how to implement drawing and diagramming interfaces in the browser, exploring Kinde as an alternative to traditional auth providers, and creating portfolio projects demonstrating advanced full-stack capabilities. The project encourages community contributions and collaboration, exemplifying the spirit of building extraordinary tools together through open-source development. As a learning resource, it provides practical insights into architecting applications where multiple users interact with shared state in real-time.

Epigram is an open-source, AI-powered news summarization platform that uses AI to make quality news easy to access, understand, and personalize by delivering concise summaries from trusted global sources. Built with Next.js, React, Tailwind CSS, shadcn/ui components, OpenAI's GPT-4o-mini for intelligent summarization, Mediastack API for news data aggregation, and Upstash Redis for caching and rate limiting, this platform solves the problem of information overload by providing quick, clear summaries tailored to individual user preferences. The application features a personalized news feed that adapts to user interests and reading habits, AI-generated concise summaries that distill articles to their essential points, access to trusted global news sources ensuring credible information, in-depth AI article analysis for deeper understanding of complex topics, a responsive, user-friendly interface that works seamlessly across all devices, and intelligent caching with Upstash Redis for fast load times and rate limiting. Deployed on Google Cloud Run with support for Vercel, Netlify, and AWS Amplify, Epigram uses the Exa API for AI-powered news summarization and recommends periodic news data refresh via cron jobs to keep content current. The platform is designed for busy professionals who want to stay informed without spending hours reading, students and researchers needing quick overviews of current events, anyone overwhelmed by the volume of daily news across multiple sources, readers who prefer personalized content over generic news feeds, and people seeking credible, summarized information from reliable sources. This project demonstrates how to build intelligent content aggregation platforms, implement AI-powered text summarization at scale, integrate multiple APIs for data enrichment, design personalized recommendation systems, and optimize performance with Redis caching. Epigram makes staying informed effortless by cutting through the noise and delivering what matters most to each user.

InstaGraph is an open-source knowledge graph generator inspired by Yohei Nakajima's Instagraph.ai that transforms unstructured text into interactive visual knowledge graphs using AI. Built with a Next.js frontend for the web interface, FastAPI backend for AI processing, React Flow for graph visualization, Tailwind CSS and Headless UI for styling, and OpenAI API for intelligent graph generation, this full-stack application demonstrates how to build AI-powered data visualization tools that make complex information easier to understand. The platform features automatic knowledge graph generation from user-provided text, interactive graph visualization with zoom, pan, and node manipulation, streaming and server-sent event endpoints for real-time updates, clean web interface for easy text input and graph viewing, and seamless integration between modern frontend and Python backend technologies. Users simply navigate to the application, input their text content, click submit, and watch as the AI analyzes relationships and concepts to generate a visual knowledge graph showing connections between ideas, entities, and topics. This visualization approach is invaluable for students and researchers organizing study materials and research notes, content creators mapping out article structures and topic relationships, product managers visualizing feature dependencies and user flows, educators creating visual learning aids from textual content, and anyone trying to understand complex information through visual connections. The project showcases how to architect full-stack AI applications with separate frontend and backend concerns, implement OpenAI integration for natural language understanding, build interactive data visualizations with React Flow, handle streaming responses for real-time feedback, and create intuitive interfaces for AI-powered tools. InstaGraph makes knowledge more accessible by transforming dense text into clear, visual representations of how concepts connect.

DevTerms is a crowdsourced dictionary website specifically designed to help developers find clear, community-contributed definitions for technical terms, programming jargon, acronyms, and industry concepts that often confuse newcomers and experienced developers alike. Built with Next.js, React, Tailwind CSS, shadcn/ui components, Drizzle ORM for type-safe database queries, Turso for SQLite database hosting, and Meilisearch for powerful, typo-tolerant search functionality, this platform creates a collaborative knowledge base where the developer community can contribute, refine, and discover technical definitions. The application features crowdsourced definitions allowing multiple perspectives on technical concepts, lightning-fast search powered by Meilisearch with autocomplete and fuzzy matching, community voting and curation to surface the best explanations, social media integration sharing daily developer wisdom on X (Twitter) and Bluesky, clean, distraction-free interface optimized for quick reference, and comprehensive coverage of programming languages, frameworks, tools, and methodologies. Hosted on Vercel for global edge delivery, DevTerms addresses the common frustration of encountering unfamiliar technical terminology in documentation, code reviews, or technical discussions without an accessible, developer-friendly resource to consult. The platform is perfect for junior developers learning industry terminology and best practices, experienced developers encountering unfamiliar acronyms in new domains, technical writers ensuring accurate usage of terms in documentation, coding bootcamp students building their technical vocabulary, and anyone in tech who values clear, community-validated definitions over generic dictionary entries. The open-source nature encourages community contributions, making DevTerms a living resource that evolves with the industry. This project demonstrates how to build community-driven content platforms, implement advanced search with Meilisearch, use Drizzle ORM with SQLite databases, create engaging developer tools, and foster collaborative knowledge sharing in technical communities.