Join our Discord Community
fullstack icon

Open source and free shadcn templates using Full-stack

46 templates • 43 contributors • Open source & free

46
Templates
43
Authors

Available Templates (46)

Jetpack template preview
Jetpack
Jetpack is a comprehensive, production-ready Next.js 14 starter template that eliminates weeks of configuration by providing a fully integrated stack with Bun, shadcn/ui, TypeScript, Supabase, Drizzle ORM, Docker, Clerk authentication, and Resend email, perfect for launching modern web applications rapidly. Unlike minimal starters, Jetpack provides opinionated, battle-tested configurations that work together seamlessly, allowing developers to focus on building features rather than debugging integration issues between different technologies. The template includes Supabase for PostgreSQL database hosting with real-time capabilities, Drizzle ORM for type-safe database queries and migrations, Clerk for comprehensive user authentication and management, shadcn/ui and Tailwind CSS for beautiful, accessible components, Zod validation for runtime type checking across forms and APIs, Docker containerization for consistent development and deployment environments, GitHub Actions CI configured for automated testing and deployment, and Resend integration for transactional email delivery. The codebase demonstrates proper Next.js 14 app router patterns, environment variable management with validation, database schema design and migration workflows, and authentication flows including protected routes and user sessions. Jetpack's roadmap includes a planned "Pro" version with Stripe checkout integration, advanced user management features, admin dashboards, notification systems, and LLM integrations, showing the template's extensibility. This starter is invaluable for developers building SaaS products who want to skip months of boilerplate setup, teams establishing consistent architecture patterns across multiple projects, indie hackers launching MVPs who need to move fast with reliable foundations, and anyone learning modern full-stack development with current best practices. Jetpack represents the stack you'd build after launching several products and learning what actually matters.
Chef Genie template preview
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.
Threads Clone template preview
Threads Clone
The Threads Clone is a comprehensive, full-featured recreation of Meta's Threads social media platform built with the T3 stack, showcasing modern web development practices for building complex, production-ready social applications. Created with Next.js 14, TypeScript, tRPC for end-to-end type-safe APIs, Tailwind CSS, shadcn/ui components, Prisma ORM with Neon PostgreSQL, and Clerk authentication, this project demonstrates how to architect scalable social networking features with contemporary tools. The application includes complete user authentication and profile management via Clerk, file upload capabilities for images and media, threaded conversations with nested replies and interactions, text and image content filtering for moderation, custom notification systems for user engagement, recursive thread rendering for deep conversation trees, real-time updates reflecting new posts and interactions, Zod validation ensuring data integrity throughout the stack, and advanced Prisma ORM patterns for complex relational queries. Built with create-t3-app, the project follows T3 stack principles emphasizing type safety, developer experience, and rapid iteration. The implementation showcases tRPC's ability to provide fully typed API routes without code generation, Prisma's sophisticated ORM features for managing complex database relationships, Clerk's comprehensive auth solution including social logins and user metadata, and Next.js 14's app router for optimal performance and SEO. This clone is invaluable for developers learning to build social media platforms from scratch, studying how to implement threaded conversations and notifications, understanding T3 stack architecture and patterns, creating portfolio pieces demonstrating full-stack expertise, and exploring how to scale social features with modern tooling. The codebase serves as both a functional social platform and an educational resource for contemporary web development.
Uxie template preview
Uxie
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.
Marshal UI YouTube template preview
Marshal UI YouTube
Sby Ski043
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.
Turbostarter Extro template preview
Turbostarter Extro
Extro is an opinionated, open-source browser extension starter kit based on learnings from building multiple production extensions, providing a comprehensive foundation with React, WXT framework, Supabase backend, shadcn/ui components, TypeScript, Tailwind CSS, Bun package manager, Vite for frontend tooling, and Biome for linting and formatting. Created by Bartosz Zagrodzki, this starter kit eliminates months of configuration by providing battle-tested patterns for authentication, storage, messaging, and deployment across Chrome and Firefox browsers. The template features full TypeScript type safety across extension pages and backend services, support for all extension page types including popup, options, background workers, content scripts, and side panels, authentication and OAuth integration powered by Supabase, storage and messaging APIs for cross-context communication, hot module replacement for instant feedback during development, pre-configured CI/CD pipelines for automated testing and deployment, internationalization (i18n) support for multi-language extensions, analytics integration for tracking user behavior, and modern development tooling with Biome for fast linting and formatting. Unlike starting from scratch with browser extension APIs, Extro provides proven patterns for handling complex scenarios like cross-origin messaging, persistent storage across extension contexts, authentication flows within extension constraints, and building multiple extension pages that share code efficiently. This starter is invaluable for developers building productivity extensions who want to focus on features rather than boilerplate, indie developers launching browser extensions as products, teams creating internal tools as browser extensions, developers migrating from Manifest V2 to V3, and anyone frustrated with the complexity of browser extension development. The opinionated stack means less decision fatigue while maintaining the flexibility to customize for specific needs. Extro demonstrates how to architect modern browser extensions with proper separation of concerns, integrate backend services with extension frontends, implement authentication within extension security constraints, and deploy extensions to both Chrome Web Store and Firefox Add-ons.
Linkify template preview
Linkify
Linkify is an innovative link management SaaS platform featuring a modern, conversion-optimized landing page that showcases link shortening, analytics dashboards, customizable branded links, and AI-powered suggestions for link optimization. Built with Next.js, Tailwind CSS, Prisma ORM, MongoDB for flexible data storage, Clerk for authentication, and a combination of premium UI libraries including shadcn/ui, Magic UI, and Aceternity UI, this template demonstrates how to create visually stunning SaaS landing pages that convert visitors into customers. The platform features comprehensive link tracking and analytics showing click-through rates, geographic data, and referral sources, customizable branded short links allowing businesses to maintain brand consistency, AI-powered optimization suggestions improving link performance through intelligent recommendations, responsive landing page design that works beautifully across all devices, modern UI patterns using glassmorphism, gradients, and micro-interactions, clean interface focused on user experience and conversion optimization, and integration patterns for authentication, database, and analytics services. Unlike generic landing page templates that look dated or prioritize aesthetics over conversion, Linkify balances beautiful design with clear value propositions, strong calls-to-action, and social proof elements that drive user acquisition. The multi-library UI approach combines shadcn/ui's accessible components with Magic UI's animated elements and Aceternity UI's distinctive design patterns, creating a unique visual identity that stands out in crowded SaaS markets. This template is invaluable for entrepreneurs launching link management or URL shortening SaaS products, developers building portfolio pieces demonstrating modern SaaS development, teams creating landing pages for beta launches or product announcements, designers learning how to implement complex UI patterns in code, and anyone studying conversion-focused SaaS landing page design. The project includes a YouTube tutorial explaining implementation details, making it accessible for developers at various skill levels. Released under MIT License, Linkify serves as both a functional SaaS landing page template and an educational resource for building modern, conversion-optimized marketing sites.
React Vite NStack template preview
React Vite NStack
ReactViTenStack is a modern, full-stack starter template that kickstarts web application development with an efficient, flexible architecture offering seamless integration and complete type safety from frontend to backend. Combining React with Vite for blazing-fast development, TanStack Suite (Router, Query, Form) for powerful data management and routing, HonoJS as a lightweight, Express-like backend framework, Drizzle ORM for type-safe database operations, Postgres via NeonDB for scalable cloud database hosting, shadcn/ui components for accessible UI, Tailwind CSS for styling, TypeScript throughout for end-to-end type safety, and Zod for runtime validation, this template eliminates weeks of configuration by providing a cohesive stack that works together seamlessly. The architecture features Vite's instant hot module replacement for rapid iteration, TanStack Router for type-safe routing with automatic code splitting, TanStack Query for efficient server state management with caching and invalidation, TanStack Form for performant form handling with validation, HonoJS backend providing familiar Express-like APIs with better TypeScript support, Drizzle ORM offering SQL-like queries with full type inference, NeonDB's serverless Postgres eliminating database infrastructure management, and Zod schemas ensuring data integrity across the stack. The monorepo structure managed by PNPM workspace demonstrates professional project organization, keeping frontend and backend code in logical separation while sharing types and utilities. This template is perfect for developers building SaaS products who want full-stack type safety without complexity, teams establishing modern development standards across projects, indie developers launching MVPs with scalable architecture, developers learning contemporary full-stack patterns with best-in-class tools, and anyone frustrated with the complexity of configuring modern JavaScript stacks. The comprehensive documentation and demo video help developers understand architectural decisions and get productive quickly. ReactViTenStack demonstrates how to achieve complete type safety from database to UI, structure monorepos for fullstack applications, integrate modern tools for optimal developer experience, and build performant applications with contemporary best practices.
Hiyori Ecommerce Next.js Supabase template preview
Hiyori Ecommerce Next.js Supabase
HiyoRi is a full-featured e-commerce platform with a custom Content Management System, delivering a modern online shopping experience with powerful backend management capabilities. Built with Next.js 14, GraphQL, Supabase, Drizzle ORM, shadcn/ui, and Tailwind CSS, it provides everything needed to launch and manage an online store. The platform features a complete product catalog with categories and variants, shopping cart and checkout flow with Stripe integration, customer account management with order history, admin CMS for inventory and order management, and real-time inventory tracking. HiyoRi includes GraphQL API for flexible data queries, image optimization and CDN integration, SEO-optimized product pages, responsive design for mobile shopping, and comprehensive analytics dashboard. Perfect for building fashion e-commerce sites, multi-vendor marketplaces, digital product stores, or any business requiring a scalable online retail platform with custom content management.
GTD template preview
GTD
GTD Task Management App implements the Getting Things Done methodology in a modern web application built with Next.js 13, NextAuth, shadcn/ui, and React Query. Designed for productivity enthusiasts who follow David Allen's GTD system, this app provides digital workflows for capturing, organizing, and executing tasks effectively. The application features inbox capture for quick task entry, project and context-based organization, next actions lists with priority management, and review workflows for weekly planning. Built with TypeScript for type safety, it leverages React Query for efficient data synchronization, NextAuth for secure user authentication, and shadcn/ui components for a clean, distraction-free interface. The app includes task filtering and search, recurring task support, due date management, and progress tracking across projects. Perfect for individuals and teams looking to implement GTD principles digitally with a modern tech stack that ensures reliable performance and seamless user experience.