React Templates - React

FormBuilder is a UI-based code generation tool for easily creating beautiful and type-safe forms using @shadcn/ui components across Next.js, Vue, and Svelte frameworks. The MIT-licensed tool provides a visual form builder interface that generates clean, type-safe code with support for multiple field types including headings, text (input, textarea, password), numbers (input, slider), boolean (checkbox, switch), enum (select, radio, combobox), and date pickers. Built with TypeScript (99% of codebase) and using Bun as package manager, FormBuilder takes a framework-agnostic approach allowing developers to design forms visually and export production-ready code for their preferred framework. The tool integrates seamlessly with @shadcn/ui components, ensuring generated forms maintain consistent design language and accessibility standards. Perfect for rapid form prototyping, teams building forms across multiple frameworks, developers wanting type-safe form code without manual typing, or any project requiring beautiful forms with validation and accessibility built in from the start, FormBuilder simplifies form creation while maintaining code quality and type safety.

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.

Plotwist is an open-source Next.js boilerplate for building movie, series, and anime review directory sites with easy media management and community-driven features. The MIT-licensed platform provides comprehensive media tracking capabilities supporting multiple content types including movies, series, and anime, with integrated review functionality and user engagement features. Built with Next.js for optimal performance, TailwindCSS for modern styling, shadcn/ui for beautiful components, and Stripe for payment processing, Plotwist offers a community-driven development approach with contributors welcome through GitHub and a Discord community for collaboration. The application focuses on user-friendly media management with tracking features, review systems, and social interaction capabilities. Perfect for building media review platforms, entertainment tracking sites, community-driven content databases, or any application focused on movies, TV shows, and anime with features similar to platforms like Letterboxd, MyAnimeList, or IMDb but with full control over the codebase, customization capabilities, and the ability to add unique features tailored to specific communities or niches.

React Tanstarter is a minimal starter template for TanStack Start featuring React 19 with React Compiler, Better Auth for authentication, Drizzle ORM with PostgreSQL, and shadcn/ui components for rapid full-stack application development. The public domain-licensed template provides an integrated authentication system through Better Auth, database management with Drizzle ORM, routing and state management with TanStack Router and Query, and beautiful UI components from shadcn/ui styled with Tailwind CSS. Built with cutting-edge technologies including React 19's latest features, TanStack's modern routing and data fetching tools, and PostgreSQL for robust data persistence, the template offers a minimalist project structure with integrated development scripts and easy deployment to platforms like Netlify. The starter includes utilities for authentication flows, theming customization, and efficient development workflows with all essential features configured. Perfect for developers building full-stack React applications with TanStack, projects requiring modern authentication and database integration, teams wanting rapid project initialization with latest React ecosystem practices, or any application benefiting from TanStack's powerful routing and data management combined with production-ready authentication and database tooling.

Shadcn Image Cropper is a minimal image cropping UI component built with shadcn/ui and react-image-crop library, providing an elegant, user-friendly interface for image manipulation. The MIT-licensed component combines shadcn/ui's modern component design with react-image-crop's specialized cropping functionality, delivering a streamlined experience for selecting and cropping image regions. Built with TypeScript (91.9% of codebase), Next.js, Tailwind CSS, and deployed on Vercel, the cropper offers clean interfaces for aspect ratio selection, zoom controls, and crop area adjustment. The implementation leverages shadcn/ui's accessible components while integrating react-image-crop's powerful cropping engine for smooth, responsive image manipulation. Perfect for profile picture uploads, image editing features, content management systems with image cropping, e-commerce product image tools, or any application requiring user-friendly image cropping without building custom cropping logic, the component demonstrates how to combine specialized libraries with modern UI frameworks for polished user experiences.

Animate UI is a fully animated, open-source component library built with React, TypeScript, Tailwind CSS, and Framer Motion, providing customizable components with smooth animations and motion as core design principles. The MIT-licensed library offers installable and modifiable components through shadcn CLI, making it easy to browse, add, and customize animated components for web projects. Built with TypeScript (89.9% of codebase), React, Tailwind CSS, Radix UI primitives, and Framer Motion for animations, Animate UI emphasizes motion and animation throughout its component collection. The project welcomes contributions with a published Code of Conduct and has garnered significant community support with 2.6k stars and 16 contributors. Perfect for projects requiring animated interfaces, landing pages with engaging interactions, marketing websites, applications needing polished micro-interactions, or any project benefiting from professional animations without building custom animation logic, Animate UI provides production-ready animated components installable through familiar tooling and customizable to match any design system.

Cella is a narrow stack TypeScript template for building collaborative web applications with built-in sync engine, offline capabilities, and real-time synchronization. The MIT-licensed template combines PostgreSQL database, Hono web framework, Drizzle ORM, Electric-sync for real-time sync, React, TanStack Router, and shadcn/ui components into a comprehensive starter for reactive applications. Built with TypeScript (97.3% of codebase), Node.js, and Docker support, Cella provides easy CLI-based project initialization with prebuilt authentication and data access systems ready for testing. The template emphasizes developer experience with modern web technologies while offering offline-first architecture and collaborative features out of the box. Perfect for building collaborative tools, team applications with real-time updates, offline-capable web apps, or any project requiring synchronized data across multiple users and devices, Cella demonstrates how to combine modern sync engines with traditional web stacks for applications that work seamlessly online and offline while maintaining data consistency.

Spectrum UI is a collection of reusable components combining elements from Aceternity UI, Magic UI, and ShadCN UI into a unified, copy-and-paste component library for modern web applications. The Apache-2.0 licensed project provides modular UI components built with TypeScript (99.6% of codebase), Next.js, and Tailwind CSS, offering developers flexibility through easy integration without npm dependencies. The library draws from three popular UI libraries to provide comprehensive component coverage with diverse design patterns and interaction styles. With 878 stars and an active community of contributors, Spectrum UI welcomes open-source contributions and maintains documentation at ui.spectrumhq.in. Perfect for projects requiring diverse UI patterns, developers wanting best-of-breed components from multiple libraries, teams building design systems with varied aesthetics, or any application benefiting from high-quality components without committing to a single UI framework, Spectrum UI demonstrates how to harmonize different component libraries into cohesive, production-ready interfaces.

Clean Next.js Starter is a multilingual Next.js 15 template with comprehensive built-in internationalization support, enabling developers to launch global-ready web applications quickly. The MIT-licensed starter provides support for multiple languages including English, Chinese, and Japanese out of the box, modern UI with Tailwind CSS and shadcn/ui, dark/light theme toggle, responsive design, MDX blog system, SEO optimization, and integrated analytics tools. Built with Next.js 15 App Router, TypeScript, next-intl for internationalization, Zustand for state management, and deployed on Vercel, the template includes configurable language routing, translation file management, custom Link components for internationalized navigation, automatic language detection, and separate content directories for each locale. The starter emphasizes SEO-friendly foundations with proper metadata handling and structured content organization. Perfect for businesses launching international products, content creators targeting global audiences, SaaS applications requiring multi-language support, or any project needing robust i18n capabilities without complex setup, the template provides a feature-rich foundation for globally-ready websites.

UI Builder is a React component providing a no-code, visual interface for creating UIs with compatibility for shadcn/ui and custom React components, solving the fundamental problem of UI creation tools ignoring existing component libraries. The MIT-licensed tool uses a component registry to map React components to editable UI elements, providing a Figma-style editor for composing pages and components with drag-and-drop functionality. Built with React, Zod for schema validation, Tailwind CSS, TypeScript, and Next.js, UI Builder stores layouts as JSON for easy versioning and rendering while supporting runtime variable overrides for dynamic, personalized content. The builder enables non-developers to modify UIs without engineering help while respecting existing component libraries and design systems. Perfect for building customizable dashboards, enabling client UI customization, creating page builders for CMS platforms, developing dynamic email templates, or any application requiring visual UI composition without coding, UI Builder provides variable binding for data-driven interfaces and supports custom component integration.

YouTube AI Extension is an interactive browser extension that transforms passive video watching into an interactive learning experience through real-time AI-powered video chat using OpenAI's API. The MIT-licensed extension seamlessly integrates into YouTube's interface, enabling users to chat with videos in real-time, receive video summaries, ask questions and get context-aware responses, with multilingual support for global audiences. Built with React, Tailwind CSS, Plasmo extension framework, TypeScript, and OpenAI API integration, the extension provides contextual understanding of video content while generating intelligent summaries and answering user questions about what they're watching. The project has a major update planned for June 2025 promising powerful new features, streamlined installation, and an official Chrome Web Store release. Perfect for students learning from educational videos, researchers analyzing content, language learners, professionals consuming training materials, or anyone wanting to engage more deeply with video content through AI-assisted comprehension and interaction, the extension demonstrates innovative AI integration in browser extensions.

Core building blocks for AI apps. High-quality, accessible, and customizable components for AI interfaces.