Open source and free shadcn templates using Scss

Note Gen is an AI-powered Markdown note-taking application that combines traditional writing with advanced features like automatic note generation, semantic search, and retrieval-augmented generation (RAG) to enhance knowledge management. Built with Next.js 14, TypeScript, and shadcn/ui, it enables users to write in Markdown, organize with tags and folders, and leverage OpenAI's GPT models for intelligent content creation. The application uses vector embeddings for semantic search that finds notes by meaning rather than keywords, RAG technology that references existing notes when generating new content, and auto-completion for writing assistance. With a clean interface featuring real-time Markdown preview, syntax highlighting, and keyboard shortcuts, Note Gen transforms note-taking into an active knowledge management system. Perfect for students, writers, developers, and professionals, it helps brainstorm ideas, discover connections between notes, and synthesize information across your knowledge base.

Haitang Poetry Society (海棠诗社) is a digital platform dedicated to classical Chinese poetry, creating an immersive cultural sanctuary for exploring thousands of traditional poems through an elegant, modern interface. The MIT-licensed application provides comprehensive search capabilities by collections, dynasties, poets, and individual poems, along with curated categories based on themes like festivals, seasons, and geographical regions. Built with Astro for optimal performance, Tailwind CSS and shadcn/ui for beautiful design, SQLite with Drizzle ORM for efficient data management, and integrated analytics through Umami and Google Analytics, Haitang makes classical Chinese literature accessible to modern audiences. The platform features responsive design with mobile compatibility, dark mode support, and Giscus-powered comments for community engagement around poetry appreciation. Perfect for students of Chinese literature, poetry enthusiasts, cultural preservation projects, or educational platforms, Haitang demonstrates how to build culturally significant applications with modern web technologies while maintaining the elegance and depth of traditional Chinese poetic heritage.

Echo Editor is a modern AI-powered WYSIWYG rich-text editor for Vue.js built on Tiptap and shadcn-vue, providing comprehensive content editing capabilities with AI assistance for writing, formatting, and content generation. The MIT-licensed editor combines Tiptap's extensible editor framework with shadcn-vue's beautiful component design, delivering a feature-rich editing experience with support for markdown, slash commands, tables, code blocks, and collaborative editing features. Built with Vue 3, Vite for fast development, Tailwind CSS for styling, and SCSS for advanced customization, Echo Editor provides an intuitive WYSIWYG interface that appeals to both technical and non-technical users. The AI-powered features assist with content creation, grammar checking, text improvements, and automated formatting, making it more than just a basic text editor. Perfect for content management systems, blog platforms, documentation sites, note-taking applications, or any Vue.js project requiring sophisticated rich-text editing with AI capabilities, collaborative features, and a modern, customizable interface that matches the shadcn design aesthetic.

Reactjs Tiptap Editor is a modern WYSIWYG rich text editor for React built on Tiptap's powerful editing framework and shadcn/ui components, providing a clean, developer-friendly implementation with comprehensive formatting options. The MIT-licensed editor combines Tiptap's robust, extensible editing capabilities with shadcn/ui's modern component design, delivering a lightweight and easily customizable editing experience. Built with React, TypeScript, Tailwind CSS, SCSS for advanced styling, and Vite for fast development, the editor provides a playground environment and comprehensive documentation for easy integration. The implementation offers various text formatting options, media embedding, code highlighting, and other rich text features while maintaining a sleek interface through shadcn/ui components. Perfect for content management systems, blog platforms, documentation sites, note-taking applications, or any React project requiring sophisticated rich text editing without the complexity of building an editor from scratch, the project demonstrates how to leverage Tiptap's flexibility with modern React development practices and beautiful UI components.

Expo DOM Components Example is a comprehensive demonstration project built with TypeScript, Expo, React, Tailwind CSS, and MDX, showcasing how to use DOM components in Expo applications with integrations from shadcn/ui, React Three Fiber, emoji-mart, and react-mobile-cropper. This practical reference implementation demonstrates cross-platform development techniques by combining web and mobile technologies in a unified codebase that runs on web browsers and iOS devices (via TestFlight). The project includes examples of UI component integration from shadcn, MDX content support for rich documentation, React Three Fiber demos for 3D graphics, image cropper functionality for media manipulation, and emoji picker integration for user-generated content. Perfect for developers building cross-platform applications with Expo, teams evaluating Expo's web capabilities for progressive web apps, mobile developers transitioning to web development with familiar tools, or any project where code sharing between web and mobile platforms reduces development costs and maintenance overhead. Created by Evan Bacon, this example serves as an authoritative reference for implementing DOM components in Expo environments, demonstrating how modern React patterns, web libraries, and mobile frameworks can coexist in a single application architecture while maintaining native-quality user experiences across platforms.

Firestarta is a comprehensive Next.js SaaS boilerplate built with TypeScript, NextAuth for authentication, Prisma ORM, Supabase Postgres, Lemon Squeezy for subscription management, Sass, shadcn/ui, and Lucide icons, designed to provide a robust starting point for web applications requiring user authentication, subscription payments, and modern development practices. This production-ready template features App directory structure with Route Groups, Intercepting and Parallel Routes, server-side and client-side rendering for optimal performance, comprehensive user authentication flows, integrated subscription management with Lemon Squeezy, responsive design across all devices, internationalization support for global markets, and custom components following best practices. Built with modern web development standards and a flexible, extensible architecture, Firestarta eliminates weeks of initial setup work that every SaaS application requires before addressing unique product features. Perfect for developers building subscription-based products, entrepreneurs launching SaaS businesses with limited technical teams, agencies delivering custom SaaS solutions for clients, or any project where rapid development without sacrificing code quality and scalability determines market success. The integration of NextAuth, Prisma, and Supabase provides a complete authentication and data management stack, while Lemon Squeezy handles the complexity of subscription billing, tax compliance, and payment processing, enabling founders to focus on product differentiation and customer acquisition rather than infrastructure and payment integration challenges.

MantineHub (previously Mantine Theme Builder) is an open-source web tool built with TypeScript, Next.js, CSS, SCSS, and Tailwind CSS, designed to create modern, customizable shadcn-inspired themes for Mantine UI components by providing extensive color palette selection, border radius control, light/dark mode toggling, theme object export functionality, and support for all Mantine components with pre-built UI component "Blocks". This comprehensive toolkit evolved from an experimental project into a full-featured theme generation interface that simplifies the process of modernizing Mantine's styling by enabling developers to quickly generate and integrate contemporary design systems. The shadcn design inspiration brings the elegant aesthetics popularized by shadcn/ui to the Mantine ecosystem, bridging the gap between Mantine's comprehensive component library and modern design trends. Perfect for development teams using Mantine UI seeking modern aesthetics, designers creating custom themes for Mantine applications, agencies building multiple projects with consistent Mantine styling, or developers transitioning from other UI libraries who want Mantine components with familiar design patterns. The theme export functionality generates ready-to-use configuration objects that can be copied and pasted directly into projects, eliminating manual theme construction and reducing the time from design decision to implementation. By providing a visual interface for theme customization, MantineHub makes sophisticated Mantine theming accessible to team members who may not be familiar with Mantine's theming API structure while maintaining the full power and flexibility that experienced developers expect.

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.

The WordPress Plugin Boilerplate is a comprehensive starter template that brings modern web development practices to WordPress plugin development by integrating React, TypeScript, SASS, Tailwind CSS, shadcn/ui components, Vite for blazing-fast builds, Storybook for component development, and Hot Module Replacement for instant feedback during development. This boilerplate eliminates the traditional pain points of WordPress plugin development by providing a Laravel-inspired custom ORM for database operations, flexible API routing for REST endpoints, simplified shortcode generation with custom rendering, seamless data passing between PHP backend and React frontend, and a CLI tool for rapid plugin scaffolding and configuration. The development workflow is streamlined with npm run dev for full development mode with HMR, separate npm run dev:frontend and npm run dev:admin commands for focused development, npm run build to compile production-ready assets, and npm run release to create distributable plugin packages. The boilerplate includes Storybook integration for isolated component development and documentation, TypeScript for type safety across JavaScript code, SASS and Tailwind CSS for flexible styling options, shadcn/ui and Headless UI for accessible component primitives, and proper WordPress hooks and filters integration maintaining compatibility with the WordPress ecosystem. This template is invaluable for developers building commercial WordPress plugins with modern UIs and complex functionality, agencies developing multiple client plugins who need consistent, maintainable architecture, teams transitioning from jQuery-based WordPress development to React, freelancers who want professional development experience in WordPress projects, and anyone frustrated with traditional WordPress plugin development workflows. The project demonstrates how to integrate modern JavaScript frameworks into WordPress without fighting the platform, structure plugin code for maintainability and testability, implement database models and API routes in WordPress context, build component libraries with Storybook for WordPress admin interfaces, and accelerate WordPress plugin development with contemporary tooling.

Shadcn UI Kit is a comprehensive collection of ready-to-use admin dashboards, website templates, and customizable components built with React, TypeScript, Next.js, and Tailwind CSS, offering developers enhanced functionality and design flexibility for modern web applications. This free version provides a preview of the extensive PRO collection, including 1 fully functional dashboard, 5+ pre-built pages, and a single color scheme, giving developers a taste of professional admin interface design without upfront cost. The kit features production-ready dashboard layouts with common admin patterns like sidebars, navigation, and content areas, responsive page templates for user management, settings, analytics, and more, customizable shadcn/ui components following modern design principles, TypeScript throughout ensuring type safety and better developer experience, and Tailwind CSS for rapid styling customization. The PRO version significantly expands capabilities with 10 complete dashboards covering various use cases, 50+ pages for comprehensive admin functionality, 10+ full web applications demonstrating different architectures, 100+ premium components beyond the basic shadcn/ui set, multiple color schemes allowing brand customization, dark and light mode support for user preference, LTR and RTL support for international applications, and extensive theme customization options. Unlike building admin dashboards from scratch or using rigid, dated templates, this UI kit provides modern, flexible components that can be adapted to specific needs while maintaining consistent design language. The free version is perfect for indie developers building side projects who need professional admin interfaces, teams evaluating the kit before purchasing PRO, students learning modern web development with production-quality examples, small businesses creating internal tools with limited budgets, and developers who want to understand shadcn/ui patterns through complete dashboard examples. The kit demonstrates how to structure admin applications, implement common dashboard patterns, create reusable component libraries, and design flexible, themeable interfaces.

Sharuco is a versatile platform for developers and content creators to share code snippets, manage forms, and organize links all in one centralized location. Built with modern web technologies, it provides an intuitive interface for creating, organizing, and sharing development resources with teams or the public. The application features syntax-highlighted code snippet sharing with language detection, customizable form builder with validation and response collection, link management with categorization and tagging, public and private sharing options, and embed code generation for external sites. Built with Next.js for optimal performance, it leverages shadcn/ui components for consistent design, includes user authentication and workspace management, supports markdown formatting, and provides analytics for shared content. The platform includes search and filtering across all content types, collaborative features for team workspaces, and export capabilities for forms and snippets. Perfect for developer portfolios showcasing code examples, technical documentation with interactive forms, resource collections and bookmarking, or team collaboration on shared development assets.