Open source and free shadcn templates using Radix UI
30 templates • 29 contributors • Open source & free
30
Templates
29
Authors
Available Templates (30)

Radix NG Primitives
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.

Carhive
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.

Next Entree
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.

Astro Shadcn UI Template
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.

Chef Genie
Chef Genie is an AI-powered recipe generation application that leverages OpenAI's GPT 3.5 Turbo to create personalized recipes based on user preferences, dietary restrictions, and available ingredients. Built with Next.js 14 Server Actions, Supabase for database and authentication, Clerk for user management, Tailwind CSS, Radix UI, and shadcn/ui components, this project demonstrates how to integrate cutting-edge AI capabilities into modern web applications for practical, everyday use cases. The application features intelligent recipe generation by analyzing user inputs for ingredients, cuisines, and dietary needs, personalized recommendations considering allergies, preferences, and skill levels, recipe saving and organization in user accounts powered by Supabase, beautiful, responsive UI with shadcn/ui components ensuring excellent user experience, server-side rendering for optimal performance and SEO, Zod validation for type-safe form inputs and API requests, and Vercel Analytics integration for monitoring user behavior and performance. The AI integration showcases proper OpenAI API implementation including prompt engineering for consistent recipe outputs, error handling for API failures and rate limits, streaming responses for real-time recipe generation feedback, and cost-effective token usage patterns. This project is currently in active development and serves as an excellent reference for developers building AI-powered food and cooking applications, learning how to integrate OpenAI with Next.js Server Actions, creating personalized content generation systems, implementing user authentication with Clerk and Supabase together, and studying modern full-stack architecture patterns. Chef Genie solves the common problem of "what should I cook" by providing creative, AI-generated recipes tailored to what users have on hand and their dietary needs, making cooking more accessible and enjoyable.

Turborepo Next.js
Turborepo Nextjs is a production-ready monorepo setup combining Turborepo's build system with Next.js and Storybook for efficient multi-package development workflows. Designed for teams building design systems, shared component libraries, or multiple applications from a single codebase, it provides optimal build performance and code sharing capabilities. The monorepo features shared UI component packages with Storybook documentation, multiple Next.js applications sharing common code, TypeScript configuration inheritance across packages, and Turborepo's intelligent caching for faster builds. It includes pnpm workspace configuration for efficient dependency management, shared ESLint and Prettier configurations, centralized build and test scripts, and hot module reloading across packages. The setup demonstrates best practices for component development with isolated testing in Storybook, code reusability across applications, and streamlined deployment pipelines. Perfect for organizations building multi-tenant applications, design system teams maintaining component libraries, or development teams managing multiple related web applications with shared infrastructure and consistent tooling.