Open source and free shadcn templates using Next.js

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.

The Next.js Notion Waitlist Template is an elegant, production-ready solution for building and managing product waitlists using Next.js 14, Notion as a headless CMS, and modern web technologies. Built with TypeScript, Tailwind CSS, and shadcn/ui components, this template enables founders and product teams to quickly launch beautiful waitlist pages that capture early user interest, manage signups, and send automated confirmation emails. The stack integrates Notion as a database for storing and organizing waitlist entries, Upstash Redis for rate limiting to prevent spam and abuse, Resend for transactional email delivery with custom domain support, and shadcn/ui for a polished, responsive user interface. Key features include a sleek waitlist signup form with email validation, automatic storage of submissions in a Notion database, rate limiting to protect against bot submissions, automated welcome emails sent via Resend, real-time form validation and error handling, responsive design that works on all devices, and easy customization of colors, copy, and branding. The template is perfect for launching product pre-launches and beta signups, building early user communities before a product launch, collecting interested leads for SaaS products, creating event registration and RSVP systems, and managing limited-access program applications. With minimal configuration required, teams can deploy a professional waitlist page in minutes while maintaining full control over the data in their Notion workspace.

CarHive is a full-featured car rental marketplace application built with Next.js 14 App Router, TypeScript, and modern web technologies to demonstrate best practices for building e-commerce platforms. Powered by Clerk for authentication, Vercel Postgres for database management, Drizzle ORM for type-safe database queries, and shadcn/ui components for the interface, this project showcases how to build a production-ready rental platform with advanced features. The application includes comprehensive vehicle listings with detailed specifications and high-quality images managed through Cloudinary, advanced search and filtering by location, price, vehicle type, and availability, dynamic routing for individual car detail pages, user authentication with role-based access control via Clerk, Stripe integration for secure payment processing and booking transactions, an infinite logo slider showcasing partner brands, responsive design optimized for mobile and desktop experiences, and database schema with proper relationships between users, vehicles, and bookings. CarHive serves as an excellent reference for developers building marketplace applications where multiple vendors or inventory items need detailed presentation, e-commerce platforms requiring payment integration and booking systems, rental or reservation systems for equipment, properties, or services, and any project requiring image optimization and CDN integration with Cloudinary. The codebase demonstrates professional patterns for state management, form handling, database migrations, and API route organization in Next.js applications.

The shadcn/ui FullCalendar Example is a practical demonstration of integrating FullCalendar, one of the most popular JavaScript calendar libraries, with Next.js and shadcn/ui components to create modern scheduling and event management interfaces. Built with Next.js 14, React, TypeScript, Tailwind CSS, and React Aria for accessibility, this example project shows developers how to combine FullCalendar's powerful features with shadcn/ui's beautiful component design system. The implementation includes a fully interactive calendar with month, week, and day views, event creation and editing with modal dialogs using shadcn/ui Dialog components, drag-and-drop event rescheduling directly on the calendar, event deletion and management capabilities, responsive design that adapts to mobile and desktop screens, accessible UI patterns through React Aria integration, and customizable styling that matches shadcn/ui's design language. The project demonstrates how to properly initialize FullCalendar in a Next.js environment, manage calendar state in React components, style FullCalendar to match shadcn/ui themes, and handle event CRUD operations with TypeScript type safety. This template is ideal for building appointment scheduling systems for healthcare or service businesses, team calendar applications for project management, event management platforms for conferences or meetups, booking systems for resources or meeting rooms, and any application requiring rich calendar functionality with a modern UI. The example serves as a solid foundation for developers who want to quickly add calendar features to their Next.js applications without starting from scratch.

The Stack Auth Multi-Tenant Starter Template is a minimalistic yet powerful foundation for building B2B SaaS applications with multi-tenancy architecture using Next.js 14 and Stack Auth. Built with React, TypeScript, Tailwind CSS, and shadcn/ui components, this template demonstrates how to implement organization-based multi-tenancy where users can belong to multiple teams or workspaces, similar to platforms like Slack, Notion, or GitHub. Stack Auth provides the authentication infrastructure with built-in support for user management, team/organization creation and switching, role-based access control (RBAC) within organizations, invitation systems for adding team members, and OAuth providers for social login. The template includes pre-configured authentication flows with organization context, team switching functionality in the UI, protected routes with organization-level permissions, user profile and settings pages, team management dashboards for admins, and responsive layouts using shadcn/ui components. Developers can quickly build collaborative SaaS platforms where users work in teams, B2B applications requiring workspace isolation and permissions, project management tools with organization hierarchies, customer portal applications with multi-account access, and any application where users need to switch between different organizational contexts. The minimalistic design focuses on essential multi-tenancy patterns without overwhelming complexity, making it easy to understand the architecture and extend with custom features. Stack Auth handles the complex authentication and authorization logic, allowing developers to focus on building unique product features rather than reinventing authentication systems.