# MVPBlocks

> Copy, paste, customize—and launch your idea faster than ever. MVPBlocks is a fully open-source, developer-first component library built using Next.js and TailwindCSS.

MVPBlocks is an open-source, developer-first UI library of plug-and-play sections, blocks, and templates for Next.js, React, Tailwind CSS, and Framer Motion. It is designed for shipping MVPs, landing pages, and SaaS products quickly. All blocks are responsive, accessible, dark-mode ready, and free to use in personal and commercial projects under the BSD 3-Clause license.

## Key links
- Site: https://blocks.mvp-subha.me
- Docs: https://blocks.mvp-subha.me/docs
- Templates: https://blocks.mvp-subha.me/templates
- Showcase: https://blocks.mvp-subha.me/showcase
- About: https://blocks.mvp-subha.me/about
- License (BSD 3-Clause): https://blocks.mvp-subha.me/license
- GitHub: https://github.com/subhadeeproy3902/mvpblocks
- Twitter: https://x.com/mvp_Subha
- Full LLM index: https://blocks.mvp-subha.me/llms-full.txt

## Stack
- Next.js (App Router)
- React
- TypeScript
- Tailwind CSS
- Framer Motion
- shadcn/ui-compatible registry

## FAQ
### What is MVPBlocks?
MVPBlocks is a free, open-source library of copy-paste UI blocks, sections, and full templates for Next.js, React, and Tailwind CSS. Use it to ship MVPs, landing pages, and SaaS products faster.
### Is MVPBlocks free?
Yes. MVPBlocks is fully open-source under the BSD 3-Clause license and free to use in personal and commercial projects without attribution.
### How do I use an MVPBlock?
Open the docs, pick a block, and copy its code into your Next.js, Vite, or React project. Many blocks are also installable via the shadcn CLI registry.
### Are MVPBlocks components responsive and accessible?
Yes. Every block is mobile, tablet, and desktop responsive and follows accessibility best practices including semantic HTML and ARIA usage.
### Who maintains MVPBlocks?
MVPBlocks is created and maintained by Subhadeep Roy and the open-source community on GitHub at https://github.com/subhadeeproy3902/mvpblocks.

## Docs
### add-a-block
- [Add a Block](https://blocks.mvp-subha.me/docs/add-a-block): Add a block to this project and get your contribution recognized.

### agno-ai-studio
- [Design Studio](https://blocks.mvp-subha.me/docs/agno-ai-studio): A modern AI-powered studio template with sleek design and responsive layout. Perfect for AI startups and SaaS products — built and shipped on Lovable.

### ai-saas-marketing
- [AI SaaS Marketing](https://blocks.mvp-subha.me/docs/ai-saas-marketing): A sleek, high-converting landing page template built for modern AI startups and SaaS businesses. Whether you're launching your next-gen AI tool or marketing a powerful SaaS product — this template gives you everything you need to stand out and convert.

### auraclaw-ai-chatbot
- [AI Chat Platform](https://blocks.mvp-subha.me/docs/auraclaw-ai-chatbot): A production-ready, multi-model AI chat platform with streaming, persistence, and optional voice mode. Built for developers who want speed, clarity, and full control.

### categories
- [Categories](https://blocks.mvp-subha.me/docs/categories): All the components are categorized into different categories. You can add your own category and add blocks to it.

### cli
- [CLI](https://blocks.mvp-subha.me/docs/cli): Complete guide to the MVPBlocks CLI - the most intelligent component CLI that auto-initializes projects with themes

### designer-portfolio
- [Designer Portfolio](https://blocks.mvp-subha.me/docs/designer-portfolio): A stunning, high-end portfolio template crafted for designers, artists, and creatives. Built with Next.js, Framer Motion, and Tailwind CSS — Fiona’s Portfolio turns your personal website into an immersive visual experience that feels like a $300+ custom build.

### developer-portfolio
- [Developer Portfolio](https://blocks.mvp-subha.me/docs/developer-portfolio): A stunning, blazing-fast Next.js portfolio template to showcase your work, skills, and personality — completely free.

### get-started
- [Installation](https://blocks.mvp-subha.me/docs/get-started): How to install and set up Mvpblocks in your project.

### introduction
- [Introduction](https://blocks.mvp-subha.me/docs/introduction): Learn about Mvpblocks, a collection of trending UI components for your website.

### opus-devops
- [DevOps Tools](https://blocks.mvp-subha.me/docs/opus-devops): A clean, technical template for DevOps platforms — infrastructure monitoring, CI/CD tools, log viewers, and dev-tool dashboards. Built on Lovable.

### paymintx
- [Fintech Template](https://blocks.mvp-subha.me/docs/paymintx): A premium, payment-focused fintech template for modern financial products. Banking dashboards, wallet apps, payment processors — all production-ready and built on Lovable.

### skeletons
- [Skeletons](https://blocks.mvp-subha.me/docs/skeletons): Skeletons are placeholder elements that can be used to indicate loading states in your application. They provide a visual cue to users that content is being loaded.

### backgrounds
- [Gradient Bars](https://blocks.mvp-subha.me/docs/backgrounds/gradient-bars): Animated background with vertical gradient bars that pulse in a wave-like motion.

### basic
- [Buttons](https://blocks.mvp-subha.me/docs/basic/buttons): Creative Buttons with built-in styling, offering flexibility for custom designs and responsive layouts
- [Loaders](https://blocks.mvp-subha.me/docs/basic/loaders): Beautiful loaders to keep users engaged while waiting for content to load
- [Modals](https://blocks.mvp-subha.me/docs/basic/modals): Modals are overlay elements that display content on top of the main interface. They are commonly used for alerts, confirmations, and additional information without navigating away from the current page.
- [Pagination](https://blocks.mvp-subha.me/docs/basic/pagination): Pagination is a navigation technique that divides content into separate pages, allowing users to browse through large sets of data without overwhelming them. It helps improve performance and user experience by loading only a portion of the content at a time.
- [Progress](https://blocks.mvp-subha.me/docs/basic/progress): Progress indicators are essential for providing feedback to users about the status of their actions. They help manage user expectations and improve the overall user experience.

### cards
- [Basic Cards](https://blocks.mvp-subha.me/docs/cards/basic-cards): A collection of basic card designs, featuring various layouts for showcasing content
- [Flip Card](https://blocks.mvp-subha.me/docs/cards/card-flip): An interactive 3D flip card component with hover animations. Perfect for showcasing MVP features with engaging visual effects and smooth transitions.
- [Codes](https://blocks.mvp-subha.me/docs/cards/code-blocks): A collection of code blocks showcasing various designs and functionalities
- [Expandable Cards](https://blocks.mvp-subha.me/docs/cards/expandable-cards): Interactive cards that expand to reveal detailed information with smooth animations. Available in multiple variants including product, weather, and meeting cards.
- [Glow Cards](https://blocks.mvp-subha.me/docs/cards/glow-cards): A collection of glow card designs, featuring various layouts for showcasing content
- [Product Cards](https://blocks.mvp-subha.me/docs/cards/product-cards): A collection of product card designs, featuring various layouts for showcasing products
- [Spotlight Cards](https://blocks.mvp-subha.me/docs/cards/spotlight-cards): Unique card designs with spotlight effects, perfect for showcasing featured content
- [X (Twitter) Cards](https://blocks.mvp-subha.me/docs/cards/x-cards): A collection of X (Twitter) card designs, featuring various layouts for showcasing content

### chatbot
- [Chatbot UI](https://blocks.mvp-subha.me/docs/chatbot/chatbot-ui): A great chatbot UI design can make a huge difference in user engagement and satisfaction. Here are some of the best chatbot UI designs to inspire you.
- [Conversation](https://blocks.mvp-subha.me/docs/chatbot/conversation): Interactive chatbot conversation designs for engaging user interactions

### creative
- [Bubble Board](https://blocks.mvp-subha.me/docs/creative/bubble-board): A draggable animated bubble grid powered by Framer Motion.
- [Floating Dock](https://blocks.mvp-subha.me/docs/creative/floating-dock): A floating dock navigation component with smooth hover animations. Features desktop and mobile variants with interactive icon scaling.
- [Globe](https://blocks.mvp-subha.me/docs/creative/globe): Globe is a component that displays a 3D globe with a variety of features and customizations.
- [Interactive Tooltip](https://blocks.mvp-subha.me/docs/creative/interactive-tooltip): A dynamic tooltip component with mouse-following animations and spring physics. Perfect for displaying user profiles or team member information with engaging hover effects.
- [Motion Number](https://blocks.mvp-subha.me/docs/creative/motion-number): Motion Number is a component that displays a number with a motion effect.
- [Pointer Highlight](https://blocks.mvp-subha.me/docs/creative/pointer-highlight): A pointer highlight component that animates a border and pointer around text or content. Perfect for highlighting important text with smooth animations.
- [Scroll Animation](https://blocks.mvp-subha.me/docs/creative/scroll): Motion Number is a component that displays a number with a motion effect.
- [Target Cursor](https://blocks.mvp-subha.me/docs/creative/target-cursor): A custom animated cursor component with GSAP. Features spinning animation, corner tracking on hover, and parallax effects. Perfect for interactive websites.

### dashboards
- [Admin Dashboard](https://blocks.mvp-subha.me/docs/dashboards/admin): A comprehensive admin dashboard with real-time analytics, user management, and system monitoring. Features custom components with minimal shadcn usage.
- [Personal Finance](https://blocks.mvp-subha.me/docs/dashboards/personal-finance): Personal Finance Dashboard with budget tracking, expense analytics, savings goals, and transaction management micro UI components.
- [User Dashboard](https://blocks.mvp-subha.me/docs/dashboards/user): User dashboards provide insights into user activity, preferences, and interactions. They help users manage their profiles, settings, and other personal information.

### forms
- [Authentication](https://blocks.mvp-subha.me/docs/forms/loginforms): Authentication forms are essential for user registration and login. They help secure your application and manage user access.
- [Multi Step Forms](https://blocks.mvp-subha.me/docs/forms/multistep): Multi-step forms are used to break down long forms into smaller, manageable sections. They improve user experience by guiding users through the form completion process step by step.

### foundation
- [Colors](https://blocks.mvp-subha.me/docs/foundation/colors): Color palette that is used in Mvpblocks consistently.
- [Contributors](https://blocks.mvp-subha.me/docs/foundation/contributions): Meet the amazing people who have contributed to MVPBlocks

### grids
- [Bento Grids](https://blocks.mvp-subha.me/docs/grids/bento): Bento grids are a flexible and responsive layout system that allows you to create complex grid structures with ease. They are designed to adapt to various screen sizes and orientations, making them ideal for modern web applications.
- [Gallery](https://blocks.mvp-subha.me/docs/grids/gallery): Gallery grids are used to display a collection of images or media in a visually appealing layout. They are commonly used in portfolios, image galleries, and media libraries.
- [Masonry Grids](https://blocks.mvp-subha.me/docs/grids/masonry): Masonry grids are a popular layout style that allows items to be arranged in a way that optimizes space and creates a visually appealing design. They are commonly used in image galleries, portfolios, and other content-heavy applications.

### installation
- [Astro](https://blocks.mvp-subha.me/docs/installation/astro): Install and configure shadcn/ui for Astro
- [Gatsby](https://blocks.mvp-subha.me/docs/installation/gatsby): Install and configure Gatsby.
- [Laravel](https://blocks.mvp-subha.me/docs/installation/laraval): Install and configure shadcn/ui for Laravel
- [Manual Installation](https://blocks.mvp-subha.me/docs/installation/manual): Add dependencies to your project manually.
- [Next.js](https://blocks.mvp-subha.me/docs/installation/nextjs): Install and configure shadcn/ui for Next.js.
- [React Router](https://blocks.mvp-subha.me/docs/installation/react-router): Install and configure shadcn/ui for React Router.
- [Remix](https://blocks.mvp-subha.me/docs/installation/remix): Install and configure shadcn/ui for Remix.
- [TanStack Router](https://blocks.mvp-subha.me/docs/installation/tanstack-router): Install and configure shadcn/ui for TanStack Router.
- [TanStack Start](https://blocks.mvp-subha.me/docs/installation/tanstack): Install and configure shadcn/ui for TanStack Start.
- [Vite](https://blocks.mvp-subha.me/docs/installation/vite): Install and configure shadcn/ui for Vite.

### mainsections
- [About](https://blocks.mvp-subha.me/docs/mainsections/about): About sections provide a brief overview of your product or service, highlighting its key features and benefits. They help users understand what your product is about and why they should use it.
- [Contact](https://blocks.mvp-subha.me/docs/mainsections/contact): Contact sections allow users to get in touch with you through a form or other contact methods. They are essential for gathering user feedback, inquiries, and support requests.
- [CTA](https://blocks.mvp-subha.me/docs/mainsections/cta): CTA sections are designed to encourage users to take action, whether it's signing up for a newsletter, downloading a resource, or making a purchase. They help drive conversions and improve user engagement.
- [FAQs](https://blocks.mvp-subha.me/docs/mainsections/faq): FAQs are essential for addressing common questions and concerns users may have about your product or service. They help improve user experience by providing quick answers and reducing the need for customer support.
- [Features](https://blocks.mvp-subha.me/docs/mainsections/features): Feature sections highlight the key features of your product or service, showcasing what makes it unique and valuable. They help users understand the benefits of using your product and encourage them to take action.
- [Hero](https://blocks.mvp-subha.me/docs/mainsections/hero): Hero sections are the first thing users see when they visit your site. They are a great way to showcase your product and its features.
- [Pricing](https://blocks.mvp-subha.me/docs/mainsections/pricing): Pricing sections provide information about the cost of your product or service. They can include details about different pricing tiers, features included in each tier, and any discounts or promotions available.
- [Team](https://blocks.mvp-subha.me/docs/mainsections/team): Team sections provide information about the people behind your product or service. They can include details about team members, their roles, and their expertise.
- [Testimonials](https://blocks.mvp-subha.me/docs/mainsections/testimonials): Testimonials sections showcase positive feedback and reviews from customers or users. They help build trust and credibility for your product or service, encouraging potential customers to make a purchase or take action.

### pages
- [Waitlist](https://blocks.mvp-subha.me/docs/pages/waitlist): These pages are used to collect user emails for a waitlist.

### preloaders
- [Preloaders](https://blocks.mvp-subha.me/docs/preloaders/preloader-1): A collection of preloaders for smooth page transitions

### required
- [Footers](https://blocks.mvp-subha.me/docs/required/footers): Footers are used to provide additional information or context at the end of a document. They can include details such as page numbers, copyright information, or links to related content.
- [Headers](https://blocks.mvp-subha.me/docs/required/headers): Headers are used to define the structure of your document and provide context for the content that follows. They are essential for creating a well-organized and readable document.
- [Logo Cloud](https://blocks.mvp-subha.me/docs/required/logo-cloud): Logo clouds are used to showcase a collection of logos or brands in a visually appealing way. They can be used to highlight partnerships, sponsors, or featured brands.

### text-animations
- [Blur In Text](https://blocks.mvp-subha.me/docs/text-animations/blur-in-text): Text emerges from a soft blur into crystal clarity. Perfect for hero headlines and section reveals that demand attention with an elegant, cinematic feel.
- [Circular Text](https://blocks.mvp-subha.me/docs/text-animations/circular-text): Circular text animations create a circular text effect that continuously rotates. This engaging animation can be used to draw attention to important content or add visual interest to your design.
- [Fade In Up Text](https://blocks.mvp-subha.me/docs/text-animations/fade-in-up-text): Elegant text entrance animation that fades in while floating from any direction. Perfect for hero headlines, section titles, and page transitions.
- [Fuzzy Text](https://blocks.mvp-subha.me/docs/text-animations/fuzzy-text): CRT television static noise effect with chromatic aberration, scanlines, and jitter. Text appears fuzzy with VHS/old TV static look, clearing on hover.
- [Glitch Text](https://blocks.mvp-subha.me/docs/text-animations/glitch-text): Cyberpunk-style glitch effect with RGB color splitting, position jittering, and scanlines. Perfect for gaming, tech, and edgy brand aesthetics.
- [Gradient Flow Text](https://blocks.mvp-subha.me/docs/text-animations/gradient-flow-text): Mesmerizing animated gradient that flows through text like liquid colors. Perfect for eye-catching headlines, brand names, and call-to-action elements.
- [Text Animations](https://blocks.mvp-subha.me/docs/text-animations): Explore a variety of engaging text animations to enhance your web projects. From fuzzy static effects
- [Random Unveil](https://blocks.mvp-subha.me/docs/text-animations/randomunveil): Random unveil animations create a dynamic and engaging effect as elements appear on the screen. This technique can be used to draw attention to specific content or enhance the overall user experience.
- [Scroll Reveal Text](https://blocks.mvp-subha.me/docs/text-animations/scroll-reveal-text): Text animation tied to scroll position - reveals as you scroll, reverses when scrolling back up. Creates dynamic, interactive text effects perfect for storytelling and hero sections.
- [Scroll Velocity](https://blocks.mvp-subha.me/docs/text-animations/scroll-velocity): Scroll velocity animations create a dynamic and engaging effect as elements move on the screen. This technique can be used to draw attention to specific content or enhance the overall user experience.
- [Shiny Text](https://blocks.mvp-subha.me/docs/text-animations/shiny-text): A premium Apple-style shine effect that sweeps across text like light reflecting off a glossy surface. Features a bright metallic base with multiple shine layers and glow effect.
- [Shuffle Text](https://blocks.mvp-subha.me/docs/text-animations/shuffle-text): A text scramble/decode animation that starts with random characters and gradually reveals the actual text letter by letter. Creates a cipher/decode effect perfect for hero sections, headlines, and interactive elements.
- [Text Reveal](https://blocks.mvp-subha.me/docs/text-animations/text-reveal): Text reveal animations create a dynamic and engaging effect as text appears on the screen. This technique can be used to draw attention to specific content or enhance the overall user experience.
- [Text Type](https://blocks.mvp-subha.me/docs/text-animations/text-type): A text typing animation component with GSAP. Features typing, deleting, looping, and customizable cursor effects. Perfect for hero sections and landing pages.
- [Typewriter](https://blocks.mvp-subha.me/docs/text-animations/typewriter): Typewriter animations simulate the effect of text being typed out in real-time. This technique can be used to create a sense of anticipation and engagement as users watch the text appear on the screen.
- [Variable Proximity Text](https://blocks.mvp-subha.me/docs/text-animations/variable-proximity-text): Interactive text where font weight and optical size change based on mouse proximity to each letter. Uses variable fonts for smooth, fluid transitions.
- [Wave Text](https://blocks.mvp-subha.me/docs/text-animations/wave-text): Letters dance in a smooth sine wave pattern, creating a playful, ocean-like motion. Perfect for adding life to headers and interactive elements.