React Templates - React

OpenAI Realtime API Next.js is a comprehensive starter template built with Next.js 15, TypeScript, OpenAI Realtime API, WebRTC, Tailwind CSS, shadcn/ui, and Framer Motion, designed for building Voice AI applications with real-time voice interaction capabilities and advanced tool-calling features. This robust framework provides WebRTC-based voice AI streaming for low-latency audio, Next.js server-side rendering for optimal performance, modern UI with smooth animations via Framer Motion, abstracted WebRTC handling through custom React hooks, six example tool-calling functions demonstrating capabilities like getCurrentTime, partyMode, and changeBackground, and multilingual support for English, Spanish, French, and Chinese with strict TypeScript checking ensuring type safety. Supporting both Deno and Node.js runtimes and deployable to Vercel with one-click setup, the template emphasizes ease of use and developer experience while enabling sophisticated voice AI interactions. Perfect for customer service applications with voice-based support, accessibility tools enabling voice control, educational platforms with conversational tutoring, productivity applications supporting voice commands, or any interface where voice interaction provides more natural engagement than traditional text inputs. The custom hook abstraction simplifies WebRTC complexity, enabling developers to focus on application logic and AI capabilities rather than connection management and audio streaming protocols, while the example tool-calling functions demonstrate how voice AI can trigger application actions, creating interactive experiences that respond to user speech in real-time.

Firestarta is a comprehensive Next.js SaaS boilerplate built with TypeScript, NextAuth for authentication, Prisma ORM, Supabase Postgres, Lemon Squeezy for subscription management, Sass, shadcn/ui, and Lucide icons, designed to provide a robust starting point for web applications requiring user authentication, subscription payments, and modern development practices. This production-ready template features App directory structure with Route Groups, Intercepting and Parallel Routes, server-side and client-side rendering for optimal performance, comprehensive user authentication flows, integrated subscription management with Lemon Squeezy, responsive design across all devices, internationalization support for global markets, and custom components following best practices. Built with modern web development standards and a flexible, extensible architecture, Firestarta eliminates weeks of initial setup work that every SaaS application requires before addressing unique product features. Perfect for developers building subscription-based products, entrepreneurs launching SaaS businesses with limited technical teams, agencies delivering custom SaaS solutions for clients, or any project where rapid development without sacrificing code quality and scalability determines market success. The integration of NextAuth, Prisma, and Supabase provides a complete authentication and data management stack, while Lemon Squeezy handles the complexity of subscription billing, tax compliance, and payment processing, enabling founders to focus on product differentiation and customer acquisition rather than infrastructure and payment integration challenges.

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.

Shadcn Tree View is a React component built with TypeScript, Tailwind CSS, and shadcn/ui, designed for creating hierarchical tree views with nested, expandable, and collapsible data lists that support custom icons, action buttons, drag-and-drop functionality, and disabled states. This versatile component enables developers to navigate complex hierarchical data structures through expand, collapse, and select operations, customize icons for different item states (default, open, selected), add action buttons to individual tree items, implement click handlers for both individual items and the entire tree, support drag-and-drop reordering, and disable specific items when needed. Based on community implementations by WangLarry and bytechase while following shadcn/ui design principles, the component provides modular, configurable tree views with a roadmap including programmatic item control, striped/non-striped variants, and custom item renderers. Perfect for file system browsers, organizational hierarchies, category navigation, nested menu systems, or any application requiring visual representation of hierarchical relationships with user interaction. Installable via 'npx shadcn add' from the author's registry, this component fills a gap in the shadcn/ui ecosystem by providing tree view functionality that many applications need but few component libraries include, making it valuable for developers building admin panels, content management systems, or any interface where hierarchical data visualization and navigation are essential to user workflows and information architecture understanding.

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.