React Templates - React

Multi Step Form is an elegant web application built with Next.js 13, TypeScript, React, TailwindCSS, shadcn/ui, and Framer Motion, demonstrating advanced UI/UX patterns for complex form workflows with smooth animations and responsive design. This sophisticated form implementation guides users through a multi-step sequence, displays a summary of selections on the final step for confirmation before submission, provides optimal layouts across all device sizes with responsive design, and features interactive hover and focus states for all elements enhancing accessibility and user feedback. The integration of Framer Motion provides smooth, professional transitions between form steps that reduce cognitive load and improve perceived performance, while custom data management hooks demonstrate React state management patterns for complex form data. Perfect for e-commerce checkout flows, insurance quote applications, multi-stage onboarding processes, survey and questionnaire platforms, or any application where breaking complex forms into manageable steps improves completion rates and user satisfaction. Created by Marcos V Fitzsimons, this project showcases how modern front-end technologies can transform potentially overwhelming forms into engaging, step-by-step experiences that guide users through complex data entry while maintaining context, providing clear progress indicators, and enabling easy navigation between steps for corrections or review.

CodeJeet is a comprehensive, open-source technical interview preparation platform built with Next.js, TypeScript, Tailwind CSS, shadcn/ui, and Drizzle ORM, providing completely free access to 8,000+ LeetCode questions organized by company and topic with text solutions and video explanations. This extensive resource categorizes coding challenges by both company (preparing candidates for specific employer interview processes) and topic (enabling focused practice on data structures, algorithms, and problem-solving patterns), while offering text-based solutions for quick reference and video explanations for deeper understanding of complex concepts. The TypeScript-heavy codebase (97.6%) ensures type safety and maintainability, while the modern Next.js architecture provides fast page loads and excellent SEO for discoverability. Perfect for software engineers preparing for technical interviews at major tech companies, computer science students building problem-solving skills, coding bootcamp participants supplementing curriculum, or career switchers developing algorithmic thinking required for software development roles. Released under the GPL-3.0 license, CodeJeet democratizes access to high-quality interview preparation materials that are often locked behind expensive subscription services, making technical interview success more accessible to developers regardless of financial resources while providing a constantly updated, community-driven alternative to commercial platforms.

AlgorithmVisualizer is an interactive educational web application built with React, Next.js, Tailwind CSS, and shadcn/ui, providing step-by-step visual representations of 24+ algorithms across multiple categories including graph search (DFS, BFS, Dijkstra), sorting algorithms, pathfinding, recursion, prime number generation, N-Queen problem, and Turing machine operations. This comprehensive learning tool simplifies complex algorithmic concepts by transforming abstract computational processes into engaging visual demonstrations that help learners understand how algorithms work through interactive, real-time visualizations. The step-by-step approach allows students to control execution speed, pause at critical steps, and observe how data structures transform throughout algorithm execution, making abstract concepts concrete and memorable. Perfect for computer science students learning algorithms and data structures, coding bootcamp participants building foundational knowledge, educators teaching computational thinking in classrooms, or self-taught developers strengthening algorithmic problem-solving skills for technical interviews. As an open-source educational tool with a continuously expanding algorithm library, AlgorithmVisualizer addresses the challenge that many learners face when trying to understand algorithms from static textbook descriptions or code alone, providing the visual feedback that transforms confusion into comprehension and making algorithm education more accessible and engaging for diverse learning styles.

rdt.li is a self-hostable, feature-rich, minimalistic URL shortener built with Next.js 14, Auth.js (NextAuth), Drizzle ORM, and serverless Postgres on Neon, providing comprehensive analytics and modern UX without page reloads. This sleek platform offers all-time, daily, and unique view analytics with bar charts visualizing the last 7 days of traffic, editable URL titles and destinations for flexible link management, filtering and search capabilities for large link collections, and light/dark mode themes for user preference. Built on the "Onset" Next.js starter, the application is designed for easy customization by both beginners and experts while maintaining production-ready quality and performance. Perfect for marketing teams tracking campaign link performance, developers needing custom short URLs for projects, businesses wanting link analytics without third-party service dependencies, or content creators managing numerous links across platforms where analytics inform content strategy. Deployed on Vercel with Neon's serverless PostgreSQL, the architecture scales automatically with traffic while minimizing costs during quiet periods. The no-page-reload experience provides instant feedback on user actions, creating a native-app-like experience in the browser. As an open-source project under MIT license, rdt.li enables complete control over link data and analytics, addressing privacy concerns and vendor lock-in issues inherent in commercial URL shortening services.

Lingua Time is a smart datetime picker component built with Next.js, TypeScript, React, Tailwind CSS, and shadcn/ui, understanding natural language input like "next Tuesday at 3pm" to eliminate the tedium of clicking through traditional date pickers. This innovative component parses flexible datetime expressions, provides a user-friendly datetime picker interface as fallback, integrates seamlessly with react-hook-form for validation, and supports various input styles and configurations for different use cases. The natural language parsing capability transforms datetime selection from a multi-click, error-prone process into a simple typing action that matches how people naturally think and communicate about time. Perfect for scheduling applications where users book appointments or meetings, task management tools requiring deadline setting, event planning platforms handling complex timing, or any form where datetime input friction causes user abandonment and reduced completion rates. With straightforward installation via shadcn CLI and comprehensive TypeScript support (95.9% of codebase), Lingua Time demonstrates how rethinking traditional UI patterns with natural language processing can dramatically improve user experience. The component's compatibility with popular form libraries ensures easy integration into existing applications, while the intelligent parsing handles various datetime formats and expressions, reducing validation errors and support requests caused by confused users struggling with conventional datetime pickers that force unnatural interaction patterns.

Iotawise is an open-source habit tracking application built with Next.js App Directory, TypeScript, Tailwind CSS, shadcn/ui, NextAuth.js, Prisma ORM, Zod validations, and Neon PostgreSQL, designed to help users monitor and improve daily habits and activities with minimal complexity and maximum insight. This streamlined platform provides a user-friendly interface for daily habit logging, activity streak monitoring to maintain motivation, dashboard analytics visualizing progress and patterns, Google Authentication for quick onboarding, planned web push notifications for habit reminders, and cross-platform PWA support for native-like experiences on mobile and desktop. The application emphasizes simplicity and ease of use, removing barriers that cause users to abandon more complex habit-tracking systems while still providing enough analytics to maintain motivation and identify improvement opportunities. Perfect for individuals building positive routines and breaking negative habits, productivity enthusiasts tracking multiple areas of life improvement, health and fitness goals requiring daily consistency, or anyone seeking behavior change where streak visualization and progress tracking provide the psychological reinforcement needed for long-term habit formation. The combination of NextAuth.js for authentication, Prisma for type-safe database access, and Zod for runtime validation creates a robust, maintainable codebase, while the planned PWA support will enable offline habit logging and push notifications that keep users engaged with their goals throughout the day.

Fluid is a Hydrogen theme built with React Router V7, Shopify Hydrogen, React, Tailwind CSS, Sanity CMS, Radix UI, shadcn/ui, Motion, and Embla Carousel, enabling developers to easily build modern headless Shopify storefronts by organizing content with modular sections similar to Shopify Liquid themes. This comprehensive e-commerce solution provides real-time visual editing for content editors, page building through modular, reusable sections, seamless Shopify integration for product data and checkout, and flexible content management with Sanity CMS offering advanced content modeling and preview capabilities. Drawing inspiration from Shopify's Dawn theme, Sanity's Akva demo, the Hydrogen demo store, and Build UI recipes, Fluid combines the best patterns from established e-commerce solutions into a unified, headless architecture. Perfect for brands seeking full design control over their storefronts, agencies building custom e-commerce experiences for clients, growing businesses outgrowing Shopify theme limitations, or any project where content-driven commerce and unique customer experiences differentiate products in competitive markets. The separation of content management (Sanity) from commerce functionality (Shopify) enables marketing teams to iterate on content without developer involvement while developers maintain control over the storefront implementation, performance optimization, and custom features that standard Shopify themes cannot support, creating a scalable foundation for modern e-commerce that adapts to business growth and changing market demands.

Launch UI is a comprehensive Next.js 15 website components template built with TypeScript, Tailwind CSS, shadcn/ui, and Lucide icons, providing pre-built, production-ready UI components specifically designed for products that need great-looking, conversion-optimized landing pages speaking to professional, quality-oriented audiences. This modern design system features fully mobile-compatible components with responsive layouts, dark mode support for user preference, performance and SEO optimization for discoverability, accessibility-focused implementation with ARIA attributes, and multiple pre-built sections including Navbar, Hero, FAQ, Stats, CTA, and Footer components. Created specifically for developer tools, AI-powered applications, SaaS products, mobile apps, and technical product landing pages where first impressions directly impact conversion rates and customer acquisition costs, Launch UI eliminates weeks of design and development work. Perfect for startups launching MVPs with limited design resources, developers building side projects requiring professional presentation, product teams iterating quickly on landing page variations for A/B testing, or technical founders who recognize that poorly designed landing pages undermine product credibility regardless of underlying technology quality. The copy-and-paste approach maintains the flexibility and customization that developers expect from shadcn/ui while providing the cohesive design system and conversion optimization patterns that professional landing pages require, enabling rapid deployment without sacrificing quality or brand consistency.

Pricing Page Shadcn is a completely customizable pricing page template built with Next.js 14, TypeScript, shadcn/ui, and Tailwind CSS, designed to provide developers with a ready-to-use, flexible pricing section featuring dark and light mode support, monthly and yearly plan toggles with automatic yearly savings calculations, plan highlighting with "Popular" and "Exclusive" tags for conversion optimization, and responsive design ensuring optimal presentation across all devices. This production-ready component addresses the common challenge that effective pricing pages significantly impact conversion rates and revenue, yet many developers struggle to design pricing tables that are both visually appealing and functionally effective. Perfect for SaaS applications requiring subscription plan presentation, product launches testing different pricing strategies, startups optimizing pricing page conversion rates through A/B testing, or any business where pricing complexity (multiple tiers, billing frequencies, feature comparisons) demands clear visual hierarchy and user-friendly interaction patterns. The automatic calculation of yearly savings eliminates manual updates when pricing changes, while the plan highlighting features enable dynamic promotion of preferred tiers based on marketing strategies or inventory levels. As a fully customizable template, developers can adapt colors, features, pricing structures, and styling to match brand guidelines while maintaining the proven conversion patterns and accessibility standards built into the component, accelerating the path from pricing strategy to implementation.

Shadcn Datetime Picker is a beautifully crafted datetime picker component built with React, Next.js, TypeScript, shadcn/ui, and Tailwind CSS, providing seamless date and time selection, customizable layouts easily adaptable to fit various design requirements, and responsive design ensuring optimal user experience across different devices from mobile to desktop. With a TypeScript-heavy implementation (96% of codebase) ensuring type safety and excellent IDE support, this component addresses the universal need for reliable datetime input in modern web applications while maintaining the aesthetic quality and accessibility standards expected from shadcn/ui components. Perfect for appointment scheduling systems, event registration forms, task management applications with deadline setting, booking platforms handling reservations and availability, or any application where datetime selection is a frequent user interaction that directly impacts data accuracy and user satisfaction. The customizable layout enables developers to adapt the picker's appearance to match specific design systems without fighting against opinionated defaults, while the responsive design ensures consistent functionality whether users interact via touch on mobile devices or mouse and keyboard on desktop workstations. Deployed on Vercel with a live demo for evaluation, this component demonstrates how focusing on visual appeal and user experience can transform a routine form input into a polished interaction that enhances perceived application quality and professionalism.

Next.js 15 Starter Shadcn is a comprehensive starter template built with Next.js 15, React 19, TypeScript 5, Tailwind CSS 4, shadcn/ui, ESLint 9, and Prettier 3, designed to accelerate web development projects with powerful tools and configurations optimized for VS Code development workflows. This robust, opinionated starter features App Directory structure for modern Next.js development, system, light, and dark mode support for user preferences, Next.js Bundle Analyzer for performance optimization, Docker support with both Node.js and Bun configurations for containerization, comprehensive ESLint and Prettier configurations ensuring code quality, recommended VS Code extensions for enhanced developer experience, and cloud development environment options for remote collaboration. Supporting multiple package managers (npm, yarn, pnpm, bun) and providing extensive code quality tooling, this template reduces initial project setup time from hours to minutes while promoting best practices in modern web development. Perfect for development teams standardizing project structure and tooling, agencies delivering consistent client projects, individual developers building multiple applications with similar requirements, or any scenario where reducing boilerplate setup and decision fatigue enables faster progression from idea to implementation. The preconfigured development environment eliminates the common friction of setting up linting, formatting, and build tools, while the Docker configurations ensure consistent development and deployment environments across team members and production infrastructure, creating a foundation that scales from solo projects to team-based development.

UI Colorgen is a web application built with Next.js 14, TypeScript, Tailwind CSS, and Radix UI, designed to simplify shadcn/ui color configuration by providing an interactive interface for listing TailwindCSS colors in multiple formats (hex, rgb, hsl), using a color picker to update CSS variables in real-time, adding custom color variables beyond defaults, selecting initial colors and preferred color formats, generating CSS root variables for theme files, and creating Tailwind color configuration for projects. This specialized tool addresses the complexity of color system setup in shadcn/ui projects where manual CSS variable management becomes error-prone and time-consuming as color schemes evolve. Perfect for design systems teams establishing brand colors across shadcn/ui components, developers implementing client-specific themes in white-label applications, agencies customizing shadcn/ui for multiple clients with different brand guidelines, or any project where efficient color configuration directly impacts development velocity and design consistency. The TypeScript-heavy codebase (94.8%) provides excellent type safety for color manipulation operations, while the multi-format color display helps developers work with colors in their preferred format whether designing in Figma (hex), working with CSS (hsl), or integrating with existing systems (rgb). By generating ready-to-use CSS variables and Tailwind configurations, UI Colorgen eliminates the manual translation between design decisions and code implementation, reducing errors and enabling rapid theme iterations that respond to design feedback or A/B testing results.