Open source and free shadcn templates using Next.js
154 templates • 129 contributors • Open source & free
154
Templates
129
Authors
Available Templates (154)

Jolly UI
Jolly UI is an open-source React component library that provides accessible, customizable components built with React Aria and compatible with shadcn/ui, allowing developers to copy and paste production-ready accessible components into their applications. Written primarily in TypeScript (86.9%), the library combines React Aria's robust accessibility primitives with Tailwind CSS styling and shadcn/ui's design language to deliver components that are both beautiful and fully accessible. Maintained by James Shopland with community contributions, Jolly UI offers comprehensive documentation at jollyui.dev covering component APIs, usage examples, and integration guides. The library focuses on providing high-quality, accessible alternatives to standard UI components, ensuring keyboard navigation, screen reader support, and ARIA compliance work correctly out of the box. Built with Next.js and leveraging React Aria's proven accessibility foundations, Jolly UI components handle complex interactions like focus management, keyboard shortcuts, and touch interactions while maintaining visual consistency with shadcn/ui projects. Perfect for developers who need shadcn/ui-compatible components with React Aria's superior accessibility features, Jolly UI demonstrates how to build inclusive user interfaces that meet WCAG standards without sacrificing design quality or developer experience.

Next WordPress
Next WordPress is a headless WordPress starter template built with Next.js 15 and the WordPress REST API, offering a modern approach to content management with React Server Components and cutting-edge web technologies. The MIT-licensed project provides efficient pagination using query parameters, full TypeScript type safety with Zod schema validation, shadcn/ui components for beautiful design, and Tailwind CSS styling for rapid development. Built on Next.js App Router architecture with React Server Components, the template delivers fast page loads through server-side rendering while maintaining SEO-friendly URLs and proper metadata handling. The WordPress integration uses the REST API to fetch posts, pages, and custom content types with built-in support for featured images, post metadata, and taxonomy terms. Perfect for content-heavy websites, blogs, marketing sites, or any project requiring WordPress's powerful content management capabilities combined with Next.js's modern development experience and performance optimizations.

MVP Boilerplate
MVP Boilerplate is a full-stack starter template combining Flutter for mobile development and Next.js for web applications, both sharing a unified Supabase backend for rapid cross-platform MVP development. The project provides complete authentication flows with Supabase Auth, Stripe payment integration for subscriptions and one-time purchases, shadcn/ui components for the web interface, and a responsive Flutter mobile app with Material Design. Built for developers launching products quickly across iOS, Android, and web, the boilerplate includes user management, payment processing, database schemas, and deployment configurations out of the box. The architecture separates mobile and web codebases while sharing authentication, database, and business logic through Supabase's unified platform, eliminating the need to maintain separate backend services. With TypeScript type safety on the web, Dart for mobile, and PostgreSQL for data persistence, the template provides a production-ready foundation for SaaS applications, mobile apps with web companions, or any project requiring cross-platform deployment with minimal setup time.

Enhanced Button
Enhanced Button is a feature-rich button component extending shadcn/ui's Button with built-in loading states, success animations, error handling, and progress indicators for improved user feedback during async operations. The MIT-licensed component provides automatic state management for promises, displaying loading spinners during execution, success checkmarks on completion, and error states with retry capabilities. Built with React, TypeScript, Framer Motion for smooth animations, and Tailwind CSS for styling, the enhanced button eliminates boilerplate code for common patterns like form submissions, API calls, and async workflows. The component integrates seamlessly with shadcn/ui projects while adding sophisticated interaction patterns including disabled states during loading, customizable success/error messages, progress bars for long-running operations, and automatic state resets. Perfect for form submissions, data mutations, file uploads, or any user action requiring clear feedback about async operation status with professional loading indicators and success confirmations that enhance user experience.

Kokonut UI
Kokonut UI is a collection of animated, accessible UI components built with React, Tailwind CSS, and Framer Motion, providing production-ready components with smooth animations and modern design patterns. The open-source library offers copy-and-paste components following shadcn/ui's philosophy, including animated cards, interactive buttons, smooth transitions, and engaging micro-interactions that enhance user experience. Built with TypeScript for type safety, the components integrate Framer Motion's animation capabilities with Tailwind CSS utility classes, creating visually polished interfaces without complex animation code. Each component is designed for accessibility with proper ARIA attributes, keyboard navigation support, and responsive behavior across devices. Perfect for marketing websites, landing pages, SaaS applications, or any project requiring eye-catching animations and professional polish beyond basic UI primitives, Kokonut UI demonstrates how to combine animation libraries with utility-first CSS for components that are both beautiful and maintainable.

Next Starter
Next Starter is a comprehensive Next.js 15 template combining modern development tools including TypeScript, Tailwind CSS, shadcn/ui components, Drizzle ORM, and comprehensive testing setup for rapid application development. The MIT-licensed starter provides a complete development environment with ESLint and Prettier configurations, Husky pre-commit hooks, React Hook Form for form management, and Zod schema validation for type-safe data handling. Built on Next.js App Router with React Server Components, the template includes database integration through Drizzle ORM with PostgreSQL, authentication scaffolding, and deployment optimization for Vercel. The project structure follows Next.js best practices with organized component architecture, utility functions, custom hooks, and environment variable management. Perfect for developers starting new Next.js projects who want production-ready tooling, testing infrastructure with Jest and React Testing Library, and a curated set of libraries that work well together without the complexity of larger boilerplates.

Credenza
Credenza is a responsive modal component for shadcn/ui that automatically adapts between dialog and drawer layouts based on screen size, providing optimal user experience across all devices. The MIT-licensed component seamlessly switches from full-screen dialogs on desktop to bottom-drawer sheets on mobile, eliminating the need to manually manage different modal implementations for different viewport sizes. Built with React, TypeScript, shadcn/ui components, Vaul for drawer functionality, and Tailwind CSS, Credenza provides a unified API through composable sub-components including Trigger, Content, Header, Footer, and Body elements. The component supports both declarative and state-based modal management, integrating perfectly with existing shadcn/ui projects while leveraging Vaul's smooth drawer animations. Perfect for applications requiring modals, forms, confirmations, or content overlays that need to work beautifully on both mobile and desktop without writing responsive logic manually.

Time Picker
Time Picker is a simple, lightweight time selection component designed specifically for shadcn/ui projects with a clean, customizable interface for precise time input. The MIT-licensed component provides an intuitive time selection experience with keyboard support, proper validation, and seamless integration with shadcn/ui's design system and form components. Built with TypeScript, React, Next.js, and Tailwind CSS, the picker offers a minimalist approach to time selection without unnecessary complexity or dependencies. The component follows shadcn/ui's copy-and-paste philosophy, allowing developers to customize styling, time formats, and validation rules directly in their codebase. Perfect for booking systems, scheduling interfaces, appointment forms, or any application requiring time input with a polished, accessible user experience that matches shadcn/ui's design language and component patterns.

Framely
Framely is an open-source, lightweight drag-and-drop website editor built with Next.js that provides multi-tenant architecture with full subdomain support for creating modern web applications. The MIT-licensed platform offers a fully customizable, user-friendly interface for building websites through an intuitive drag-and-drop system without requiring extensive coding knowledge. Built with Next.js, Tailwind CSS, Prisma ORM with MySQL, Clerk authentication, and Umami Analytics, Framely provides a complete full-stack solution for website creation with custom domain configurations and tenant isolation. The platform is designed as a flexible boilerplate that developers can customize and extend, welcoming community contributions to shape its evolution. Perfect for SaaS platforms offering website building capabilities, multi-tenant applications requiring subdomain support, agency tools for client website management, or any project needing a developer-friendly website editor that balances ease-of-use with technical flexibility and scalability.

Shadcn Phone Input
Shadcn Phone Input is a customizable international phone number input component built specifically for shadcn/ui with comprehensive validation for any country worldwide. The MIT-licensed component provides seamless country selection with flag icons, automatic formatting based on selected country, and robust validation using the react-phone-number-input library integrated with Zod for form validation. Built with React, TypeScript, Tailwind CSS, and shadcn/ui components, the phone input fills a gap in the shadcn ecosystem by providing a production-ready solution for international phone number collection with proper validation and formatting. The component supports optional phone number fields, clear error messaging for invalid numbers, and flexible form integration with React Hook Form. Perfect for user registration forms, contact information collection, e-commerce checkout flows, or any application requiring international phone number input with proper validation, country detection, and a clean modern UI design that matches shadcn/ui's aesthetic.

Prism UI
Prism UI is a fully customizable component library extending shadcn/ui with pre-built page sections, complex layouts, and production-ready templates for rapid application development. The open-source library provides ready-to-use components including hero sections, feature grids, responsive navigation systems, footer variations, and MDX components for blogs and documentation, all built with accessibility and customization in mind. Built with Next.js 14 and React Server Components, Radix UI primitives, Tailwind CSS, and TypeScript, Prism UI offers developers a comprehensive ecosystem for creating stunning web applications faster than building from scratch. The library extends shadcn/ui's primitive components with higher-level patterns and page sections, supporting dark mode, responsive design across all devices, and full TypeScript type safety. Perfect for marketing websites, landing pages, documentation sites, or any project requiring beautiful, accessible UI patterns beyond basic components, Prism UI helps developers ship polished interfaces quickly while maintaining the flexibility to customize every aspect of the design.

LLMChat
LLMChat is a privacy-first AI chatbot platform with advanced research capabilities, built as a Next.js monorepo supporting multiple LLM providers including OpenAI, Anthropic, Google, and xAI. The open-source platform stores all user data locally in the browser using IndexedDB, ensuring complete privacy while offering specialized chat modes like Pro Search with web integration and Deep Research for complex topic analysis. Built with Next.js, TypeScript, shadcn/ui components, and Tailwind CSS, LLMChat provides a modular workflow orchestration system for agentic AI interactions including task planning, information gathering, analysis, and comprehensive report generation. The platform enables structured, multi-step research processes using advanced language models like GPT-4 while maintaining complete user privacy through client-side data storage. Perfect for researchers, analysts, developers, or anyone requiring sophisticated AI-powered research tools with privacy guarantees, LLMChat demonstrates how to build production-ready AI applications that respect user data while delivering powerful capabilities through workflow-based AI reasoning and multi-provider LLM support.