Free Open Source shadcn/ui Templates

Radix NG Primitives is an Angular port of Radix UI Primitives built with TypeScript (82.6%), MDX, CSS, and Astro, providing a low-level, headless UI component library focused on accessibility, customization, and developer experience for Angular applications. This comprehensive toolkit offers unstyled, functional primitives including Accordion, Avatar, Checkbox, Dialog, and many others based partially on @angular/cdk, supporting incrementally adoptable components that can serve as the base layer of design systems or be adopted gradually into existing projects. As an unofficial but API-compatible port maintaining the original Radix UI principles, the library brings the proven accessibility patterns and headless component architecture popularized in the React ecosystem to Angular developers who previously lacked equivalent tooling. Perfect for Angular teams building accessible design systems, enterprises requiring WCAG-compliant interfaces, developers transitioning from React familiar with Radix patterns, or any Angular application where accessibility compliance, customization freedom, and high-quality component foundations are non-negotiable requirements. With strong community engagement through Discord and GitHub Discussions, Radix NG Primitives demonstrates how successful component architectures can transcend specific frameworks, enabling the Angular ecosystem to benefit from the accessibility research, usability testing, and developer experience refinements that made Radix UI valuable in React while adapting patterns to Angular's different component model, dependency injection, and change detection systems, ultimately improving accessibility standards across the entire web development landscape.

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.

Next Entree is a thoughtfully configured Next.js 14+ starter template designed to help developers start new projects with best practices and essential tooling already in place. Built with the App Router architecture, TypeScript, Tailwind CSS, and shadcn/ui components, this template eliminates the repetitive setup process that developers face when starting fresh Next.js projects. The starter includes type-safe environment variable management with validation using @t3-oss/env-nextjs to catch configuration errors at build time, pre-configured icon libraries (Lucide, Radix Icons) ready to use, ESLint and Prettier configured for consistent code style, absolute imports with path aliases for cleaner import statements, recommended VS Code settings and extensions, optimized Tailwind CSS configuration, and basic shadcn/ui components already installed. The template emphasizes developer experience with sensible defaults that can be easily customized, reducing the time from 'create next app' to writing actual application code from hours to minutes. Next Entree is perfect for developers starting new side projects or MVPs who want to skip boilerplate setup, teams establishing consistent project structures across multiple applications, hackathon participants who need to move fast with reliable foundations, agencies building multiple client projects with similar technical stacks, and anyone learning Next.js 14+ who wants to understand proper project configuration. By handling the tedious configuration decisions upfront, Next Entree allows developers to focus immediately on building features rather than debugging ESLint conflicts or setting up environment variables.

Shadcn Theme Editor is an intuitive visual tool for customizing and managing color themes in shadcn/ui projects, eliminating the need to manually edit CSS variables or understand HSL color spaces. Built as a React component with TypeScript and Tailwind CSS, this theme editor provides a user-friendly interface where developers and designers can interactively adjust theme colors, preview changes in real-time, and export the resulting CSS configurations. The editor features interactive color pickers for all shadcn/ui theme tokens including background, foreground, primary, secondary, accent, destructive, and border colors, real-time preview of components with the selected theme applied, support for both light and dark mode customization, automatic HSL to CSS variable conversion, one-click copying of generated CSS for integration into projects, preset theme templates to start from popular color schemes, and accessibility contrast checking to ensure readable color combinations. The interface displays all theme tokens organized by their purpose, making it easy to understand how each color is used across the component library. This tool is invaluable for designers customizing shadcn/ui themes without CSS knowledge, developers building white-label applications requiring multiple brand themes, teams experimenting with color palettes before committing to design decisions, projects needing to match specific brand guidelines with precise color control, and anyone frustrated with manually converting hex colors to HSL format for shadcn/ui configuration. The Theme Editor bridges the gap between visual design and technical implementation, making theme customization accessible and efficient.

The Astro shadcn/ui Template combines Astro's content-focused static site generation with shadcn/ui's beautiful component library, creating an ideal starter for building fast, content-driven websites with modern interactive components. Built with Astro 4, React, TypeScript, Tailwind CSS, and Radix UI primitives, this template demonstrates how to integrate shadcn/ui components into Astro's island architecture for optimal performance. Astro's unique approach loads JavaScript only for interactive components (islands), making it perfect for content-heavy sites like blogs, documentation, marketing pages, and portfolios that need occasional interactivity without the overhead of a full SPA. The template includes shadcn/ui components configured to work within Astro islands, optimized Tailwind CSS configuration for Astro's build process, TypeScript support for type-safe component development, example pages showing how to use shadcn/ui components in Astro, proper integration of Radix UI for accessibility, and optimal build configurations for production deployment. The setup allows developers to use shadcn/ui's Button, Dialog, Dropdown, and other components within Astro's partial hydration model, shipping minimal JavaScript while maintaining rich interactivity where needed. This template is perfect for building documentation sites with interactive examples and search functionality, marketing websites with contact forms and modals, content-heavy blogs with interactive elements, portfolio sites with project galleries and filtering, and landing pages that need high performance scores with selective interactivity. The combination of Astro's speed with shadcn/ui's polish creates websites that load instantly while still providing excellent user experiences.