Open source and free shadcn templates using Next.js

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.

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.

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.

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.