React Templates - Tailwind
194 templates • 158 contributors • Open source & free
Available Templates (194)
- Next WordPressNext 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.
- Date Range PickerDate Range Picker for shadcn is a comprehensive date range selection component built on shadcn/ui's design system with support for presets, comparison ranges, and advanced filtering. The MIT-licensed component integrates seamlessly with shadcn/ui projects, providing a polished interface for selecting date ranges with pre-defined options like "Last 7 days," "Last 30 days," and "This month" alongside custom range selection. Built with React, TypeScript, and date-fns for reliable date handling, the picker includes comparison mode for analyzing period-over-period metrics, single date selection mode, and customizable preset configurations. The component follows shadcn/ui's philosophy of being copy-and-paste ready rather than installed as a dependency, allowing developers to customize styling, behavior, and presets directly in their codebase. Perfect for analytics dashboards, reporting interfaces, booking systems, or any application requiring sophisticated date range selection with user-friendly presets and comparison capabilities common in platforms like Google Analytics or business intelligence tools.
- Date Range PickerDate Range Picker for shadcn is a comprehensive date range selection component built on shadcn/ui's design system with support for presets, comparison ranges, and advanced filtering. The MIT-licensed component integrates seamlessly with shadcn/ui projects, providing a polished interface for selecting date ranges with pre-defined options like "Last 7 days," "Last 30 days," and "This month" alongside custom range selection. Built with React, TypeScript, and date-fns for reliable date handling, the picker includes comparison mode for analyzing period-over-period metrics, single date selection mode, and customizable preset configurations. The component follows shadcn/ui's philosophy of being copy-and-paste ready rather than installed as a dependency, allowing developers to customize styling, behavior, and presets directly in their codebase. Perfect for analytics dashboards, reporting interfaces, booking systems, or any application requiring sophisticated date range selection with user-friendly presets and comparison capabilities common in platforms like Google Analytics or business intelligence tools.
- Enhanced ButtonEnhanced 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.
- BasejumpBasejump is a Supabase extension providing production-ready authentication, team accounts, billing, and permission management through database-level schemas and helper functions. The MIT-licensed project extends Supabase with multi-tenant architecture supporting team creation, member invitations, role-based permissions, and subscription billing all managed through PostgreSQL schemas and Row Level Security policies. Built specifically for Supabase projects, Basejump eliminates the need to build common SaaS infrastructure by providing database migrations for account management, team hierarchies, billing integrations, and access control that work seamlessly with Supabase Auth. The extension includes TypeScript client libraries, React hooks for easy frontend integration, and comprehensive documentation for implementing team-based applications where users belong to multiple organizations with different permission levels. Perfect for B2B SaaS platforms, collaborative tools, agency portals, or any application requiring sophisticated multi-tenant architecture with team accounts, role-based permissions, and subscription management built directly into the Supabase database layer.
- Kokonut UIKokonut 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.
- Kokonut UIKokonut 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 StarterNext 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.
- CredenzaCredenza 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 PickerTime 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.
- FramelyFramely 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 InputShadcn 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.









