React Templates - Tailwind

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.

The shadcn/ui Big Calendar is a beautifully styled integration of React Big Calendar with shadcn/ui's design system, providing seamless light and dark theme support through pure CSS variable-based theming without JavaScript manipulation. Built with Next.js, React, Tailwind CSS, and shadcn/ui components, this reusable calendar component automatically adjusts its appearance based on the selected theme using shadcn's CSS variables, creating smooth theme transitions and consistent visual experiences across your application. The implementation features automatic theme switching that respects user preferences and system settings, pure CSS-based theming eliminating JavaScript overhead for theme management, Next.js compatibility with server-side rendering support, multiple calendar views including month, week, day, and agenda layouts, full React Big Calendar functionality for event scheduling and management, responsive design adapting to mobile and desktop screen sizes, and a dedicated CSS stylesheet that leverages shadcn's color tokens for unified styling. Unlike standard React Big Calendar implementations that require manual theme configuration or complex JavaScript solutions, this integration uses CSS variables to ensure calendar colors, backgrounds, borders, and text automatically match your shadcn/ui theme, whether users prefer light mode during the day or dark mode at night. The component is perfect for building appointment scheduling applications for services, healthcare, or consulting, team calendar interfaces for project management and collaboration, event management platforms for conferences or community events, resource booking systems for meeting rooms or equipment, and any application requiring a full-featured calendar with professional, theme-aware styling. This project demonstrates how to integrate third-party React components with shadcn/ui's theming system, implement CSS variable-based theming for complex UI components, create reusable calendar solutions for Next.js applications, and maintain visual consistency across light and dark modes.

Uxie is an intelligent PDF reader application that started as a first-place hackathon project and evolved into a comprehensive learning platform combining PDF annotation, note-taking, real-time collaboration, and AI-powered features including chat, flashcard generation with AI feedback, text-to-speech, and OCR capabilities. Built with Next.js, TypeScript, Tailwind CSS, shadcn/ui components, tRPC for type-safe APIs, Prisma ORM for database management, Supabase for backend services, Vercel AI SDK and Langchain for AI features, Pinecone for vector embeddings, Next Auth for authentication, and Liveblocks for real-time collaboration, this full-stack application transforms static PDFs into interactive learning experiences. The platform features comprehensive PDF annotation tools with highlighting, underlining, and margin notes, intelligent note-taking with custom editor blocks and AI-powered text autocompletion, AI chat functionality that answers questions about document content using RAG (Retrieval Augmented Generation), automatic flashcard generation from document content with LLM-generated feedback on answers, sentence-by-sentence text-to-speech with visual highlighting (English only), OCR support for extracting text from scanned documents and images, real-time collaborative editing powered by Liveblocks allowing multiple users to annotate simultaneously, and vector embedding storage in Pinecone for semantic search and AI context. The AI integration uses the Vercel AI SDK and Langchain to provide contextual understanding of PDFs, enabling students to ask questions and receive answers grounded in the actual document content. This application is invaluable for students who want to enhance their study sessions with AI-powered learning tools, researchers annotating academic papers and collaborating on document analysis, professionals reviewing contracts or reports with team members, educators creating interactive reading materials with embedded questions and flashcards, and anyone who learns better through active engagement rather than passive reading. Uxie demonstrates how to build AI-enhanced document viewers, implement real-time collaboration in React applications, integrate vector databases for semantic search, create custom text editors with AI features, and design engaging learning experiences through technology.

Shopco is a fully functional, open-source e-commerce website that converts a professional Figma design into a responsive, production-ready web application using Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui components, Framer Motion for animations, and Redux Toolkit for state management. This project demonstrates best practices for building modern e-commerce platforms with server-side rendering, static site generation, smooth animations, and global state management while maintaining excellent performance and SEO optimization. The application features a complete product catalog with filtering, sorting, and search functionality, responsive, mobile-first design that works beautifully across all devices, shopping cart management powered by Redux Toolkit, smooth page transitions and micro-interactions using Framer Motion, accessible and customizable UI components from shadcn/ui, optimized images and fonts for fast loading times, type-safe development with TypeScript throughout, and well-organized project structure following Next.js 14 best practices. The tech stack showcases how to combine Redux for complex state management with Next.js server components, implement animations that enhance rather than hinder user experience, structure large applications with clear separation of concerns in app routing, components, Redux features, and styles, and build SEO-friendly e-commerce sites with proper meta tags and semantic HTML. This project is valuable for developers learning to build production-ready e-commerce applications from design to deployment, studying how to convert Figma designs into pixel-perfect web implementations, understanding Redux Toolkit patterns in modern Next.js applications, exploring animation best practices with Framer Motion, and creating portfolio pieces demonstrating full-stack e-commerce capabilities. Released under the MIT License, Shopco serves as both a functional e-commerce template and an educational resource for contemporary web development practices in the e-commerce domain.

The WordPress Plugin Boilerplate is a comprehensive starter template that brings modern web development practices to WordPress plugin development by integrating React, TypeScript, SASS, Tailwind CSS, shadcn/ui components, Vite for blazing-fast builds, Storybook for component development, and Hot Module Replacement for instant feedback during development. This boilerplate eliminates the traditional pain points of WordPress plugin development by providing a Laravel-inspired custom ORM for database operations, flexible API routing for REST endpoints, simplified shortcode generation with custom rendering, seamless data passing between PHP backend and React frontend, and a CLI tool for rapid plugin scaffolding and configuration. The development workflow is streamlined with npm run dev for full development mode with HMR, separate npm run dev:frontend and npm run dev:admin commands for focused development, npm run build to compile production-ready assets, and npm run release to create distributable plugin packages. The boilerplate includes Storybook integration for isolated component development and documentation, TypeScript for type safety across JavaScript code, SASS and Tailwind CSS for flexible styling options, shadcn/ui and Headless UI for accessible component primitives, and proper WordPress hooks and filters integration maintaining compatibility with the WordPress ecosystem. This template is invaluable for developers building commercial WordPress plugins with modern UIs and complex functionality, agencies developing multiple client plugins who need consistent, maintainable architecture, teams transitioning from jQuery-based WordPress development to React, freelancers who want professional development experience in WordPress projects, and anyone frustrated with traditional WordPress plugin development workflows. The project demonstrates how to integrate modern JavaScript frameworks into WordPress without fighting the platform, structure plugin code for maintainability and testability, implement database models and API routes in WordPress context, build component libraries with Storybook for WordPress admin interfaces, and accelerate WordPress plugin development with contemporary tooling.

Image Upload shadcn is a clean, reusable image upload component built with Next.js, TypeScript, shadcn/ui components, and Cloudinary integration for cloud-based image storage and management. This implementation demonstrates best practices for handling file uploads in modern React applications, including drag-and-drop functionality, image preview, upload progress feedback, and seamless integration with Cloudinary's powerful image CDN and transformation API. The component features intuitive drag-and-drop interface for effortless image selection, instant image preview before upload confirmation, responsive UI built with shadcn/ui components ensuring consistent styling, Cloudinary integration for scalable, cloud-based image storage, TypeScript throughout for type safety and better developer experience, optimized image delivery through Cloudinary's global CDN, and easy deployment on Vercel for production-ready hosting. Unlike basic file upload inputs, this component provides a polished user experience with visual feedback, error handling, and professional styling that matches shadcn/ui's design language. The Cloudinary integration eliminates the need for custom server-side upload handling, providing automatic image optimization, transformation capabilities, and reliable storage without managing your own infrastructure. This component is perfect for building user profile picture uploads in social applications, product image management in e-commerce platforms, document or receipt uploads in business applications, media galleries requiring cloud storage and CDN delivery, and any form requiring image input with professional UX. The project demonstrates how to implement file uploads in Next.js applications, integrate third-party services like Cloudinary with proper environment configuration, create reusable upload components with shadcn/ui, handle user feedback during asynchronous operations, and deploy image-heavy applications on Vercel. The TypeScript implementation ensures type safety when working with file objects and Cloudinary responses.

The shadcn/ui Form Builder is a powerful WYSIWYG (What You See Is What You Get) form generation tool that revolutionizes form development by allowing developers to visually select input fields and automatically generate production-ready code with integrated shadcn/ui components, React Hook Form, and Zod validation schemas. Built with Next.js, TypeScript, Tailwind CSS, Drizzle ORM for database management, and shadcn/ui components, this tool eliminates the tedious manual work of writing form boilerplate, validation schemas, and component wiring. The form builder features a visual drag-and-drop interface for selecting and configuring input fields, automatic Zod schema generation ensuring type-safe validation, seamless integration with React Hook Form for performant form state management, one-click code generation producing copy-paste ready form components, support for various input types including text, email, number, select, checkbox, radio, and more, multi-field line configurations for complex form layouts, and customizable styling following shadcn/ui's design patterns. The platform's philosophy is simple: imagine selecting the input fields you need and having everything else—validation, state management, error handling, accessibility—done automatically. The ambitious roadmap includes expanding input field types with file uploads, OTP inputs, and multi-select components, support for alternative validation libraries beyond Zod, and pre-built form templates for common use cases like contact forms, registration forms, and surveys. This tool is invaluable for developers building forms who want to skip repetitive boilerplate and focus on unique logic, teams establishing consistent form patterns across multiple projects, rapid prototyping scenarios where form creation speed matters, applications requiring numerous forms with different field configurations, and anyone frustrated with manually wiring React Hook Form and Zod together. The Form Builder demonstrates how to create developer productivity tools, implement code generation with proper formatting and imports, integrate form libraries for optimal developer experience, and design intuitive interfaces for technical tasks.

Marshal UI is a comprehensive digital marketplace application built with Next.js 14, demonstrating how to create production-ready platforms where creators can sell digital products with built-in payment processing, authentication, and database management. Created by Jan Marshal as a step-by-step tutorial project, this full-featured marketplace integrates Kinde for robust authentication including multi-factor authentication and passwordless login, Stripe Connect for marketplace payments enabling seller payouts and platform fees, Prisma ORM with Supabase PostgreSQL for type-safe database operations, Tailwind CSS and shadcn/ui for modern, accessible components, Zod for server-side validation ensuring data integrity, Resend and React Email for transactional email templates, and deployment on Vercel for global edge performance. The application features comprehensive authentication flows supporting OAuth with Google and GitHub, passwordless magic link login, multi-factor authentication for enhanced security, seller onboarding with Stripe Connect allowing creators to receive payments, product listing and management for digital goods, secure payment processing with Stripe webhooks for real-time updates, email notifications using beautifully designed React Email templates, and server-side validation protecting against malicious inputs. The marketplace architecture showcases how to handle complex payment flows where platform fees are collected while sellers receive payouts, implement webhook handling for asynchronous Stripe events, design database schemas for multi-sided marketplaces, and build type-safe APIs with proper error handling. This project is invaluable for developers learning to build marketplace platforms like Gumroad or Etsy, understanding Stripe Connect integration for multi-vendor payment processing, implementing modern authentication patterns with Kinde, studying full-stack Next.js 14 application architecture, and creating portfolio projects demonstrating e-commerce expertise. The tutorial format helps developers elevate their skills by walking through real-world challenges in marketplace development.

Next Shadcn Landing is a streamlined, production-ready landing page template built with Next.js, shadcn/ui, TypeScript, and Tailwind CSS that's designed to be easy to set up, highly customizable, quick to deploy, and fully responsive across all devices. Unlike complex landing page builders or bloated templates, this starter focuses on simplicity and developer experience, allowing you to launch professional landing pages in minutes rather than hours. The template features a clean, modern design following shadcn/ui's aesthetic principles, fully responsive layout adapting seamlessly to mobile, tablet, and desktop screens, TypeScript support ensuring type safety throughout the codebase, Tailwind CSS for rapid styling customization, organized project structure with clear separation of concerns, and simple configuration through centralized config files. Customization is straightforward: modify content in the /config folder for site-wide settings, adjust layouts and routing in the /app directory, change navigation links in lib/links.ts, and deploy to Vercel with a single click. The setup process takes minutes: clone the repository using degit, update package.json with your project name, install dependencies with your preferred package manager, and run the development server to see your landing page. This template is perfect for indie developers launching SaaS products who need professional landing pages quickly, startups building MVPs who want to focus on product rather than marketing site development, agencies creating client landing pages with consistent, maintainable architecture, developers building portfolios or personal sites with modern web technologies, and anyone who values simplicity and speed over feature bloat. The minimalist approach means less code to maintain, faster page loads, and easier customization compared to heavyweight landing page frameworks. Released under the MIT License, Next Shadcn Landing provides the essential foundation for landing pages without unnecessary complexity, letting you customize what matters while handling the boilerplate.