Open source and free shadcn templates using Next.js

Shadcn UI Customizer is an open-source web application built with Next.js, TypeScript, Tailwind CSS, and shadcn/ui, providing an intuitive visual interface with interactive color pickers for customizing shadcn/ui themes without manual CSS variable editing. This powerful tool enables developers and designers to customize comprehensive design tokens including background and foreground colors, primary, secondary, and accent colors, card, popover, and input styles, border properties, and border radius settings, all through a user-friendly web interface that provides real-time previews of changes. Inspired by the original shadcn/ui theme customizer, this enhanced version offers additional customization options and improved developer experience for teams establishing brand-specific design systems. Perfect for agencies customizing shadcn/ui for multiple clients, product teams aligning UI themes with brand guidelines, designers collaborating with developers on design system specifications, or any project where theme customization without diving into CSS files accelerates the design-to-development workflow. With deployment on Vercel and a TypeScript-heavy codebase (99%), the customizer demonstrates how visual tools can enhance the shadcn/ui ecosystem, making theme customization accessible to team members who may not be comfortable editing raw CSS variables while maintaining the flexibility and control that developers expect.

CSV Importer is a comprehensive data import application built with Next.js, Tailwind CSS, shadcn/ui, react-dropzone, uploadthing, and Papaparse, designed to simplify the entire workflow of uploading, parsing, and importing CSV files into applications. This streamlined tool provides five key capabilities: intuitive CSV file upload with drag-and-drop functionality, robust CSV parsing handling various formats and encodings, data preview allowing users to verify content before import, flexible CSV field mapping to table fields for schema alignment, and reliable data import into tables with validation and error handling. Bootstrapped with create-t3-app and following modern web development best practices, the application addresses the common challenge of data migration and bulk import features that nearly every business application eventually requires. Perfect for SaaS applications offering data import functionality, admin panels managing bulk data operations, migration tools helping users switch from competitor products, or any application where CSV import is a critical user workflow that directly impacts adoption and user satisfaction. The combination of react-dropzone for file handling, Papaparse for parsing, and uploadthing for storage provides a production-ready solution that handles edge cases and provides users with confidence during data import operations.

LinkNode is an open-source link-in-bio tool built with Next.js, TypeScript, Tailwind CSS, and shadcn/ui, designed to help users generate one centralized link for all their online destinations with unlimited link capacity and customization options. This comprehensive platform enables users to add unlimited links to their profile page, customize social media and other link icons for brand consistency, provide live preview functionality to see changes in real-time, and leverage integrated URL shortening with Dub.co including support for custom domains and link cloaking for professional branding. Hosted on Vercel and emphasizing simplicity without sacrificing features, LinkNode addresses the growing need for content creators, businesses, and individuals to consolidate their online presence into a single, shareable destination. Perfect for social media influencers managing multiple platforms, businesses directing customers to various resources, event organizers sharing registration and information links, or anyone seeking to replace limited or expensive link-in-bio services with a self-hosted, fully customizable solution. The integration with Dub.co's URL shortening service adds professional link management capabilities, enabling users to track clicks, use branded short links, and maintain clean, memorable URLs while the live preview feature ensures perfect presentation before sharing with audiences.

AI LLM Comparison is a comprehensive, open-source web application built with Next.js 14, TypeScript, Tailwind CSS, Radix UI, and integrated with Vercel Analytics and PostHog, designed to help users compare AI language models across different providers in one centralized platform. This invaluable resource provides price comparison across major AI providers (OpenAI, Anthropic, Google, Meta, Cohere), an interactive pricing calculator for cost estimation, side-by-side model comparisons highlighting capabilities and limitations, real-time data updates sourced from BerriAI's LiteLLM for accuracy, responsive design for all devices, and completely free access without registration requirements. The platform addresses the growing challenge of AI model selection as the LLM landscape becomes increasingly complex with diverse pricing models, capability differences, and provider-specific features. Perfect for developers choosing models for production applications, businesses evaluating AI implementation costs, researchers comparing model capabilities for academic work, or students learning about LLM options and pricing structures. By aggregating accurate, up-to-date information from trusted sources and presenting it through an intuitive comparison interface, this tool eliminates the time-consuming process of visiting multiple provider websites and reconciling different pricing structures, enabling informed decisions about AI model selection based on transparent data rather than marketing materials.

Next Prisma Tailwind Ecommerce is an open-source, full-stack e-commerce platform built with TypeScript, Next.js 14 App Router with React Server Components, Prisma ORM, Tailwind CSS, Radix UI, shadcn/ui, and Zod validation, providing both a customer-facing storefront and a comprehensive admin panel for complete store management. This enterprise-grade solution features custom dynamic sitemap generation for SEO, admin dashboard for managing products, orders, and payments, file uploads with next-cloudinary integration, JWT authentication with httpOnly cookies for security, storefront with integrated blog powered by MDX, email verification and invoice generation, metadata handling for SEO optimization, and internationalization support for global markets. The monorepo architecture separates the admin and storefront applications, allowing independent scaling and deployment to Vercel, Netlify, or Docker environments. Perfect for businesses launching online stores with full control over the stack, developers building custom e-commerce solutions for clients, startups requiring rapid deployment without merchant lock-in, or any project where combining content marketing (blog) with product sales creates competitive advantages. The separation of admin and storefront concerns enables teams to work independently on customer experience and operational tools, while the MDX-powered blog system allows non-technical team members to create SEO-optimized content that drives organic traffic and customer engagement.

Instagram Video Downloader is an educational web application built with Next.js 15+, TypeScript, shadcn/ui, Tailwind CSS v4, React Hook Form, Zod validation, TanStack Query, next-themes, and next-intl, designed to demonstrate modern web development techniques through a practical Instagram video downloading interface. This comprehensive learning project showcases Next.js App Router implementation, responsive and clean UI development with shadcn/ui components, form handling with React Hook Form and Zod validation, client-side caching with TanStack Query for performance optimization, light/dark mode theming for user preference, and internationalization support for global accessibility. Built primarily as an educational demonstration, the project provides hands-on learning opportunities for developers studying Next.js fundamentals, UI component development, state management, form handling, API integration, modern styling techniques, and TypeScript implementation in production-like scenarios. Perfect for developers learning modern web development stacks, coding bootcamp instructors seeking real-world project examples, students building portfolios with contemporary technologies, or anyone exploring how different libraries and frameworks integrate in Next.js applications. The project emphasizes responsible use and learning while acknowledging potential Terms of Service considerations, making it valuable as a technical reference for understanding how complex user interactions, external APIs, and modern React patterns work together in production web applications.

Shadcn Calendar Component is a flexible, feature-rich date picker built with Next.js, React, TypeScript, shadcn/ui, date-fns, date-fns-tz, and Tailwind CSS, designed to provide advanced date selection capabilities with single and multi-month views, predefined date range options, and timezone-aware date handling. This sophisticated component supports selecting predefined ranges like "Today", "This Week", "This Year" for quick date selection, interactive date picking with both mouse and keyboard controls for accessibility, customizable year and month range selection for historical or future dates, and timezone-aware date handling ensuring accurate date representation across global deployments. The clean, modern UI design integrates seamlessly with shadcn/ui design systems while the date-fns library provides robust date manipulation without the overhead of larger date libraries. Perfect for analytics dashboards requiring date range filters, booking systems handling reservations across timezones, reporting tools with flexible date selection requirements, or any application where sophisticated date picking directly impacts user workflows and data accuracy. The component's support for predefined ranges accelerates common user interactions like viewing "Last 7 Days" or "This Month" data without manual date selection, while timezone awareness prevents the common pitfalls of date handling in globally distributed applications where server and client timezones differ.

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.