React Templates - Next.js

MantineHub (previously Mantine Theme Builder) is an open-source web tool built with TypeScript, Next.js, CSS, SCSS, and Tailwind CSS, designed to create modern, customizable shadcn-inspired themes for Mantine UI components by providing extensive color palette selection, border radius control, light/dark mode toggling, theme object export functionality, and support for all Mantine components with pre-built UI component "Blocks". This comprehensive toolkit evolved from an experimental project into a full-featured theme generation interface that simplifies the process of modernizing Mantine's styling by enabling developers to quickly generate and integrate contemporary design systems. The shadcn design inspiration brings the elegant aesthetics popularized by shadcn/ui to the Mantine ecosystem, bridging the gap between Mantine's comprehensive component library and modern design trends. Perfect for development teams using Mantine UI seeking modern aesthetics, designers creating custom themes for Mantine applications, agencies building multiple projects with consistent Mantine styling, or developers transitioning from other UI libraries who want Mantine components with familiar design patterns. The theme export functionality generates ready-to-use configuration objects that can be copied and pasted directly into projects, eliminating manual theme construction and reducing the time from design decision to implementation. By providing a visual interface for theme customization, MantineHub makes sophisticated Mantine theming accessible to team members who may not be familiar with Mantine's theming API structure while maintaining the full power and flexibility that experienced developers expect.

Photography Website is an open-source photography travel blog built with Next.js 15, Neon serverless Postgres, Drizzle ORM, Better Auth, shadcn/ui, tRPC, and Cloudflare R2 storage, designed to provide photographers with a sophisticated platform for sharing and documenting travel photography experiences with modern web technologies. This feature-rich application offers responsive design optimized for all devices from mobile to desktop, automatic EXIF data extraction from photos capturing camera settings and technical details, secure authentication protecting user accounts and content, cloud storage with Cloudflare R2 for scalable image hosting, location-based photo organization enabling geographical browsing, SEO optimization for discoverability through search engines, and dark and light themes matching user preferences. The platform addresses the unique needs of photographers who want to showcase work with context (location, camera settings, technical details) while maintaining a clean, gallery-focused presentation that emphasizes images over text. Perfect for travel photographers documenting journeys with rich metadata, professional photographers building portfolios with technical credibility, photography enthusiasts sharing work with communities, or anyone creating visual narratives where images, locations, and technical details combine to tell complete stories. The automatic EXIF extraction eliminates manual data entry for technical information, while location-based organization enables viewers to explore photography by destination, creating engaging browsing experiences that traditional chronological blogs cannot provide, making this platform ideal for photographers whose work is intrinsically connected to places and technical craft.

SyllabusX is an open-source academic resource platform built with Next.js, TypeScript, shadcn/ui, Tailwind CSS, and Contentful, designed specifically for B.Tech students at GGSIPU to serve as an academic GPS that centralizes syllabi, handwritten notes, previous year questions (PYQs), and practical files in one accessible platform. This comprehensive educational tool addresses the common frustration that gathering syllabi and study materials for each subject is hassling and time-consuming, providing complete syllabus coverage for Batch 2021-2025, curated handwritten notes highlighting key concepts, previous year question papers for exam preparation, practical files and lab resources, and coverage across all engineering branches. Perfect for university students managing multiple courses with scattered resources, educators sharing structured content with classes, study groups collaborating on exam preparation, or academic institutions seeking centralized resource distribution platforms. The web-based platform at syllabusx.live makes navigating through syllabi, study materials, and course essentials effortless by organizing content logically and providing quick access to frequently needed resources without hunting through email attachments, university portals, or social media groups. As a community-driven, open-source project, SyllabusX demonstrates how student-led initiatives can solve real educational challenges by creating tools that directly address pain points in academic workflows, enabling students to spend less time searching for materials and more time actually studying them, improving preparation efficiency and reducing the stress of locating essential resources during crucial exam periods.

UI Beats is an open-source component library built with React, TypeScript (84.9%), Tailwind CSS, Framer Motion, and Next.js, designed to level up UI development by providing reusable, animated components with comprehensive documentation at uibeats.com/docs. This MIT-licensed resource focuses on component-based UI development by offering pre-built, customizable components that simplify and accelerate frontend creation through consistent design patterns, smooth animations via Framer Motion, comprehensive MDX documentation for easy integration, and an active contribution guide enabling community involvement. With 211 stars on GitHub and emphasis on developer experience, UI Beats demonstrates how focused component libraries can streamline development workflows by providing production-ready building blocks rather than requiring developers to build every interface element from scratch. Perfect for frontend developers seeking animated components without complex implementation, design systems teams establishing animation standards, prototyping workflows requiring rapid UI assembly, or projects where polished, animated interfaces differentiate user experience but limited time and resources prevent custom animation development. The combination of TypeScript for type safety, Tailwind for styling flexibility, and Framer Motion for sophisticated animations creates components that are both developer-friendly and visually engaging, enabling teams to deliver professional, animated UIs without deep animation expertise or extensive development time, making modern UI patterns accessible to developers at all skill levels through well-documented, copy-paste-ready components.

Shadcn UI Theme Explorer is a community-driven platform built with Next.js 13, TypeScript, Tailwind CSS, and React, designed to help developers explore, preview, customize, and share beautifully designed themes for shadcn/ui components with light and dark mode variations. Inspired by the Raycast Theme Explorer, this collaborative tool enables users to upload and contribute new themes through a simple process of adding theme information to an index, creating CSS files with color definitions, and importing themes into global stylesheets, effectively coloring the web with community-created designs. The platform provides a centralized repository where designers and developers can discover diverse color schemes, test themes with live component previews, understand how themes affect different UI elements, and contribute their own creations to benefit the broader shadcn/ui community. Perfect for design teams exploring brand color applications, developers seeking theme inspiration, open-source contributors sharing design work, or any project where theme experimentation and discovery accelerate design decisions and ensure cohesive visual systems. By emphasizing community involvement with a clear code of conduct and inclusive approach, the Theme Explorer demonstrates how collaborative design tools can expand the creative possibilities of component libraries, enabling the shadcn/ui ecosystem to support diverse aesthetic preferences while maintaining the underlying component architecture and accessibility standards that make the library valuable across varied applications and industries.

Astra is a modern, fully responsive landing page built with Next.js, TailwindCSS, shadcn/ui, Magic UI, and Clerk authentication, designed to showcase an AI-powered website builder concept through sleek design and cutting-edge web development techniques. This showcase project demonstrates best practices for responsive layout design, user authentication implementation, modern UI component integration, elegant visual hierarchies, and contemporary web development patterns that developers can learn from and adapt for their own projects. With an accompanying tutorial video for implementation guidance, Astra serves as both a functional landing page and an educational resource for developers interested in modern web development stacks. Perfect for developers learning Next.js and modern UI frameworks, agencies demonstrating design capabilities to potential clients, startups presenting AI website builder concepts to investors, or any project where a polished, professional landing page communicates technical sophistication and product vision. The combination of shadcn/ui for core components and Magic UI for enhanced visual elements creates an interface that balances functionality with aesthetic appeal, while Clerk integration demonstrates production-ready authentication patterns. As an open-source project hosted on GitHub with a live demo at astra-agency.vercel.app, Astra provides developers with a complete reference implementation that can be studied, modified, and adapted, making it valuable both as a starting point for similar projects and as a learning resource for understanding how different technologies integrate to create cohesive, professional web experiences.

Shadcn Tour is a React component library built with Next.js, TypeScript (97.1%), shadcn/ui, Tailwind CSS, and motion, designed for creating interactive product tours that guide users through application features with step-by-step highlights and configurable positioning. This flexible tour system provides a TourProvider context for managing tour state, TourAlertDialog for starting or skipping tours, useTour hook for accessing tour-related functions and states, support for step-by-step tours with dynamic positioning, and the ability to highlight specific UI elements during the tour experience. By creating guided user experiences that introduce key features effectively, Shadcn Tour addresses the challenge of user onboarding and feature discovery that significantly impacts product adoption and user success. Perfect for SaaS applications introducing complex workflows, feature-rich products preventing user overwhelm, new releases highlighting updates, or any application where effective onboarding reduces support requests and increases feature utilization. The component's ability to dynamically set tour steps, control progression, highlight specific elements, and customize appearance enables developers to create contextual, adaptive tours that respond to different user segments or application states, making onboarding experiences more relevant and effective than static tutorials or documentation alone can provide, ultimately improving user activation rates and time-to-value for products requiring initial guidance to unlock full potential.

Shadcn Studio is an open-source component distribution platform built with TypeScript (99.5%), Tailwind CSS, and Next.js, providing a comprehensive registry of copy-and-paste shadcn components, blocks, and templates paired with a powerful theme generator for crafting, customizing, and shipping faster. This innovative tool offers live theme generation with real-time preview, customizable component variants, animated component options, Tailwind v4 compatibility, color and typography fine-tuning capabilities, and pre-built theme starters that accelerate project initiation. Unlike traditional NPM libraries, Shadcn Studio operates as a distribution of components that developers copy directly into projects, providing more design flexibility and control than standard component libraries by enabling modification at the source level. Perfect for design systems teams establishing consistent visual languages, developers building multiple projects requiring theme variations, agencies delivering customized solutions for diverse clients, or any workflow where theme experimentation and component customization determine design efficiency and consistency. Supported by ThemeSelection with active Twitter and Discord communities and released under MIT license, the platform demonstrates how modern component distribution can move beyond package management to direct code ownership, enabling developers to truly own their component implementations while benefiting from curated, production-ready starting points that reduce initial development time without creating long-term dependencies on external packages that may constrain future customization or introduce breaking changes during updates.

Travel Planner AI is a SaaS application built with Next.js 14, Tailwind CSS with shadcn/ui, Convex backend platform, OpenAI APIs, Clerk authentication, Razorpay payments, and Resend email, leveraging cutting-edge technologies to streamline travel planning through AI-generated personalized itineraries based on simple prompts like "2 days trip to London with budget $1000". This comprehensive platform provides tailored itineraries matching user preferences, discovers attractions and hidden gems beyond typical tourist guides, recommends optimal travel timing considering weather and events, suggests culinary experiences aligned with tastes and budgets, tracks expenses throughout trips, and enables collaborative trip planning through email invitations for group travel coordination. The project has evolved into Rutugo, an enhanced platform offering more advanced AI capabilities for travel planning. Perfect for travelers seeking personalized itineraries without extensive research, groups coordinating complex multi-person trips, budget-conscious tourists optimizing spending, or adventure seekers discovering non-obvious destinations and experiences that generic travel guides miss. By transforming natural language input into comprehensive travel plans, the platform eliminates hours of research, comparison shopping, and itinerary assembly, making sophisticated travel planning accessible to users who lack the time, expertise, or desire to become temporary travel agents for their own vacations, while the collaborative features address the common challenge of group trip planning where coordinating preferences, budgets, and schedules often creates more friction than the trip itself is worth.

Shadcn Date Time Picker is a comprehensive component library built with Next.js, TypeScript (53.9%), MDX (43.1%), Tailwind CSS, date-fns, and shadcn/ui, offering versatile date and time selection components with multiple variants including single date pickers, date range pickers, 12-hour and 24-hour time formats, all integrated with react-hook-form and Zod for robust form validation. This well-documented collection provides live, interactive examples at time.rdsx.dev, easy-to-use copy-pastable code snippets, customizable UI using shadcn components, and demonstrations highlighting component versatility across various use cases from simple date selection to complex scheduling scenarios. Released under MIT license, the project addresses the common need for flexible, production-ready datetime input components that handle the complexity of date/time selection, validation, and formatting without requiring developers to build these foundational patterns from scratch. Perfect for booking systems requiring availability selection, scheduling applications handling appointments, event management platforms coordinating dates and times, form builders needing datetime fields, or any application where datetime input is frequent and must be both user-friendly and technically robust. The integration with react-hook-form ensures smooth form workflows, while Zod validation provides runtime type safety for datetime data, and the comprehensive examples with MDX documentation make implementation straightforward even for developers unfamiliar with datetime complexity, effectively lowering the barrier to implementing professional datetime selection in web applications where poor datetime UX often frustrates users and generates support requests.

The CSS Selector Tool is a powerful low-code web scraping and data extraction utility designed for developers, QA engineers, and data analysts who need to test and debug CSS selectors efficiently. Built with Next.js 14, React, TypeScript, and shadcn/ui components, this developer tool provides an interactive interface for selecting elements on any webpage, generating precise CSS selectors, and extracting data with built-in proxy and parsing capabilities. The application features a visual element picker that highlights elements on hover, automatic selector generation with specificity optimization, XPath alternative generation, real-time selector testing and validation, and a built-in proxy system for accessing content behind authentication or geo-restrictions. Users can load any website URL, click to select elements visually, generate and copy optimized CSS selectors, test selectors in real-time with instant feedback, and export extracted data in various formats including JSON and CSV. The tool is invaluable for web scraping projects where precise element selection is critical, automated testing scenarios requiring reliable element locators, data extraction workflows from dynamic websites, and debugging complex CSS selector issues in production applications. Whether you're building a web scraper, writing automated tests, or troubleshooting element selection issues, this CSS Selector Tool streamlines the process of identifying and validating the right selectors for your needs.

AI Fusion Kit is a comprehensive, production-ready AI web application template that accelerates the development of modern AI-powered applications with Next.js 14, React, TypeScript, and shadcn/ui. Built on the App Router architecture, this feature-rich template integrates Supabase for authentication and database management, OpenAI for AI capabilities, and Stripe for payment processing, providing a complete foundation for building SaaS products with AI features. The template includes pre-built AI chat interfaces with streaming responses, user authentication and profile management, subscription and billing integration, responsive UI components following shadcn/ui design patterns, database schema with Supabase migrations, middleware for protected routes, and webhook handlers for Stripe events. The modular architecture allows developers to customize AI models, swap authentication providers, adjust pricing tiers, and extend the component library while maintaining type safety throughout. Use cases include launching AI chatbot applications with subscription monetization, building AI writing assistants or content generation tools, creating customer support platforms with AI-powered responses, and developing AI research or experimentation interfaces. The template significantly reduces development time by providing battle-tested patterns for authentication, payments, AI integration, and database management, allowing teams to focus on unique product features rather than boilerplate setup.