Open source and free shadcn templates using Next.js

InstaGraph is an open-source knowledge graph generator inspired by Yohei Nakajima's Instagraph.ai that transforms unstructured text into interactive visual knowledge graphs using AI. Built with a Next.js frontend for the web interface, FastAPI backend for AI processing, React Flow for graph visualization, Tailwind CSS and Headless UI for styling, and OpenAI API for intelligent graph generation, this full-stack application demonstrates how to build AI-powered data visualization tools that make complex information easier to understand. The platform features automatic knowledge graph generation from user-provided text, interactive graph visualization with zoom, pan, and node manipulation, streaming and server-sent event endpoints for real-time updates, clean web interface for easy text input and graph viewing, and seamless integration between modern frontend and Python backend technologies. Users simply navigate to the application, input their text content, click submit, and watch as the AI analyzes relationships and concepts to generate a visual knowledge graph showing connections between ideas, entities, and topics. This visualization approach is invaluable for students and researchers organizing study materials and research notes, content creators mapping out article structures and topic relationships, product managers visualizing feature dependencies and user flows, educators creating visual learning aids from textual content, and anyone trying to understand complex information through visual connections. The project showcases how to architect full-stack AI applications with separate frontend and backend concerns, implement OpenAI integration for natural language understanding, build interactive data visualizations with React Flow, handle streaming responses for real-time feedback, and create intuitive interfaces for AI-powered tools. InstaGraph makes knowledge more accessible by transforming dense text into clear, visual representations of how concepts connect.

DevTerms is a crowdsourced dictionary website specifically designed to help developers find clear, community-contributed definitions for technical terms, programming jargon, acronyms, and industry concepts that often confuse newcomers and experienced developers alike. Built with Next.js, React, Tailwind CSS, shadcn/ui components, Drizzle ORM for type-safe database queries, Turso for SQLite database hosting, and Meilisearch for powerful, typo-tolerant search functionality, this platform creates a collaborative knowledge base where the developer community can contribute, refine, and discover technical definitions. The application features crowdsourced definitions allowing multiple perspectives on technical concepts, lightning-fast search powered by Meilisearch with autocomplete and fuzzy matching, community voting and curation to surface the best explanations, social media integration sharing daily developer wisdom on X (Twitter) and Bluesky, clean, distraction-free interface optimized for quick reference, and comprehensive coverage of programming languages, frameworks, tools, and methodologies. Hosted on Vercel for global edge delivery, DevTerms addresses the common frustration of encountering unfamiliar technical terminology in documentation, code reviews, or technical discussions without an accessible, developer-friendly resource to consult. The platform is perfect for junior developers learning industry terminology and best practices, experienced developers encountering unfamiliar acronyms in new domains, technical writers ensuring accurate usage of terms in documentation, coding bootcamp students building their technical vocabulary, and anyone in tech who values clear, community-validated definitions over generic dictionary entries. The open-source nature encourages community contributions, making DevTerms a living resource that evolves with the industry. This project demonstrates how to build community-driven content platforms, implement advanced search with Meilisearch, use Drizzle ORM with SQLite databases, create engaging developer tools, and foster collaborative knowledge sharing in technical communities.

The shadcn/ui Big Calendar is a beautifully styled integration of React Big Calendar with shadcn/ui's design system, providing seamless light and dark theme support through pure CSS variable-based theming without JavaScript manipulation. Built with Next.js, React, Tailwind CSS, and shadcn/ui components, this reusable calendar component automatically adjusts its appearance based on the selected theme using shadcn's CSS variables, creating smooth theme transitions and consistent visual experiences across your application. The implementation features automatic theme switching that respects user preferences and system settings, pure CSS-based theming eliminating JavaScript overhead for theme management, Next.js compatibility with server-side rendering support, multiple calendar views including month, week, day, and agenda layouts, full React Big Calendar functionality for event scheduling and management, responsive design adapting to mobile and desktop screen sizes, and a dedicated CSS stylesheet that leverages shadcn's color tokens for unified styling. Unlike standard React Big Calendar implementations that require manual theme configuration or complex JavaScript solutions, this integration uses CSS variables to ensure calendar colors, backgrounds, borders, and text automatically match your shadcn/ui theme, whether users prefer light mode during the day or dark mode at night. The component is perfect for building appointment scheduling applications for services, healthcare, or consulting, team calendar interfaces for project management and collaboration, event management platforms for conferences or community events, resource booking systems for meeting rooms or equipment, and any application requiring a full-featured calendar with professional, theme-aware styling. This project demonstrates how to integrate third-party React components with shadcn/ui's theming system, implement CSS variable-based theming for complex UI components, create reusable calendar solutions for Next.js applications, and maintain visual consistency across light and dark modes.

Uxie is an intelligent PDF reader application that started as a first-place hackathon project and evolved into a comprehensive learning platform combining PDF annotation, note-taking, real-time collaboration, and AI-powered features including chat, flashcard generation with AI feedback, text-to-speech, and OCR capabilities. Built with Next.js, TypeScript, Tailwind CSS, shadcn/ui components, tRPC for type-safe APIs, Prisma ORM for database management, Supabase for backend services, Vercel AI SDK and Langchain for AI features, Pinecone for vector embeddings, Next Auth for authentication, and Liveblocks for real-time collaboration, this full-stack application transforms static PDFs into interactive learning experiences. The platform features comprehensive PDF annotation tools with highlighting, underlining, and margin notes, intelligent note-taking with custom editor blocks and AI-powered text autocompletion, AI chat functionality that answers questions about document content using RAG (Retrieval Augmented Generation), automatic flashcard generation from document content with LLM-generated feedback on answers, sentence-by-sentence text-to-speech with visual highlighting (English only), OCR support for extracting text from scanned documents and images, real-time collaborative editing powered by Liveblocks allowing multiple users to annotate simultaneously, and vector embedding storage in Pinecone for semantic search and AI context. The AI integration uses the Vercel AI SDK and Langchain to provide contextual understanding of PDFs, enabling students to ask questions and receive answers grounded in the actual document content. This application is invaluable for students who want to enhance their study sessions with AI-powered learning tools, researchers annotating academic papers and collaborating on document analysis, professionals reviewing contracts or reports with team members, educators creating interactive reading materials with embedded questions and flashcards, and anyone who learns better through active engagement rather than passive reading. Uxie demonstrates how to build AI-enhanced document viewers, implement real-time collaboration in React applications, integrate vector databases for semantic search, create custom text editors with AI features, and design engaging learning experiences through technology.

Shopco is a fully functional, open-source e-commerce website that converts a professional Figma design into a responsive, production-ready web application using Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui components, Framer Motion for animations, and Redux Toolkit for state management. This project demonstrates best practices for building modern e-commerce platforms with server-side rendering, static site generation, smooth animations, and global state management while maintaining excellent performance and SEO optimization. The application features a complete product catalog with filtering, sorting, and search functionality, responsive, mobile-first design that works beautifully across all devices, shopping cart management powered by Redux Toolkit, smooth page transitions and micro-interactions using Framer Motion, accessible and customizable UI components from shadcn/ui, optimized images and fonts for fast loading times, type-safe development with TypeScript throughout, and well-organized project structure following Next.js 14 best practices. The tech stack showcases how to combine Redux for complex state management with Next.js server components, implement animations that enhance rather than hinder user experience, structure large applications with clear separation of concerns in app routing, components, Redux features, and styles, and build SEO-friendly e-commerce sites with proper meta tags and semantic HTML. This project is valuable for developers learning to build production-ready e-commerce applications from design to deployment, studying how to convert Figma designs into pixel-perfect web implementations, understanding Redux Toolkit patterns in modern Next.js applications, exploring animation best practices with Framer Motion, and creating portfolio pieces demonstrating full-stack e-commerce capabilities. Released under the MIT License, Shopco serves as both a functional e-commerce template and an educational resource for contemporary web development practices in the e-commerce domain.

Image Upload shadcn is a clean, reusable image upload component built with Next.js, TypeScript, shadcn/ui components, and Cloudinary integration for cloud-based image storage and management. This implementation demonstrates best practices for handling file uploads in modern React applications, including drag-and-drop functionality, image preview, upload progress feedback, and seamless integration with Cloudinary's powerful image CDN and transformation API. The component features intuitive drag-and-drop interface for effortless image selection, instant image preview before upload confirmation, responsive UI built with shadcn/ui components ensuring consistent styling, Cloudinary integration for scalable, cloud-based image storage, TypeScript throughout for type safety and better developer experience, optimized image delivery through Cloudinary's global CDN, and easy deployment on Vercel for production-ready hosting. Unlike basic file upload inputs, this component provides a polished user experience with visual feedback, error handling, and professional styling that matches shadcn/ui's design language. The Cloudinary integration eliminates the need for custom server-side upload handling, providing automatic image optimization, transformation capabilities, and reliable storage without managing your own infrastructure. This component is perfect for building user profile picture uploads in social applications, product image management in e-commerce platforms, document or receipt uploads in business applications, media galleries requiring cloud storage and CDN delivery, and any form requiring image input with professional UX. The project demonstrates how to implement file uploads in Next.js applications, integrate third-party services like Cloudinary with proper environment configuration, create reusable upload components with shadcn/ui, handle user feedback during asynchronous operations, and deploy image-heavy applications on Vercel. The TypeScript implementation ensures type safety when working with file objects and Cloudinary responses.

The shadcn/ui Form Builder is a powerful WYSIWYG (What You See Is What You Get) form generation tool that revolutionizes form development by allowing developers to visually select input fields and automatically generate production-ready code with integrated shadcn/ui components, React Hook Form, and Zod validation schemas. Built with Next.js, TypeScript, Tailwind CSS, Drizzle ORM for database management, and shadcn/ui components, this tool eliminates the tedious manual work of writing form boilerplate, validation schemas, and component wiring. The form builder features a visual drag-and-drop interface for selecting and configuring input fields, automatic Zod schema generation ensuring type-safe validation, seamless integration with React Hook Form for performant form state management, one-click code generation producing copy-paste ready form components, support for various input types including text, email, number, select, checkbox, radio, and more, multi-field line configurations for complex form layouts, and customizable styling following shadcn/ui's design patterns. The platform's philosophy is simple: imagine selecting the input fields you need and having everything else—validation, state management, error handling, accessibility—done automatically. The ambitious roadmap includes expanding input field types with file uploads, OTP inputs, and multi-select components, support for alternative validation libraries beyond Zod, and pre-built form templates for common use cases like contact forms, registration forms, and surveys. This tool is invaluable for developers building forms who want to skip repetitive boilerplate and focus on unique logic, teams establishing consistent form patterns across multiple projects, rapid prototyping scenarios where form creation speed matters, applications requiring numerous forms with different field configurations, and anyone frustrated with manually wiring React Hook Form and Zod together. The Form Builder demonstrates how to create developer productivity tools, implement code generation with proper formatting and imports, integrate form libraries for optimal developer experience, and design intuitive interfaces for technical tasks.

Open Self Service (O2S) is an open-source development kit for building composable, future-proof customer self-service portals with API-agnostic architecture that allows you to swap backends without breaking the frontend. Maintained by Hycom, this framework combines Next.js for the frontend, NestJS for an API harmonization server, TypeScript for type safety, shadcn/ui components, and Tailwind CSS to create flexible customer portals that compose experiences by combining multiple backend capabilities from different sources. The architecture features headless and API-first design allowing any backend to be plugged in, composable backend capabilities where you mix services from different providers, pre-built integrations including StrapiCMS for content management, Auth.js for authentication, Redis for caching, and Algolia for search, extensible UI components and API integration layers, and modular design enabling easy customization without vendor lock-in. Unlike monolithic customer portal solutions that tie you to specific backends and limit flexibility, O2S treats backends as interchangeable building blocks, allowing enterprises to integrate their existing CMS, IAM, CRM, ERP, and other systems without rebuilding the entire frontend when backend providers change. This approach is invaluable for enterprises building customer portals that need to integrate with multiple legacy systems, organizations wanting to avoid vendor lock-in by maintaining backend flexibility, teams managing complex architectures with services from multiple providers, companies planning to migrate backends over time without disrupting customer experience, and developers who need a production-ready portal foundation with modern UX patterns. The framework demonstrates how to build API-agnostic frontends with proper abstraction layers, integrate multiple backend services through a unified harmonization layer, implement pre-built integrations while maintaining composability, design scalable customer portal architectures, and future-proof applications against backend technology changes. Open Self Service makes building sophisticated customer portals accessible while ensuring long-term flexibility and maintainability.

Marshal UI is a comprehensive digital marketplace application built with Next.js 14, demonstrating how to create production-ready platforms where creators can sell digital products with built-in payment processing, authentication, and database management. Created by Jan Marshal as a step-by-step tutorial project, this full-featured marketplace integrates Kinde for robust authentication including multi-factor authentication and passwordless login, Stripe Connect for marketplace payments enabling seller payouts and platform fees, Prisma ORM with Supabase PostgreSQL for type-safe database operations, Tailwind CSS and shadcn/ui for modern, accessible components, Zod for server-side validation ensuring data integrity, Resend and React Email for transactional email templates, and deployment on Vercel for global edge performance. The application features comprehensive authentication flows supporting OAuth with Google and GitHub, passwordless magic link login, multi-factor authentication for enhanced security, seller onboarding with Stripe Connect allowing creators to receive payments, product listing and management for digital goods, secure payment processing with Stripe webhooks for real-time updates, email notifications using beautifully designed React Email templates, and server-side validation protecting against malicious inputs. The marketplace architecture showcases how to handle complex payment flows where platform fees are collected while sellers receive payouts, implement webhook handling for asynchronous Stripe events, design database schemas for multi-sided marketplaces, and build type-safe APIs with proper error handling. This project is invaluable for developers learning to build marketplace platforms like Gumroad or Etsy, understanding Stripe Connect integration for multi-vendor payment processing, implementing modern authentication patterns with Kinde, studying full-stack Next.js 14 application architecture, and creating portfolio projects demonstrating e-commerce expertise. The tutorial format helps developers elevate their skills by walking through real-world challenges in marketplace development.

Next Shadcn Landing is a streamlined, production-ready landing page template built with Next.js, shadcn/ui, TypeScript, and Tailwind CSS that's designed to be easy to set up, highly customizable, quick to deploy, and fully responsive across all devices. Unlike complex landing page builders or bloated templates, this starter focuses on simplicity and developer experience, allowing you to launch professional landing pages in minutes rather than hours. The template features a clean, modern design following shadcn/ui's aesthetic principles, fully responsive layout adapting seamlessly to mobile, tablet, and desktop screens, TypeScript support ensuring type safety throughout the codebase, Tailwind CSS for rapid styling customization, organized project structure with clear separation of concerns, and simple configuration through centralized config files. Customization is straightforward: modify content in the /config folder for site-wide settings, adjust layouts and routing in the /app directory, change navigation links in lib/links.ts, and deploy to Vercel with a single click. The setup process takes minutes: clone the repository using degit, update package.json with your project name, install dependencies with your preferred package manager, and run the development server to see your landing page. This template is perfect for indie developers launching SaaS products who need professional landing pages quickly, startups building MVPs who want to focus on product rather than marketing site development, agencies creating client landing pages with consistent, maintainable architecture, developers building portfolios or personal sites with modern web technologies, and anyone who values simplicity and speed over feature bloat. The minimalist approach means less code to maintain, faster page loads, and easier customization compared to heavyweight landing page frameworks. Released under the MIT License, Next Shadcn Landing provides the essential foundation for landing pages without unnecessary complexity, letting you customize what matters while handling the boilerplate.

CNBlocks (also known as Tailark blocks) is a collection of pre-built, responsive marketing website sections designed to speed up workflow by providing copy-paste shadcn/ui and Tailwind CSS blocks specifically optimized for marketing pages. Built with Next.js, TypeScript, Tailwind CSS, and shadcn/ui components in a monorepo structure managed by pnpm workspace and Turbo, this library offers developers ready-to-use sections that can be dropped into marketing sites without starting from scratch. The blocks feature fully responsive designs that adapt to mobile, tablet, and desktop screens, pre-styled shadcn/ui components maintaining consistent design language, Tailwind CSS classes for easy customization, TypeScript throughout ensuring type safety, modular architecture allowing selective usage of only needed blocks, and modern monorepo structure demonstrating professional project organization. Unlike generic component libraries, these blocks are purpose-built for marketing website patterns including hero sections, feature showcases, pricing tables, testimonials, call-to-action sections, and footer layouts, providing context-specific designs rather than isolated components. The collection eliminates the repetitive work of building common marketing page sections, allowing developers to assemble professional marketing sites by combining pre-tested blocks and customizing them for specific branding. This resource is perfect for developers building SaaS landing pages who need professional marketing sections quickly, agencies creating client websites with consistent, high-quality designs, startups launching products who want marketing pages without hiring designers, indie developers building side projects on tight timelines, and anyone who values speed and consistency over building every section from scratch. The project demonstrates how to organize component libraries as monorepos, create reusable marketing sections with shadcn/ui, structure blocks for easy copy-paste integration, and build maintainable component collections with TypeScript and Tailwind CSS.

The Next Mobbin Clone is a UI-focused project that replicates Mobbin.com's design to test and showcase shadcn/ui's latest components including Carousel, CommandDialog, Dropdown Menu, HoverCard, and Checkbox in a real-world interface context. Built with Next.js 14, shadcn/ui, Tailwind CSS, and Framer Motion for animations, this #builtinpublic project demonstrates how shadcn/ui components work together to create sophisticated, production-quality interfaces while serving as a learning resource for developers exploring component composition patterns. Created by @miickasmt in 2024, the clone focuses purely on UI implementation without backend functionality, showcasing pixel-perfect icon design, performance optimization using next/font for font loading, dynamic Open Graph image generation for social sharing, and smooth animations enhancing user interactions. The project demonstrates shadcn/ui's Carousel component for image and content sliders, CommandDialog for keyboard-first navigation and search, Dropdown Menu for contextual actions and settings, HoverCard for rich preview experiences on hover, and Checkbox for selection and filtering interfaces. Unlike simple component demos that show components in isolation, this clone places them in a cohesive, real-world UI where interactions between components feel natural and purposeful. The roadmap includes fixing UI interactions for improved polish, adding authentication pages to expand component coverage, and implementing a pricing page demonstrating shadcn/ui in conversion-focused contexts. This project is invaluable for developers learning how to compose shadcn/ui components into complete interfaces, studying real-world component interaction patterns, understanding Next.js 14 performance optimization techniques, exploring Framer Motion integration with shadcn/ui, and building portfolio pieces demonstrating frontend craftsmanship. The UI-only approach keeps the codebase focused and accessible, making it easy to extract patterns and adapt them for your own projects. Released under MIT License, the Mobbin clone serves as both a reference implementation and inspiration for building polished web interfaces.