# Add a Block
URL: /docs/add-a-block

Add a block to this project and get your contribution recognized.

***

title: Add a Block
description: Add a block to this project and get your contribution recognized.
icon: Plus
----------

import { File, Folder, Files } from 'fumadocs-ui/components/files';
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";

We are inviting the community to share your components and blocks with other developers and help build a library of high-quality, reusable components.

We aim to build a collection of **ready-to-use, beautifully animated, and well-styled components** that developers can **copy-paste seamlessly** into their projects. Your contributions help make this project even better!

## Setup your workspace

<Steps>
  <Step>
    ### Fork the repository

    ```bash
    git clone https://github.com/subhadeeproy3902/mvpblocks.git
    ```
  </Step>

  <Step>
    ### Create a new branch

    ```bash
    git checkout -b username/my-new-block
    ```
  </Step>

  <Step>
    ### Install dependencies

    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install 
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install 
        ```
      </Tab>

      <Tab>
        ```bash
        yarn 
        ```
      </Tab>

      <Tab>
        ```bash
        bun install  
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ### Start the dev server

    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm run dev
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm run dev
        ```
      </Tab>

      <Tab>
        ```bash
        yarn dev
        ```
      </Tab>

      <Tab>
        ```bash
        bun run dev
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Add a block

A block can be a single component (eg. a variation of a ui component) or a complex component (eg. a dashboard) with multiple components, hooks, and utils.

<Steps>
  <Step>
    ### Create a new block

    1. If you are creating a new block of a new category, create a new folder in `components/mvpblocks` with the name of your `category`. For example, `mainsections`.

    2. If you are creating a new block in an existing category, create a new folder in `components/mvpblocks/[category]` with the name of your `block`. For example, `hero-1`.

    > **Note:** The build script will take care of building the block for the `default` style.
  </Step>

  <Step>
    ### Add your block files

    Add your files to the block folder. Here is an example of a block.

    <Files>
      <Folder name="component" defaultOpen>
        <Folder name="mvpblocks" defaultOpen>
          <Folder name="your-category" defaultOpen>
            <File name="your-block.tsx" />
          </Folder>
        </Folder>

        <Folder name="ui" defaultOpen>
          <File name="button.tsx" />

          <File name="tabs.tsx" />

          <File name="dialog.tsx" />
        </Folder>
      </Folder>

      <Folder name="hooks" defaultOpen>
        <File name="useYourHook.ts" />
      </Folder>
    </Files>

    > **Note:** You can start with one file and add more files later.
  </Step>
</Steps>

## Add your block to the registry

<Steps>
  <Step>
    ### Add your block definition to `registry-blocks.tsx`

    To add your block to the registry, you need to add your block definition to `registry-blocks.ts`.

    ```tsx title="registry/registry-blocks.tsx"
    export const blocks = [
      // ...
      {
        name: "hero-1",
        author: "subhadeeproy3902", // Your GitHub username
        type: "registry:block",
        dependencies: ["lucide-react"], // List of dependencies to install
        registryDependencies: [`${siteLink}/r/header.json`], // List of registry dependencies to make your block work
        files: [
          {
            path: "@/components/mvpblocks/mainsections/hero-1.tsx", // Path to your block file
            type: "registry:block",
          },
        ],
        component: React.lazy(
          () => import("../components/mvpblocks/mainsections/hero-1"), // Lazy path to your block component
        ),
      }
    ];
    ```

    > **Note:** If you are using `ui` or `hooks` or `utils/lib`, make sure to add them in `registry-ui.ts` or `registry-hooks.ts` or `registry-lib.ts` respectively. Main block path should be `@/components/mvpblocks/[category]/[block].tsx`.

    Make sure you add a name, description, type, registryDependencies, dependencies, files correctly.
  </Step>

  <Step>
    ### Run the build script

    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm run build:registry
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm run build:registry
        ```
      </Tab>

      <Tab>
        ```bash
        yarn build:registry
        ```
      </Tab>

      <Tab>
        ```bash
        bun run build:registry
        ```
      </Tab>
    </Tabs>

    > **Note:** you do not need to run this script for every change. You only need to run it when you update the block definition.
  </Step>

  <Step>
    ### View your block

    Once the build script is finished, you can view your block at `http://localhost:3000/docs/[blockpath]` or a full screen preview at `http://localhost:3000/preview/[blockname]`.
  </Step>

  <Step>
    ### Build your block

    You can now build your block by editing the files in the block folder and viewing the changes in the browser.

    If you add more files, make sure to add them to the `files` array in the block definition.
  </Step>
</Steps>

## Publish your block

Once you're ready to publish your block, you can submit a pull request to the main repository.

<Steps>
  <Step>
    ### Run the build script

    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm run build:registry
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm run build:registry
        ```
      </Tab>

      <Tab>
        ```bash
        yarn build:registry
        ```
      </Tab>

      <Tab>
        ```bash
        bun run build:registry
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ### Capture a screenshot

    Capture a screenshot of your block in action. You can use any screenshot tool you prefer.
    You can use the built-in screenshot tool in your operating system or a third-party tool like Snagit or Greenshot.
  </Step>

  <Step>
    ### Submit a pull request

    Commit your changes and submit a pull request to the main repository.

    Your block will be reviewed and merged. Once merged it will be published to the website and available to be installed via the CLI.
  </Step>
</Steps>

## Guidelines

Here are some guidelines to follow when contributing to the blocks library.

* The following properties are required for the block definition: `name`, `description`, `type`, `files`.
* Make sure to list all registry dependencies in `registryDependencies`. A registry dependency is the path of the component in the registry eg. `https://blocks.mvp-subha.me/r/globe.json`.
* Make sure to list all dependencies in `dependencies`. A dependency is the name of the package in the registry eg. `zod`, `sonner`, etc.


# Design Studio
URL: /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.

***

title: Design Studio
description: A modern AI-powered studio template with sleek design and responsive layout. Perfect for AI startups and SaaS products, built and shipped on Lovable.
icon: Lovable
-------------

import { BuyDialog } from '@/components/important/BuyButton';
import { VideoPlayer } from '@/components/important/VideoPlayer';
import LiveDemo from '@/components/important/LiveDemo';
import { Callout } from 'fumadocs-ui/components/callout';
import InternationalBuyButton from '@/components/important/InternationalBuyButton';

<VideoPlayer src="https://9o0poboblj.ufs.sh/f/vsatf5J1TVQGa9Ba3ewHRjBGCLpmP4YbQhknVWx0TAX6oKts" />

<div className="flex flex-wrap items-center gap-4">
  <LiveDemo url="https://agno-ai.lovable.app" />

  <BuyDialog title="Agno AI Studio" price={850} currency="INR" image="/images/agnoai.webp" productId="Agno AI Studio" downloadUrl={process.env.AGNO_REMIX_URL} autoDownload={false} />

  <InternationalBuyButton />
</div>

## ⚡ The Cleanest AI Studio Landing You'll Find

Most AI startup templates feel like they were thrown together over a weekend.\
**Agno AI Studio** is the opposite, sleek, intentional, and built to convert.

It's the kind of landing page that makes your AI product look like it just raised a seed round, even if you're shipping on day one.

## 🔥 Why Agno SLAPS

* 🤖 **AI-Ready Structure**\
  Hero, features, model showcase, pricing, and CTA, all dialed in for AI-first products.

* 💅 **Modern, Sleek UI**\
  Subtle gradients, glassy cards, smooth motion. No 2015 vibes anywhere.

* 🌙 **Dark Mode Native**\
  Designed dark-first, because that's where AI products live.

* 📱 **Fully Responsive**\
  Phone, tablet, desktop, pixel-perfect on everything.

* ⚡ **Built on Lovable**\
  One click to remix, customize, and ship. No setup pain.

<Callout icon="💸" title="$9 for an AI launch page that looks like $300+">
  Agno AI Studio is part of our **Lovable Templates** lineup, remix it instantly and ship your next AI product in minutes, not weekends.
</Callout>

## 🛠 Tech Stack

Next.js · TypeScript · Tailwind CSS · Framer Motion · Lovable

## 🚀 Perfect For

* 🤖 AI Startups
* 🧠 LLM products & playgrounds
* 🛠️ Indie hackers shipping AI tools
* 💸 MVPs and Product Hunt launches
* 👨‍💻 Anyone who wants a clean AI landing, fast


# AI SaaS Marketing
URL: /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.

***

title: AI SaaS Marketing
description: 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.
icon: Store
new: true
---------

import { BuyDialog } from '@/components/important/BuyButton';
import { VideoPlayer } from '@/components/important/VideoPlayer';
import LiveDemo from '@/components/important/LiveDemo';
import { Callout } from 'fumadocs-ui/components/callout';
import InternationalBuyButton from '@/components/important/InternationalBuyButton';

<VideoPlayer src="https://9o0poboblj.ufs.sh/f/vsatf5J1TVQGem0Af1DSqpzWl4st3oVrQZ8njMaE05PvCOkJ" />

<div className="flex flex-wrap items-center gap-4">
  <LiveDemo url="https://pollen-saas.vercel.app" />

  <BuyDialog title="AI SaaS Marketing" price={2199} currency="INR" image="/images/pollen.webp" productId="AI SaaS Marketing" downloadUrl={process.env.AI_MARKETING_DOWNLOAD_URL} />

  <InternationalBuyButton />
</div>

## 🚨 The Best SaaS Marketing Template You'll Ever Touch

Let's keep it real, most templates out there are either:

❌ Too basic\
❌ Overdesigned and clunky\
❌ Or stupidly overpriced 💸

So we made this:\
A **pixel-perfect**, **blazing-fast**, and **drop-dead gorgeous SaaS landing page** that makes your product look like it just closed a Series A.

## 🔥 Why This Template SLAPS

This ain't your average, cookie-cutter junk from overpriced marketplaces.\
This is the **cleanest**, **smoothest**, and **cheapest** SaaS marketing template on the internet, and we mean it.

* 🎯 **Built for High Conversion**\
  Every block, every line, every pixel screams *"click that CTA"*.

* 💅 **Modern as Hell**\
  From bento-style grids to subtle gradients, it's 2025 design, not 2015 junk.

* ⚡ **Super Fast**\
  Powered by Next.js 14, TailwindCSS, and Framer Motion. No lag, just vibes.

* 📱 **Mobile-First**\
  Looks 🔥 on all screen sizes. Phone, tablet, desktop, all covered.

* 🛠️ **Crazy Easy to Customize**\
  Clean, modular code. Drag, drop, tweak, done.

* 💬 **Client-Ready Sections**\
  Includes About, Services, Testimonials, Features, CTA, everything you need to close leads.

<Callout icon="💸" title="Cheapest. Cleanest. Most Loaded.">
  Go compare it with all the other overpriced SaaS templates out there.\
  $49? $79? $99? They wish they looked this good.

  This one's **cleaner, faster, and insanely cheaper.**\
  Designed to make your startup look *legit AF* on day one.
</Callout>

## 💼 Perfect For:

* 🚀 AI Startups
* 🧠 SaaS Tools
* 🛠️ Indie Hackers
* 💸 Founders Pre-Launch
* 🧪 MVPs & Product Hunt Drops
* 👨‍💻 Literally anyone building something cool


# AI Chat Platform
URL: /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.

***

title: AI Chat Platform
description: 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.
icon: Bot
new: true
---------

import { VideoPlayer } from '@/components/important/VideoPlayer';
import { Callout } from 'fumadocs-ui/components/callout';
import AuraClawComponents from '@/components/important/AuraClawComponents';

<VideoPlayer src="https://9o0poboblj.ufs.sh/f/vsatf5J1TVQG6qihrrkoN3bxOusEVH9CeJgrztjAZ05c8QnY" />

<AuraClawComponents
  downloadUrls={{
  ultimate: process.env.AURACLAW_ULTIMATE,
  pro: process.env.AURACLAW_PRO,
  starter: process.env.AURACLAW_STARTER,
}}
/>

## Stop Reinventing the Wheel - Focus on Building What Matters! 🔥

AuraClaw is a production-ready AI chatbot template (with the latest features of ChatGPT, Claude, Gemini and more) powered by the latest Vercel AI SDK. It’s designed to give you a strong head start, whether you're a student experimenting, building real products, or thinking about building a full AI SaaS platform.

We built AuraClaw so that you can focus on what truly matters, **your models, your agents, and your product**, while we handle the infrastructure, streaming, UI, and integrations. Instead of spending weeks wiring APIs and designing chat systems, you get a clean, fast, and extensible foundation from day one.

***

## Editions

All editions share the same core architecture. The difference is simply which features are enabled.

| Feature                        | Ultimate | Pro | Starter |
| ------------------------------ | -------- | --- | ------- |
| Multi-model support            | Yes      | Yes | Yes     |
| Streaming responses            | Yes      | Yes | Yes     |
| Markdown + KaTeX rendering     | Yes      | Yes | Yes     |
| Persistent chat history        | Yes      | Yes | Limited |
| Theming & personalization      | Yes      | Yes | Limited |
| Database (Neon Postgres)       | Yes      | Yes | No      |
| Authentication (Clerk)         | Yes      | Yes | No      |
| Shareable chats                | Yes      | Yes | No      |
| Advanced sidebar (search, org) | Yes      | Yes | No      |
| Voice mode                     | Yes      | No  | No      |

***

### 🌟 Ultimate, $149 / ₹13,999

Everything unlocked. No compromises.

* Best suited for full-scale Agentic AI products and SaaS platforms.
* Real-time, full-duplex voice interaction that feels natural and fluid.
* Includes **live closed captions**, so you can read along in real time.

***

### ⭐️ Pro, $99 / ₹8,999

Core system with all essential features.

* Ideal for serious projects and production-ready applications
* Full multi-model chat with streaming, persistence, and rich rendering
* Clean, scalable foundation without voice features

***

### ⚡️ Starter, $69 / ₹5,999

Lightweight version for quick setups and experimentation.

* Minimal, fast, and easy to deploy
* Core multi-model chat with streaming support
* Best for learning, prototyping, and simple use cases

***

## What Makes AuraClaw Different

This is not a thin wrapper.\
It’s a production-ready system designed for real-world use.

* **Multi-provider model selection** all accessible from a single interface.

* **Streaming markdown rendering** with KaTeX math (*inline and display*), and syntax-highlighted code, streamed in real time.

* **Persistent chat history**: Conversations stored in Neon Postgres and linked to users via Clerk authentication.

* **Automatic chat titles**: Context-aware titles generated from your interaction with the chatbot

* **Optimistic UI updates**: Messages appear instantly without disruptive loading states.

* **Voice interaction (Ultimate)**: Includes Whisper-based transcription, speech playback, and continuous conversation flow.

* **Shareable conversations**: Export and share chats across platforms like X, LinkedIn, WhatsApp, and email.

* **Structured sidebar experience**: Time-based grouping (Today, Yesterday, Last Week, Older), with rename, archive, delete, and fuzzy search.

* **Theming and personalization**: Light, dark, and system themes with customizable accents and preferences.

***

## Built for Builders

AuraClaw fits a wide range of use cases:

* AI SaaS platforms
* Multi-model experimentation
* Indie projects and developer tools
* MVP development and production systems
* Rapid prototyping with full control

***

<Callout title="One Workspace. Multiple Models.">
  AuraClaw provides a clean foundation for building AI products with speed and clarity.\
  Focus on your ideas, not the setup.
</Callout>


# Categories
URL: /docs/categories

All the components are categorized into different categories. You can add your own category and add blocks to it.

***

title: Categories
description: All the components are categorized into different categories. You can add your own category and add blocks to it.
icon: Blocks
full: true
----------

import SpotlightCard from "@/components/ui/spotlight-cards";

<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4">
  <SpotlightCard title="Basics" href="/docs/basic-blocks" />

  <SpotlightCard title="Required" href="/docs/required" />

  <SpotlightCard title="MainSections" href="/docs/mainsections" />

  <SpotlightCard title="Forms" href="/docs/forms" />

  <SpotlightCard title="Cards" href="/docs/cards" />

  <SpotlightCard title="Chatbot" href="/docs/chatbot" />

  <SpotlightCard title="Dashboard" href="/docs/dashboard" />

  <SpotlightCard title="Creative" href="/docs/creative" />

  <SpotlightCard title="Grids" href="/docs/grids" />

  <SpotlightCard title="Text Animations" href="/docs/text-animations" />
</div>


# CLI
URL: /docs/cli

Complete guide to the MVPBlocks CLI - the most intelligent component CLI that auto-initializes projects with themes

***

title: CLI
description: Complete guide to the MVPBlocks CLI - the most intelligent component CLI that auto-initializes projects with themes
new: true
icon: Terminal
--------------

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import { Step, Steps } from 'fumadocs-ui/components/steps';
import { Callout } from 'fumadocs-ui/components/callout';
import { File, Folder, Files } from 'fumadocs-ui/components/files';

# 🚀 MVPBlocks CLI

The **most intelligent component CLI** that not only adds components but can **automatically initialize entire projects** with your preferred framework, theme, and setup.

<Callout type="info">
  **Zero Configuration Required** - MVPBlocks detects empty directories and sets up complete projects automatically!
</Callout>

## ✨ Revolutionary Features

### 🪄 **Auto-Project Initialization**

* **Zero Configuration** - Detects if you're in an empty directory and offers to create a project
* **Framework Choice** - Choose between Next.js or Vite + React
* **Official Tools** - Uses `create-next-app` and `create-vite` for rock-solid projects
* **Package Manager Respect** - Automatically detects and uses your preferred package manager

### 🎨 **Interactive Theme Selection**

* **8 Beautiful Color Palettes** - Zinc, Red, Rose, Orange, Green, Blue, Yellow, Purple
* **Smart CSS Detection** - Automatically finds and updates your CSS files
* **Instant Preview** - See color swatches before making your choice
* **Tailwind Integration** - Perfect CSS variables setup for light/dark themes

## 🛠️ Installation

<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
  <Tab value="npm">
    ```bash
    # Use directly (recommended)
    npx mvpblocks --help

    # Or install globally
    npm install -g mvpblocks
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    # Use directly (recommended)
    yarn dlx mvpblocks --help

    # Or install globally
    yarn global add mvpblocks
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    # Use directly (recommended)
    pnpm dlx mvpblocks --help

    # Or install globally
    pnpm add -g mvpblocks
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    # Use directly (recommended)
    bunx mvpblocks --help

    # Or install globally
    bun add -g mvpblocks
    ```
  </Tab>
</Tabs>

## 🚀 Quick Start - The Magic Way

### Auto-Initialization Workflow

<Steps>
  <Step>
    **Navigate to your project location**

    ```bash
    mkdir my-awesome-project
    cd my-awesome-project
    ```
  </Step>

  <Step>
    **Run ANY component command**

    <Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
      <Tab value="npm">
        ```bash
        npx mvpblocks add hero-1 --ts
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx mvpblocks add hero-1 --ts
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx mvpblocks add hero-1 --ts
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx mvpblocks add hero-1 --ts
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    **Interactive Setup Begins**

    1. 🔍 **Auto-Detection**: "No package.json found. Let's set up a new project!"
    2. 🎯 **Framework Choice**: Choose between Next.js or Vite + React
    3. 🏷️ **Project Name**: Enter your project name (or use current directory)
    4. 🚀 **Project Creation**: Official tools create your project structure
    5. 📦 **Dependency Installation**: All dependencies installed automatically
    6. 🎨 **Theme Selection**: Interactive color palette picker
    7. 🔧 **Theme Application**: CSS variables applied to your theme file
    8. 📁 **Component Installation**: Your requested component is added
  </Step>

  <Step>
    **🎉 Complete Project Ready!**

    Your project is now ready with:

    * ✅ Framework setup (Next.js or Vite)
    * ✅ TypeScript/JavaScript configuration
    * ✅ Tailwind CSS integrated
    * ✅ Beautiful theme applied
    * ✅ Component installed and ready to use
  </Step>
</Steps>

## 🎨 Theme System

Choose from **8 professionally designed color palettes**:

| Theme         | Preview                 | Perfect For                            |
| ------------- | ----------------------- | -------------------------------------- |
| 🔘 **Zinc**   | Modern neutral grays    | Professional dashboards, SaaS apps     |
| 🔴 **Red**    | Bold and energetic      | Marketing sites, calls-to-action       |
| 🌹 **Rose**   | Warm and welcoming      | E-commerce, lifestyle brands           |
| 🟠 **Orange** | Creative and vibrant    | Creative agencies, portfolios          |
| 🟢 **Green**  | Fresh and natural       | Health, finance, eco-friendly          |
| 🔵 **Blue**   | Trust and reliability   | Corporate, tech, social platforms      |
| 🟡 **Yellow** | Bright and optimistic   | Education, entertainment, startups     |
| 🟣 **Purple** | Creative and innovative | Design agencies, tech startups, gaming |

<Callout type="tip">
  **Theme Switching**: Want to change themes later? Re-run any component installation and the theme selector will appear!
</Callout>

## 📚 Commands Reference

### `add` - Add Component (with Auto-Init)

The most powerful command that can both initialize projects and add components.

<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
  <Tab value="npm">
    ```bash
    # Basic usage
    npx mvpblocks add button

    # Force TypeScript (triggers auto-init if needed)
    npx mvpblocks add hero-1 --ts

    # Force JavaScript (triggers auto-init if needed)
    npx mvpblocks add features --js
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    # Basic usage
    yarn dlx mvpblocks add button

    # Force TypeScript (triggers auto-init if needed)
    yarn dlx mvpblocks add hero-1 --ts

    # Force JavaScript (triggers auto-init if needed)
    yarn dlx mvpblocks add features --js
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    # Basic usage
    pnpm dlx mvpblocks add button

    # Force TypeScript (triggers auto-init if needed)
    pnpm dlx mvpblocks add hero-1 --ts

    # Force JavaScript (triggers auto-init if needed)
    pnpm dlx mvpblocks add features --js
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    # Basic usage
    bunx mvpblocks add button

    # Force TypeScript (triggers auto-init if needed)
    bunx mvpblocks add hero-1 --ts

    # Force JavaScript (triggers auto-init if needed)
    bunx mvpblocks add features --js
    ```
  </Tab>
</Tabs>

**Example**: Adding a hero component to a new project

<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
  <Tab value="npm">
    ```bash
    mkdir landing-page && cd landing-page
    npx mvpblocks add hero-1 --ts
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    mkdir landing-page && cd landing-page
    yarn dlx mvpblocks add hero-1 --ts
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    mkdir landing-page && cd landing-page
    pnpm dlx mvpblocks add hero-1 --ts
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    mkdir landing-page && cd landing-page
    bunx mvpblocks add hero-1 --ts
    ```
  </Tab>
</Tabs>

**Result**: Complete Next.js or Vite project with hero component and theme!

### `list` - View All Components

Lists all available components across all categories.

<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
  <Tab value="npm">
    ```bash
    npx mvpblocks list
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx mvpblocks list
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx mvpblocks list
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bunx mvpblocks list
    ```
  </Tab>
</Tabs>

**Example Output**:

```
📦 UI Components:
  • button - Versatile button component with variants
  • input - Form input with validation states
  • card - Flexible card container component

🧱 Block Components:
  • hero-1 - Modern hero section with CTA
  • features - Feature showcase grid
  • testimonials - Customer testimonials carousel
```

### `search` - Find Components

Search for components by name, description, or category.

<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
  <Tab value="npm">
    ```bash
    npx mvpblocks search hero
    npx mvpblocks search button
    npx mvpblocks search "landing page"
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx mvpblocks search hero
    yarn dlx mvpblocks search button
    yarn dlx mvpblocks search "landing page"
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx mvpblocks search hero
    pnpm dlx mvpblocks search button
    pnpm dlx mvpblocks search "landing page"
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bunx mvpblocks search hero
    bunx mvpblocks search button
    bunx mvpblocks search "landing page"
    ```
  </Tab>
</Tabs>

**Example**: Searching for hero components

<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
  <Tab value="npm">
    ```bash
    npx mvpblocks search hero
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx mvpblocks search hero
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx mvpblocks search hero
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bunx mvpblocks search hero
    ```
  </Tab>
</Tabs>

**Example Output**:

```
🔍 Search Results for "hero":

🧱 Block Components:
  • hero-1 - Modern hero section with CTA button
  • hero-2 - Hero with background image and overlay
  • hero-3 - Minimal hero with centered content
```

### `categories` - Browse by Category

View all available component categories.

<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
  <Tab value="npm">
    ```bash
    npx mvpblocks categories
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx mvpblocks categories
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx mvpblocks categories
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bunx mvpblocks categories
    ```
  </Tab>
</Tabs>

**Example Output**:

```
📂 Component Categories:

📦 UI Components (15 components)
  Basic building blocks like buttons, inputs, cards

🧱 Block Components (25 components)  
  Complete sections like heroes, features, testimonials

🪝 Hooks (8 components)
  Custom React hooks for enhanced functionality

📚 Library (5 components)
  Utility functions and helpers
```

### `info` - Component Details

Get detailed information about a specific component.

<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
  <Tab value="npm">
    ```bash
    npx mvpblocks info button
    npx mvpblocks info hero-1
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx mvpblocks info button
    yarn dlx mvpblocks info hero-1
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx mvpblocks info button
    pnpm dlx mvpblocks info hero-1
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bunx mvpblocks info button
    bunx mvpblocks info hero-1
    ```
  </Tab>
</Tabs>

**Example**: Getting button component info

<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
  <Tab value="npm">
    ```bash
    npx mvpblocks info button
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx mvpblocks info button
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx mvpblocks info button
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bunx mvpblocks info button
    ```
  </Tab>
</Tabs>

**Example Output**:

```
📦 Component: button
📝 Description: Versatile button component with multiple variants and sizes
📂 Category: UI Components
📋 Dependencies: class-variance-authority, @radix-ui/react-slot
🏷️ Registry: registry:ui
📁 File: components/ui/button.tsx

🎨 Variants:
  • default, destructive, outline, secondary, ghost, link
  • Sizes: default, sm, lg, icon
```

### `help` - Show Help

Display help information and available commands.

<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
  <Tab value="npm">
    ```bash
    npx mvpblocks --help
    npx mvpblocks help
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx mvpblocks --help
    yarn dlx mvpblocks help
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx mvpblocks --help
    pnpm dlx mvpblocks help
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bunx mvpblocks --help
    bunx mvpblocks help
    ```
  </Tab>
</Tabs>

## 🏗️ Project Structure

### Next.js Auto-Initialization

When you run MVPBlocks in an empty directory and choose **Next.js**:

<Files>
  <Folder name="my-awesome-project" defaultOpen>
    <Folder name="app" defaultOpen>
      <File name="globals.css">🎨 Theme applied here</File>

      <File name="layout.tsx" />

      <File name="page.tsx" />
    </Folder>

    <Folder name="components" defaultOpen>
      <Folder name="ui">
        <File name="button.tsx" />
      </Folder>

      <Folder name="mvpblocks">
        <File name="hero-1.tsx" />
      </Folder>
    </Folder>

    <Folder name="lib">
      <File name="utils.ts">Utility functions</File>
    </Folder>

    <File name="package.json">📦 All dependencies</File>
    <File name="tailwind.config.ts">🎨 Tailwind setup</File>
    <File name="tsconfig.json">TypeScript config</File>
  </Folder>
</Files>

### Vite Auto-Initialization

When you run MVPBlocks in an empty directory and choose **Vite + React**:

<Files>
  <Folder name="my-awesome-project" defaultOpen>
    <Folder name="src" defaultOpen>
      <File name="index.css">🎨 Theme applied here</File>

      <File name="App.tsx" />

      <File name="main.tsx" />
    </Folder>

    <Folder name="components" defaultOpen>
      <Folder name="ui">
        <File name="button.tsx" />
      </Folder>

      <Folder name="mvpblocks">
        <File name="hero-1.tsx" />
      </Folder>
    </Folder>

    <Folder name="lib">
      <File name="utils.ts">Utility functions</File>
    </Folder>

    <File name="package.json">📦 All dependencies</File>
    <File name="vite.config.ts">⚡ Vite + Tailwind CSS v4</File>
    <File name="tsconfig.json">TypeScript config</File>
  </Folder>
</Files>

## 🎯 Example Workflows

### Complete Beginner - Landing Page

<Steps>
  <Step>
    **Create project directory**

    ```bash
    mkdir my-landing-page
    cd my-landing-page
    ```
  </Step>

  <Step>
    **Add hero section with auto-initialization**

    <Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
      <Tab value="npm">
        ```bash
        npx mvpblocks add hero-1 --ts
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx mvpblocks add hero-1 --ts
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx mvpblocks add hero-1 --ts
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx mvpblocks add hero-1 --ts
        ```
      </Tab>
    </Tabs>

    **Interactive flow**: Choose Next.js → Enter project name → Pick Blue theme → Done!
  </Step>

  <Step>
    **Add more components**

    <Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
      <Tab value="npm">
        ```bash
        npx mvpblocks add features
        npx mvpblocks add testimonials
        npx mvpblocks add cta-1
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx mvpblocks add features
        yarn dlx mvpblocks add testimonials
        yarn dlx mvpblocks add cta-1
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx mvpblocks add features
        pnpm dlx mvpblocks add testimonials
        pnpm dlx mvpblocks add cta-1
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx mvpblocks add features
        bunx mvpblocks add testimonials
        bunx mvpblocks add cta-1
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    **🎉 Perfect landing page ready!**

    Your complete landing page is now ready with hero, features, testimonials, and CTA sections!
  </Step>
</Steps>

### Experienced Developer - SaaS Dashboard

<Steps>
  <Step>
    **Create SaaS project**

    ```bash
    mkdir my-saas-app
    cd my-saas-app
    ```
  </Step>

  <Step>
    **Initialize with Vite for speed**

    <Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
      <Tab value="npm">
        ```bash
        npx mvpblocks add dashboard --ts
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx mvpblocks add dashboard --ts
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx mvpblocks add dashboard --ts
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx mvpblocks add dashboard --ts
        ```
      </Tab>
    </Tabs>

    **Interactive flow**: Choose Vite → Modern setup → Zinc theme → Ready!
  </Step>

  <Step>
    **Add UI components**

    <Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
      <Tab value="npm">
        ```bash
        npx mvpblocks add button
        npx mvpblocks add input
        npx mvpblocks add modal
        npx mvpblocks add data-table
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx mvpblocks add button
        yarn dlx mvpblocks add input
        yarn dlx mvpblocks add modal
        yarn dlx mvpblocks add data-table
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx mvpblocks add button
        pnpm dlx mvpblocks add input
        pnpm dlx mvpblocks add modal
        pnpm dlx mvpblocks add data-table
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx mvpblocks add button
        bunx mvpblocks add input
        bunx mvpblocks add modal
        bunx mvpblocks add data-table
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    **🚀 Production-ready SaaS dashboard!**

    Complete dashboard with all UI components and proper theming ready for development.
  </Step>
</Steps>

### Existing Project - Add Components

<Steps>
  <Step>
    **Navigate to existing project**

    ```bash
    cd my-existing-project
    ```
  </Step>

  <Step>
    **Add components directly**

    <Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
      <Tab value="npm">
        ```bash
        npx mvpblocks add hero-2
        npx mvpblocks add pricing
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx mvpblocks add hero-2
        yarn dlx mvpblocks add pricing
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx mvpblocks add hero-2
        pnpm dlx mvpblocks add pricing
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx mvpblocks add hero-2
        bunx mvpblocks add pricing
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    **✅ Components added to existing structure**

    No initialization needed - components are added directly to your existing project!
  </Step>
</Steps>

## 💡 Pro Tips

<Callout type="tip">
  **Package Manager Intelligence**: MVPBlocks automatically detects your package manager from lock files and uses it consistently throughout the project.
</Callout>

### Theme Switching Made Easy

Want to change themes later? Simply re-run any component installation:

<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
  <Tab value="npm">
    ```bash
    npx mvpblocks add button --ts  # Theme selector will appear
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx mvpblocks add button --ts  # Theme selector will appear
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx mvpblocks add button --ts  # Theme selector will appear
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bunx mvpblocks add button --ts  # Theme selector will appear
    ```
  </Tab>
</Tabs>

### Speed Optimization

Install globally for faster access:

<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
  <Tab value="npm">
    ```bash
    npm install -g mvpblocks
    mvpblocks add hero-1 --ts  # No npx needed!
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn global add mvpblocks
    mvpblocks add hero-1 --ts  # No yarn dlx needed!
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add -g mvpblocks
    mvpblocks add hero-1 --ts  # No pnpm dlx needed!
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add -g mvpblocks
    mvpblocks add hero-1 --ts  # No bunx needed!
    ```
  </Tab>
</Tabs>

## 🔧 Options & Flags

| Flag                   | Description                                            | Example  |
| ---------------------- | ------------------------------------------------------ | -------- |
| `--ts`, `--typescript` | Force TypeScript output (triggers auto-init if needed) | `--ts`   |
| `--js`, `--javascript` | Force JavaScript output (triggers auto-init if needed) | `--js`   |
| `--help`, `-h`         | Show help message                                      | `--help` |

## 📋 Requirements

* **Node.js** 18 or higher
* **Package Manager**: npm, yarn, pnpm, or bun (auto-detected)
* **No existing setup needed** - MVPBlocks creates everything for you!

## 🎨 Supported Frameworks

### **Next.js (Auto-Initialized)**

* ✅ App Router with TypeScript
* ✅ Tailwind CSS v3
* ✅ ESLint configuration
* ✅ Automatic `globals.css` theme integration
* ✅ Optional `src/` directory support

### **Vite + React (Auto-Initialized)**

* ✅ React with TypeScript/JavaScript
* ✅ Tailwind CSS v4 with `@tailwindcss/vite`
* ✅ Automatic `index.css` theme integration
* ✅ Lightning-fast development server

### **Existing Projects (Manual)**

* ✅ Any React/Next.js project with Tailwind CSS
* ✅ Components added to existing structure
* ✅ Dependencies auto-installed

<Callout type="warn">
  **Important**: For auto-initialization to trigger, the directory must not contain a `package.json` file. If you want to initialize in a directory with existing files, temporarily move or rename the `package.json`.
</Callout>

## 🚀 What Makes MVPBlocks Special?

### **🪄 Zero Configuration Magic**

Other CLIs require you to set up projects manually. MVPBlocks creates **production-ready projects** with a single command.

### **🎨 Professional Theme System**

No more tweaking CSS variables manually. Choose from expertly crafted color palettes and get perfect theming instantly.

### **🚀 Official Tools Integration**

Uses `create-next-app` and `create-vite` under the hood, ensuring you get the same quality setup as manual creation.

### **📦 Package Manager Intelligence**

Automatically detects and respects your preferred package manager. No configuration needed.

***

**🚀 From zero to production-ready in seconds. That's the MVPBlocks promise.**


# Designer Portfolio
URL: /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.

***

title: Designer Portfolio
description: 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.
icon: Palette
-------------

import { VideoPlayer } from '@/components/important/VideoPlayer';
import { Callout } from 'fumadocs-ui/components/callout';
import DesignerPortfolioComponents from '@/components/important/DesignerPortfolioComponents';

<VideoPlayer src="https://9o0poboblj.ufs.sh/f/vsatf5J1TVQGdgwMu75vFOAunaGJx5mqovQ42MK7ysVIEfBg" />

<DesignerPortfolioComponents
  downloadUrls={{
  rose: process.env.DESIGNER_PORTFOLIO_ROSE_DOWNLOAD_URL,
  green: process.env.DESIGNER_PORTFOLIO_GREEN_DOWNLOAD_URL,
  blue: process.env.DESIGNER_PORTFOLIO_BLUE_DOWNLOAD_URL,
}}
/>

## 💎 A Designer Portfolio That Speaks Luxury

Let's be honest, most portfolios feel like just another resume on the web.\
**Fiona’s Portfolio** changes that.

It’s not just a website. It’s a **visual experience**, designed to make your work *feel expensive*, *intentional*, and *undeniably yours.*

## 🎨 Why Creatives Love This Template

* ✨ **Built for Visual Storytelling**\
  Every scroll, every hover, every transition, designed to highlight your creativity.

* 🌈 **Three Stunning Color Variants**\
  Choose from **Rose**, **Lime Green**, or **Blue**, each crafted for unique moods and brands.

* 🌀 **Framer Motion Magic**\
  Smooth animations, floating shapes, and modern transitions that breathe life into your story.

* 💡 **Designer-Centric Layouts**\
  Hero, About, Projects, Process, Testimonials, and Contact, all built to flow naturally and feel intentional.

* 🌓 **Theme Toggle Included**\
  Switch between light and dark effortlessly, your work shines in both.

* 📱 **Responsive & Refined**\
  Looks flawless on phones, tablets, and desktops. No compromises.

* 💬 **Bonus Touches**\
  Custom 404 page, thank-you page, error page, and smooth scroll effects for an ultra-polished finish.

<Callout icon="💸" title="Looks $300+, Costs Less Than a Pizza 🍕">
  A top-tier portfolio experience that **feels premium** but costs just **$39**.\
  Built with **Next.js, TailwindCSS, and Framer Motion**, modern, fast, and aesthetic AF.\
  Perfect for freelancers, designers, and creatives who want their site to look like it was *custom-coded by an agency*.
</Callout>

## 🌟 Perfect For

* 🎨 UI/UX Designers
* 📸 Creative Artists
* 🖌️ Illustrators
* 📹 Video Editors & Visual Storytellers
* 🧑‍💻 Freelancers & Personal Brands
* ✨ Anyone who wants a portfolio that *feels like art*

***


# Developer Portfolio
URL: /docs/developer-portfolio

A stunning, blazing-fast Next.js portfolio template to showcase your work, skills, and personality, completely free.

***

title: Developer Portfolio
description: A stunning, blazing-fast Next.js portfolio template to showcase your work, skills, and personality, completely free.
icon: Code
----------

import { VideoPlayer } from '@/components/important/VideoPlayer';
import LiveDemo from '@/components/important/LiveDemo';
import { Callout } from 'fumadocs-ui/components/callout';
import { Button } from '@/components/ui/button';

<VideoPlayer src="https://9o0poboblj.ufs.sh/f/vsatf5J1TVQGLXfFySqI75juDCedH8UnytAKFaVsWMqp4fkc" />

<div className="flex flex-wrap items-center gap-4">
  <LiveDemo url="https://portfolio-template-1-seven.vercel.app/" />

  <a href={process.env.DEVELOPER_PORTFOLIO_DOWNLOAD_URL ?? '#'} target="_blank" rel="noopener noreferrer">
    <Button>
      Download Free
    </Button>
  </a>
</div>

## 🔥 The Most Stunning Next.js Portfolio Template, Free

Why burn hours building a portfolio from scratch, or spend $$$ on bloated templates,\
when you can grab this **premium-quality, blazing-fast template** for **$0**?

This template looks and performs like it cost hundreds.\
Clean UI, fast load times, and fully responsive, it's the real deal for devs, designers, and creatives.

Free? Yep. **Completely free.** 💸🔥

## 🌟 What Makes It So Good?

This isn't just another template sitting on the internet,\
it's your **shortcut to looking like a total pro**, minus the stress.

### ✨ Features That Actually Matter:

* 🎨 **Stunning Design**\
  Modern, clean, smooth, your work will *shine*.

* 📱 **Responsive AF**\
  Desktop, mobile, tablet, it's flawless everywhere.

* 🛠️ **Easy to Customize**\
  No spaghetti code. Tweak it in minutes.

* ⚡ **Performance-Optimized**\
  Loads fast. Runs smooth. Looks slick.

* 🔍 **SEO-Ready**\
  Google and clients? Both will find you.

## 👀 Who's This For?

Perfect for anyone looking to leave a mark online:

* 🎨 Designers
* 👨‍💻 Developers
* 📸 Photographers
* ✍️ Writers
* 💼 Freelancers
* Or literally *anyone* building a personal brand 💪

<Callout icon="🚀" title="Ready to Impress?">
  Your portfolio is more than a website, it's your story, your brand, your
  future. **Start strong with a template built to impress, and free to use.**
</Callout>


# Installation
URL: /docs/get-started

How to install and set up Mvpblocks in your project.

***

title: Installation
description: How to install and set up Mvpblocks in your project.
icon: Package
-------------

import { DocsInstallationCard } from '@/components/important/DocInstall.tsx';

<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  <DocsInstallationCard title="Next.js" light="/nextjs_icon_dark.svg" dark="/nextjs_icon_dark.svg" url="/docs/installation/nextjs" />

  <DocsInstallationCard title="Vite" light="/vitejs.svg" dark="/vitejs.svg" url="/docs/installation/vite" />

  <DocsInstallationCard title="Laravel" light="/laravel.svg" dark="/laravel.svg" url="/docs/installation/laravel" />

  <DocsInstallationCard title="React Router" light="/reactrouter.svg" dark="/reactrouter.svg" url="/docs/installation/react-router" />

  <DocsInstallationCard title="Remix" light="/remix_light.svg" dark="/remix_dark.svg" url="/docs/installation/remix" />

  <DocsInstallationCard title="Astro" light="/astro.svg" dark="/astro_dark.svg" url="/docs/installation/astro" />

  <DocsInstallationCard title="Gatsby" light="/gatsby.svg" dark="/gatsby.svg" url="/docs/installation/gatsby" />

  <DocsInstallationCard title="TanStack" light="/tanstack.svg" dark="/tanstack.svg" url="/docs/installation/tanstack" />

  <DocsInstallationCard title="TanStack Router" light="/tanstack.svg" dark="/tanstack.svg" url="/docs/installation/tanstack-router" />

  <DocsInstallationCard title="Manual Installation" light="/react_light.svg" dark="/react_dark.svg" url="/docs/installation/manual" />
</div>


# Introduction
URL: /docs/introduction

Learn about Mvpblocks, a collection of trending UI components for your website.

***

title: Introduction
description: Learn about Mvpblocks, a collection of trending UI components for your website.
icon: Book
----------

import { OpenInV0Button } from '@/components/important/v0'

MVPBlocks is an open-source, developer-focused UI component library. It's specifically designed to accelerate the development and launch of Minimum Viable Products (MVPs). It provides a curated collection of pre-built, responsive, and modern UI components and sections. It is built with Next.js, TailwindCSS, shadcn/ui, and Framer Motion. The library aims to streamline frontend development. It enables developers to quickly integrate high-quality, pre-styled UI elements into their projects. This is done without complex styling or animations.

## Key features and benefits

* **Extensive Component Library:** MVPBlocks offers a wide range of professionally designed UI elements for various use cases. These include SaaS dashboards, landing pages, e-commerce storefronts, authentication systems, and portfolio websites.
* **Pre-styled and Responsive:** All components are optimized for different screen sizes and modern design standards. This ensures a consistent and visually appealing user experience across devices.
* **Seamless Animations:** The components are designed with built-in animations. This eliminates the need for additional configuration or coding.
* **Multiple Integration Methods:** MVPBlocks supports various integration methods. These include CLI installation, manual copy-pasting, and direct editing within the development environment.
* **Customizable and Extendable:** Developers can easily modify the components' styling, functionality, and structure. They can do this to meet their project-specific requirements.
* **Developer-Friendly Architecture:** The library is tailored for developers. It offers minimal overhead and maximum flexibility, [according to GitHub](https://github.com/subhadeeproy3902/mvpblocks).
* **CLI Support:** MVPBlocks offers command-line interface (CLI) support. This streamlines development workflows.
* **v0 Support:** It provides initial version support. This is ideal for quickly launching MVPs, prototypes, and other early-stage projects.
* **Comprehensive Documentation:** MVPBlocks includes fully functional documentation and inline guides. This assists developers in understanding and utilizing the library effectively.

## Installation and Usage

### Install via CLI

```sh
# Add a single component
npx mvpblocks add component-name
```

### Manual Copy-Paste

Visit the website, select a component, and paste it directly into your project.

### Open in V0

Edit and customize components visually using <OpenInV0Button url={'https://v0.dev/'} />.

## Target Audience

MVPBlocks is built for:

* **Developers** - Speed up frontend development by utilizing pre-built UI components.
* **Designers** - Experiment with visually appealing UI elements without writing extensive CSS.
* **Startups & Agencies** - Build high-quality user interfaces quickly without compromising design consistency.

## Why Use MVPBlocks?

* **Saves Time** - No need to build UI components from scratch.
* **Ensures Consistency** - Use standardized, high-quality designs.
* **Flexible Integration** - Supports multiple usage methods for different workflows.
* **Regular Updates** - Stay ahead with the latest UI trends and enhancements.

***

For feedback or contributions, reach out to us to help improve MVPBlocks.


# DevOps Tools
URL: /docs/opus-devops

A clean, technical template for DevOps platforms, infrastructure monitoring, CI/CD tools, log viewers, and dev-tool dashboards. Built on Lovable.

***

title: DevOps Tools
description: A clean, technical template for DevOps platforms, infrastructure monitoring, CI/CD tools, log viewers, and dev-tool dashboards. Built on Lovable.
icon: Lovable
new: true
---------

import { BuyDialog } from '@/components/important/BuyButton';
import { VideoPlayer } from '@/components/important/VideoPlayer';
import LiveDemo from '@/components/important/LiveDemo';
import { Callout } from 'fumadocs-ui/components/callout';
import InternationalBuyButton from '@/components/important/InternationalBuyButton';

<VideoPlayer src="https://9o0poboblj.ufs.sh/f/vsatf5J1TVQG6d75MXoN3bxOusEVH9CeJgrztjAZ05c8QnYq" />

<div className="flex flex-wrap items-center gap-4">
  <LiveDemo url="https://opus-devops.lovable.app" />

  <BuyDialog title="Opus DevOps" price={850} currency="INR" image="/images/opus.webp" productId="Opus DevOps" downloadUrl={process.env.OPUS_REMIX_URL} autoDownload={false} />

  <InternationalBuyButton />
</div>

## ⚙️ A DevOps Template Built Like Real Infrastructure

Most "dev tool" templates are just dressed-up landing pages.\
**Opus DevOps** is built for the actual product, dashboards, metrics, server status, logs, alerts.

It's the kind of template engineers don't roll their eyes at.

## 🔥 Why Opus SLAPS

* 📊 **Real Dashboards**\
  Metrics tiles, time-series charts, status grids, all wired up cleanly.

* 🖥️ **Server Status Views**\
  Up/down indicators, health pills, region/cluster breakdowns.

* 📜 **Log Viewer Layouts**\
  Dense, readable, monospace-friendly UI for log streams and trace output.

* ⚙️ **CI/CD Ready**\
  Pipeline stages, build statuses, deploy timelines, all designed for ops flows.

* ⚡ **Built on Lovable**\
  One-click remix, fast customization, zero setup pain.

* 🌙 **Dark-Mode Native**\
  Designed dark-first, exactly where DevOps tools live.

<Callout icon="💸" title="$9 for a DevOps UI that looks like a real platform">
  Opus DevOps is part of our **Lovable Templates** lineup, remix instantly and ship the dev-tool platform you've been sketching for months.
</Callout>

## 🛠 Tech Stack

Next.js · TypeScript · Tailwind CSS · Recharts · Lucide Icons · Lovable

## 🚀 Perfect For

* ⚙️ Infrastructure monitoring tools
* 🛠️ CI/CD platforms
* 📊 Observability dashboards
* 📜 Log & trace viewers
* 🔔 Alerting & status products
* 👨‍💻 Indie dev-tool builders shipping something serious


# Fintech Template
URL: /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.

***

title: Fintech Template
description: A premium, payment-focused fintech template for modern financial products. Banking dashboards, wallet apps, payment processors, all production-ready and built on Lovable.
icon: Lovable
-------------

import { BuyDialog } from '@/components/important/BuyButton';
import { VideoPlayer } from '@/components/important/VideoPlayer';
import LiveDemo from '@/components/important/LiveDemo';
import { Callout } from 'fumadocs-ui/components/callout';
import InternationalBuyButton from '@/components/important/InternationalBuyButton';

<VideoPlayer src="https://9o0poboblj.ufs.sh/f/vsatf5J1TVQG1VYYKhm6qNlBTIiCt3YoJAeOFWsHr7EamQ4X" />

<div className="flex flex-wrap items-center gap-4">
  <LiveDemo url="https://paymintx.lovable.app" />

  <BuyDialog title="PayMintX" price={850} currency="INR" image="/images/paymint.webp" productId="PayMintX" downloadUrl={process.env.PAYMINTX_REMIX_URL} autoDownload={false} />

  <InternationalBuyButton />
</div>

## 💸 A Fintech Template That Actually Looks Like Money

Most fintech templates feel like glorified admin dashboards.\
**PayMintX** isn't one of them.

It's a **clean, confident, payment-first design system**, built for products people trust with their money. Banking apps, wallets, payment processors, finance SaaS, all of it ships better with PayMintX.

## 🔥 Why PayMintX Hits Different

* 💳 **Payment-Native UI**\
  Cards, transaction lists, balances, KPIs, and dashboards, all designed for finance flows.

* 📊 **Polished Dashboards**\
  Charts, metrics, and analytics blocks that actually look like a real product.

* 🧾 **Transaction History**\
  Clean rows, statuses, filters, the boring stuff done beautifully.

* 🔒 **Trust-First Design**\
  Subtle, premium, zero-noise UI. Money apps live or die on trust.

* ⚡ **Built on Lovable**\
  One-click remix. Customize, brand, and ship in minutes.

* 📱 **Fully Responsive**\
  Looks 🔥 on phones, tablets, and desktops.

<Callout icon="💸" title="$9 for a fintech UI that looks like $500+">
  PayMintX is part of our **Lovable Templates** lineup, remix instantly, customize fast, and ship a finance product that *feels real* on day one.
</Callout>

## 🛠 Tech Stack

Next.js · React · TypeScript · Shadcn UI · Tailwind CSS · Lovable

## 🚀 Perfect For

* 💳 Payment processors
* 🏦 Neobanks & wallet apps
* 📈 Finance SaaS dashboards
* 🧾 Invoicing & billing tools
* 🛠️ Indie fintech builders
* 👨‍💻 Anyone shipping a money product


# Skeletons
URL: /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.

***

title: Skeletons
description: 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.
new: true
---------

import { ComponentPreview } from '@/components/preview/component-preview';
import { extractSourceCode } from '@/lib/code';

## Shimmer Card

<ComponentPreview name="skeleton-card-one" classNameComponentContainer="min-h-[500px]" code={(await extractSourceCode('skeleton-card-one')).code} lang="tsx" />

## Shimmer Table Type One

<ComponentPreview name="skeleton-table-one" classNameComponentContainer="min-h-[500px]" code={(await extractSourceCode("skeleton-table-one")).code} lang="tsx" />

## Shimmer Table Type Two

<ComponentPreview name="skeleton-table-two" classNameComponentContainer="min-h-[500px]" code={(await extractSourceCode("skeleton-table-two")).code} lang="tsx" />


# Gradient Bars
URL: /docs/backgrounds/gradient-bars

Animated background with vertical gradient bars that pulse in a wave-like motion.

***

title: Gradient Bars
description: Animated background with vertical gradient bars that pulse in a wave-like motion.
----------------------------------------------------------------------------------------------

import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";
import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";
import {ComponentSource} from "@/components/preview/component-source";

<ComponentPreview name="gradient-bars-preview" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("gradient-bars-preview")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install motion react
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install motion react
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add motion react
        ```
      </Tab>

      <Tab>
        ```bash
        bun add motion react
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    Gradient Bars

    <ComponentSource code={(await extractSourceCode("gradient-bars")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  bars: {
    description: "The number of gradient bars to display.",
    type: "number",
    default: "20",
  },
  colors: {
    description: "The colors to use for the gradient.",
    type: "string[]",
    default: '["#e60a64", "transparent"]',
  },
}}
/>


# Buttons
URL: /docs/basic/buttons

Creative Buttons with built-in styling, offering flexibility for custom designs and responsive layouts

***

title: Buttons
description: Creative Buttons with built-in styling, offering flexibility for custom designs and responsive layouts
full: true
----------

import { DrawerCodePreview } from "@/components/preview/drawer-preview";
import { extractSourceCode } from "@/lib/code";

<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
  <DrawerCodePreview name="star-on-github" responsive code={(await extractSourceCode("star-on-github")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="btn-gradient1" responsive code={(await extractSourceCode("btn-gradient1")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="animated-btn1" responsive code={(await extractSourceCode("animated-btn1")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="download-animated-btn" responsive code={(await extractSourceCode("download-animated-btn")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="premium-btn" responsive code={(await extractSourceCode("premium-btn")).code} lang="tsx" classNameComponentContainer="p-18 pt-24" />

  <DrawerCodePreview name="progress-download-btn" responsive code={(await extractSourceCode("progress-download-btn")).code} lang="tsx" classNameComponentContainer="p-18 pt-24" />

  <DrawerCodePreview name="glow-btn" responsive code={(await extractSourceCode("glow-btn")).code} lang="tsx" classNameComponentContainer="p-18 pt-24" />

  <DrawerCodePreview name="attract-button" responsive code={(await extractSourceCode("attract-button")).code} lang="tsx" classNameComponentContainer="p-18 pt-24" />
</div>


# Loaders
URL: /docs/basic/loaders

Beautiful loaders to keep users engaged while waiting for content to load

***

title: Loaders
description: Beautiful loaders to keep users engaged while waiting for content to load
full: true
----------

import { DrawerCodePreview } from "@/components/preview/drawer-preview";
import { extractSourceCode } from "@/lib/code";

<div className="grid gap-5 gap-y-8 md:grid-cols-2 xl:grid-cols-3">
  <DrawerCodePreview name="classic-loader" responsive code={(await extractSourceCode("classic-loader")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="modified-classic-loader" responsive code={(await extractSourceCode("modified-classic-loader")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="concentric-loader" responsive code={(await extractSourceCode("concentric-loader")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="bouncing-loader" responsive code={(await extractSourceCode("bouncing-loader")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="pulsating-loader" responsive code={(await extractSourceCode("pulsating-loader")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="ripple-loader" responsive code={(await extractSourceCode("ripple-loader")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="spiral-loader" responsive code={(await extractSourceCode("spiral-loader")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="ball-bouncing-loader" responsive code={(await extractSourceCode("ball-bouncing-loader")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />
</div>


# Modals
URL: /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.

***

title: Modals
description: 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.
full: true
----------

import { DrawerCodePreview } from "@/components/preview/drawer-preview";
import { extractSourceCode } from "@/lib/code";

<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
  <DrawerCodePreview name="toc-dialog" responsive code={(await extractSourceCode("toc-dialog")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="delete-project" responsive code={(await extractSourceCode("delete-project")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="signup-modal" responsive code={(await extractSourceCode("signup-modal")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />

  <DrawerCodePreview name="signin-modal" responsive code={(await extractSourceCode("signin-modal")).code} lang="tsx" classNameComponentContainer="p-16 pt-24" />
</div>


# Pagination
URL: /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.

***

title: Pagination
description: 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.
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";
import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## Pagination Component

<ComponentPreview name="basic-pagination" props={{ showDemo: true }} classNameComponentContainer="h-[600px]" code={(await extractSourceCode('basic-pagination')).code} lang="tsx" fromDocs={true} />


# Progress
URL: /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.

***

title: Progress
description: 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.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

import { Button } from "@/components/ui/button";
import { Github } from "lucide-react";
import Link from "next/link";

<div className="flex flex-col items-center justify-start space-y-8 py-4 text-center">
  <div className="space-y-2">
    <h2 className="text-3xl mt-0 font-bold tracking-tighter sm:text-4xl md:text-5xl">Component In Development</h2>

    <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
      We're currently working on creating beautiful, responsive pagination components for MVPBlocks.
    </p>
  </div>

  <div className="w-full max-w-md rounded-lg border border-border bg-card/40 p-6 shadow-sm">
    <div className="space-y-2">
      <h3 className="text-xl font-bold">Want to contribute?</h3>

      <p className="text-sm text-muted-foreground">
        We welcome contributions from the community! If you have ideas or
        implementations for pagination components, consider contributing to
        MVPBlocks.
      </p>
    </div>
  </div>

  <Link prefetch={false} href="https://github.com/subhadeeproy3902/mvpblocks" target="_blank" rel="noopener noreferrer">
    <Button className="gap-2">
      <Github className="h-4 w-4" />

      Contribute on GitHub
    </Button>
  </Link>
</div>


# Basic Cards
URL: /docs/cards/basic-cards

A collection of basic card designs, featuring various layouts for showcasing content

***

title: Basic Cards
description: A collection of basic card designs, featuring various layouts for showcasing content
-------------------------------------------------------------------------------------------------

import RetroCard from "@/components/mvpblocks/cards/basic/retro-card";
import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## Dot Card

<ComponentPreview name="dot-card" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('dot-card')).code} lang="tsx" />

## Meshy Cards

<ComponentPreview name="meshy-cards" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('meshy-cards')).code} lang="tsx" fromDocs={true} />

## Retro Card

<ComponentPreview name="retro-card" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('retro-card')).code} lang="tsx" />


# Flip Card
URL: /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.

***

title: Flip Card
description: An interactive 3D flip card component with hover animations. Perfect for showcasing MVP features with engaging visual effects and smooth transitions.
root: cards
new: true
---------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

<ComponentPreview name="flip-card" classNameComponentContainer="h-[450px]" code={(await extractSourceCode("flip-card")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install lucide-react react
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install lucide-react react
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add lucide-react react
        ```
      </Tab>

      <Tab>
        ```bash
        bun add lucide-react react
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    <ComponentSource code={(await extractSourceCode("flip-card")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Usage

```tsx
import CardFlip from "@/components/mvpblocks/cards/basic/card-flip";

export default function MyComponent() {
  return (
    <div className="flex items-center justify-center min-h-screen p-8">
      <CardFlip
        title="Build MVPs Fast"
        subtitle="Launch your idea in record time"
        description="Copy, paste, customize, and launch your MVP faster than ever with our developer-first component library."
        features={[
          "Copy & Paste Ready",
          "Developer-First", 
          "MVP Optimized",
          "Zero Setup Required"
        ]}
      />
    </div>
  );
}
```

## API

<TypeTable
  type={{
  title: {
    type: "string",
    description: "The main title displayed on both sides of the card.",
    default: '"Build MVPs Fast"'
  },
  subtitle: {
    type: "string", 
    description: "Subtitle text shown on the front of the card.",
    default: '"Launch your idea in record time"'
  },
  description: {
    type: "string",
    description: "Detailed description shown on the back of the card.",
    default: '"Copy, paste, customize, and launch your MVP faster than ever with our developer-first component library."'
  },
  features: {
    type: "string[]",
    description: "Array of feature strings displayed as a list on the back.",
    default: '["Copy & Paste Ready", "Developer-First", "MVP Optimized", "Zero Setup Required"]'
  }
}}
/>

## Features

* 🃏 **3D Flip Animation**: Smooth card flip effect with CSS 3D transforms
* 🎯 **Hover Triggered**: Flips on mouse enter/leave for intuitive interaction
* 🚀 **MVP Themed**: Perfect for showcasing development speed and efficiency
* 📱 **Responsive**: Adapts to different screen sizes beautifully
* 🎨 **Dark Mode**: Seamlessly works with light and dark themes
* ⚡ **Performance**: Optimized animations with CSS transitions

## Examples

### Custom MVP Card

```tsx
<CardFlip
  title="Deploy Instantly"
  subtitle="From code to production"
  description="Push your changes and watch them go live in seconds, not hours."
  features={[
    "One-Click Deploy",
    "Auto Scaling",
    "Zero Downtime",
    "Global CDN"
  ]}
/>
```

### Development Tools Card

```tsx
<CardFlip
  title="Dev Tools Pro"
  subtitle="Everything you need to code"
  description="A complete development environment with all the tools and integrations you need to build faster."
  features={[
    "Code Editor",
    "Git Integration", 
    "Live Preview",
    "Collaboration"
  ]}
/>
```

### Startup Features Card

```tsx
<CardFlip
  title="Launch Ready"
  subtitle="MVP to market in days"
  description="Skip the boring setup and focus on what matters - building features your users will love."
  features={[
    "Auth System",
    "Payment Ready",
    "Admin Panel",
    "Analytics"
  ]}
/>
```

## Styling

The component uses Tailwind CSS classes and can be customized by modifying the source code. Key styling features:

* **Gradient Backgrounds**: Subtle gradients for modern look
* **Border Effects**: Dynamic borders that change on hover
* **Shadow Effects**: Layered shadows for depth
* **Icon Integration**: Lucide React icons with smooth animations
* **Typography**: Carefully balanced text hierarchy

## Animation Details

* **Flip Duration**: 700ms smooth transition
* **Perspective**: 2000px for realistic 3D effect
* **Backface Visibility**: Hidden to prevent flickering
* **Transform Origin**: Center-based rotation
* **Staggered Animations**: Features appear with sequential delays


# Codes
URL: /docs/cards/code-blocks

A collection of code blocks showcasing various designs and functionalities

***

title: Codes
description: A collection of code blocks showcasing various designs and functionalities
new: true
---------

import RetroCard from "@/components/mvpblocks/cards/basic/retro-card";
import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## Code Block 1

<ComponentPreview name="code-block-1" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('code-block-1')).code} lang="tsx" />

## Ellipsis Block

<ComponentPreview name="ellipsis-block" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('ellipsis-block')).code} lang="tsx" />


# Expandable Cards
URL: /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.

***

title: Expandable Cards
description: Interactive cards that expand to reveal detailed information with smooth animations. Available in multiple variants including product, weather, and meeting cards.
root: cards
-----------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";

## Product Card

A product card that expands to reveal detailed features, specifications, and purchase options with smooth animations.

<ComponentPreview name="expandable-product-card" classNameComponentContainer="min-h-[550px]" code={(await extractSourceCode("expandable-product-card")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install motion/react lucide-react react
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install motion/react lucide-react react
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add motion/react lucide-react react
        ```
      </Tab>

      <Tab>
        ```bash
        bun add motion/react lucide-react react
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ### Copy the Product Card Component

    <ComponentSource code={(await extractSourceCode("expandable-product-card")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Usage

```tsx
import ExpandableProductCard from "@/components/mvpblocks/cards/expandable-product-card";

export default function MyComponent() {
  return (
    <div className="flex items-center justify-center min-h-screen p-8">
      <ExpandableProductCard />
    </div>
  );
}
```

## Features

* 🎯 **Interactive Card**: Click to expand and collapse with smooth animations
* 🎨 **Fade Animations**: Smooth fade effects for content reveal
* ⭐ **Rating Display**: Dynamic star rating with review count
* 🛍️ **Product Features**: Displays key product features with icons
* 📱 **Responsive**: Adapts beautifully to different screen sizes
* 🌙 **Dark Mode**: Seamlessly works with light and dark themes
* ⚡ **Smooth Animations**: Powered by motion/react for fluid transitions
* 🖼️ **Dynamic Image**: Image resizes smoothly on expand/collapse

## Customization

The component uses the `Expandable` UI component which provides:

* **Presets**: `fade`, `slide-up` for different animation effects
* **Delays**: Custom expand/collapse delays (500ms expand, 700ms collapse)
* **Sizes**: Collapsed (330x220) and expanded (500x520) sizes
* **Spring Animations**: Custom spring animations for smooth transitions

## Examples

### Weather Card

A weather card that expands to show detailed weather information and 5-day forecast with smooth blur animations.

<ComponentPreview name="expandable-weather-card" classNameComponentContainer="min-h-[450px]" code={(await extractSourceCode("expandable-weather-card")).code} lang="tsx" hasReTrigger={true} />

#### Copy the Weather Card Component

<ComponentSource code={(await extractSourceCode("expandable-weather-card")).code} className="bg-fd-secondary/50" />

#### Usage

```tsx
import ExpandableWeatherCard from "@/components/mvpblocks/cards/expandable-weather-card";

export default function MyComponent() {
  return (
    <div className="flex items-center justify-center min-h-screen p-8">
      <ExpandableWeatherCard />
    </div>
  );
}
```

#### Key Features

* 🌤️ **Weather Details**: Shows temperature, humidity, wind, and precipitation
* 📅 **5-Day Forecast**: Displays upcoming weather forecast
* 🎨 **Blur Animations**: Smooth blur effects for content reveal
* 🔄 **Staggered Animations**: Staggered reveal of weather details

### Meeting Card

An interactive meeting card that expands to show attendees, location, and meeting details with smooth blur animations.

<ComponentPreview name="expandable-meeting-card" classNameComponentContainer="min-h-[500px]" code={(await extractSourceCode("expandable-meeting-card")).code} lang="tsx" hasReTrigger={true} />

#### Copy the Meeting Card Component

<ComponentSource code={(await extractSourceCode("expandable-meeting-card")).code} className="bg-fd-secondary/50" />

#### Usage

```tsx
import ExpandableMeetingCard from "@/components/mvpblocks/cards/expandable-meeting-card";

export default function MyComponent() {
  return (
    <div className="flex items-center justify-center min-h-screen p-8">
      <ExpandableMeetingCard />
    </div>
  );
}
```

#### Key Features

* 👥 **Attendees Display**: Shows meeting attendees with avatars
* 📅 **Calendar Integration**: Quick add to calendar button
* 🎨 **Blur Animations**: Smooth blur effects for content reveal


# Glow Cards
URL: /docs/cards/glow-cards

A collection of glow card designs, featuring various layouts for showcasing content

***

title: Glow Cards
description: A collection of glow card designs, featuring various layouts for showcasing content
root: cards
new: true
---------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";

<ComponentPreview name="glow-card" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode("glow-card")).code} lang="tsx" />


# Product Cards
URL: /docs/cards/product-cards

A collection of product card designs, featuring various layouts for showcasing products

***

title: Product Cards
description: A collection of product card designs, featuring various layouts for showcasing products
----------------------------------------------------------------------------------------------------

import { Button } from "@/components/ui/button";
import { Github } from "lucide-react";
import Link from "next/link";

<div className="flex flex-col items-center justify-start space-y-8 py-4 text-center">
  <div className="space-y-2">
    <h2 className="text-3xl mt-0 font-bold tracking-tighter sm:text-4xl md:text-5xl">Component In Development</h2>

    <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
      We're currently working on creating beautiful, responsive pagination components for MVPBlocks.
    </p>
  </div>

  <div className="w-full max-w-md rounded-lg border border-border bg-card/40 p-6 shadow-sm">
    <div className="space-y-2">
      <h3 className="text-xl font-bold">Want to contribute?</h3>

      <p className="text-sm text-muted-foreground">
        We welcome contributions from the community! If you have ideas or
        implementations for pagination components, consider contributing to
        MVPBlocks.
      </p>
    </div>
  </div>

  <Link prefetch={false} href="https://github.com/subhadeeproy3902/mvpblocks" target="_blank" rel="noopener noreferrer">
    <Button className="gap-2">
      <Github className="h-4 w-4" />

      Contribute on GitHub
    </Button>
  </Link>
</div>


# Spotlight Cards
URL: /docs/cards/spotlight-cards

Unique card designs with spotlight effects, perfect for showcasing featured content

***

title: Spotlight Cards
description: Unique card designs with spotlight effects, perfect for showcasing featured content
------------------------------------------------------------------------------------------------

import { Button } from "@/components/ui/button";
import { Github } from "lucide-react";
import Link from "next/link";

<div className="flex flex-col items-center justify-start space-y-8 py-4 text-center">
  <div className="space-y-2">
    <h2 className="text-3xl mt-0 font-bold tracking-tighter sm:text-4xl md:text-5xl">Component In Development</h2>

    <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
      We're currently working on creating beautiful, responsive pagination components for MVPBlocks.
    </p>
  </div>

  <div className="w-full max-w-md rounded-lg border border-border bg-card/40 p-6 shadow-sm">
    <div className="space-y-2">
      <h3 className="text-xl font-bold">Want to contribute?</h3>

      <p className="text-sm text-muted-foreground">
        We welcome contributions from the community! If you have ideas or
        implementations for pagination components, consider contributing to
        MVPBlocks.
      </p>
    </div>
  </div>

  <Link prefetch={false} href="https://github.com/subhadeeproy3902/mvpblocks" target="_blank" rel="noopener noreferrer">
    <Button className="gap-2">
      <Github className="h-4 w-4" />

      Contribute on GitHub
    </Button>
  </Link>
</div>


# X (Twitter) Cards
URL: /docs/cards/x-cards

A collection of X (Twitter) card designs, featuring various layouts for showcasing content

***

title: X (Twitter) Cards
description: A collection of X (Twitter) card designs, featuring various layouts for showcasing content
-------------------------------------------------------------------------------------------------------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## Basic Twitter Card

<ComponentPreview name="twittercard" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('twittercard')).code} lang="tsx" />


# Chatbot UI
URL: /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.

***

title: Chatbot UI
description: 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.
-------------------------------------------------------------------------------------------------------------------------------------------------------------------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## v0 Chat

<ComponentPreview name="v0-chat" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('v0-chat')).code} lang="tsx" />

## Bolt.New

<ComponentPreview name="bolt" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('bolt')).code} lang="tsx" />

## Animated AI Chat

<ComponentPreview name="animated-ai-chat" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('animated-ai-chat')).code} lang="tsx" fromDocs={true} />


# Conversation
URL: /docs/chatbot/conversation

Production-ready chatbot UI built on the AI SDK v6 + ai-elements, with Streamdown markdown, reasoning, tool calls, and a shimmer "Thinking..." state

***

title: Conversation
description: Production-ready chatbot UI built on the AI SDK v6 + ai-elements, with Streamdown markdown, reasoning, tool calls, and a shimmer "Thinking..." state
-----------------------------------------------------------------------------------------------------------------------------------------------------------------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { Callout } from "fumadocs-ui/components/callout";

## Working Chatbot

<ComponentPreview name="working-chatbot" code={(await extractSourceCode('working-chatbot')).code} lang="tsx" className="min-h-screen" />

<Callout type="info">
  Uses the **AI SDK v6** (`ai@^6`, `@ai-sdk/react@^3`) with **ai-elements** for
  the conversation shell + **Streamdown** for streaming markdown. Tool calls
  render as collapsible cards, reasoning appears in a "Thinking..." panel that
  auto-closes when done, and a shimmer indicates inflight requests.
</Callout>

### Installation

<Steps>
  <Step>
    #### Install the SDK + provider packages

    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install ai @ai-sdk/react @ai-sdk/groq streamdown sonner zod
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm add ai @ai-sdk/react @ai-sdk/groq streamdown sonner zod
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add ai @ai-sdk/react @ai-sdk/groq streamdown sonner zod
        ```
      </Tab>

      <Tab>
        ```bash
        bun add ai @ai-sdk/react @ai-sdk/groq streamdown sonner zod
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Install the ai-elements components

    Conversation pulls in everything you need: message bubbles, response (Streamdown),
    reasoning panel, tool-call cards, and the shimmer indicator.

    ```bash
    npx ai-elements@latest add conversation message response reasoning tool shimmer prompt-input
    ```
  </Step>

  <Step>
    #### Create the API route

    Make an `app/api/chat/route.ts` (App Router):

    ```ts title="app/api/chat/route.ts"
    import { groq } from '@ai-sdk/groq';
    import {
      convertToModelMessages,
      smoothStream,
      stepCountIs,
      streamText,
      type UIMessage,
    } from 'ai';

    export const maxDuration = 30;

    export async function POST(req: Request) {
      const { messages }: { messages: UIMessage[] } = await req.json();

      const result = streamText({
        model: groq('openai/gpt-oss-120b'), // good function-calling on Groq
        messages: await convertToModelMessages(messages),
        stopWhen: stepCountIs(6),
        maxOutputTokens: 8192,
        experimental_transform: smoothStream({ chunking: 'word' }),
      });

      return result.toUIMessageStreamResponse({
        sendReasoning: true, // enables <Reasoning /> rendering on the client
      });
    }
    ```

    <Callout type="warn">
      v6 changes from v5:

      * `convertToModelMessages` is **async** — always `await` it.
      * `maxSteps` → `stopWhen: stepCountIs(n)`
      * `maxTokens` → `maxOutputTokens`
      * `toDataStreamResponse()` → `toUIMessageStreamResponse()`
      * Tool definitions use `inputSchema` (not `parameters`) and the `tool({...})` helper.
    </Callout>
  </Step>

  <Step>
    #### Add your API key

    ```txt title=".env.local"
    GROQ_API_KEY=your-groq-api-key
    ```
  </Step>

  <Step>
    #### Hook it up on the client

    `useChat` in v6 no longer manages input state — own it with `useState` and
    submit via `sendMessage({ parts: [{ type: 'text', text }] })`:

    ```tsx title="components/working-chatbot.tsx"
    'use client';

    import { useChat } from '@ai-sdk/react';
    import { useState } from 'react';
    import { isToolUIPart, getToolName } from 'ai';

    import {
      Conversation,
      ConversationContent,
      ConversationEmptyState,
      ConversationScrollButton,
    } from '@/components/ai-elements/conversation';
    import { Message, MessageContent } from '@/components/ai-elements/message';
    import { Response } from '@/components/ai-elements/response';
    import {
      Reasoning,
      ReasoningContent,
      ReasoningTrigger,
    } from '@/components/ai-elements/reasoning';
    import {
      Tool,
      ToolContent,
      ToolHeader,
      ToolInput,
      ToolOutput,
    } from '@/components/ai-elements/tool';
    import { Shimmer } from '@/components/ai-elements/shimmer';
    import {
      PromptInput,
      PromptInputSubmit,
      PromptInputTextarea,
    } from '@/components/ai-elements/prompt-input';

    export default function WorkingChatbot() {
      const [input, setInput] = useState('');
      const { messages, status, sendMessage } = useChat();
      const isLoading = status === 'submitted' || status === 'streaming';

      const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (!input.trim()) return;
        sendMessage({ parts: [{ type: 'text', text: input.trim() }] });
        setInput('');
      };

      return (
        <div className="relative size-full h-[600px] rounded-lg border">
          <Conversation>
            <ConversationContent>
              {messages.length === 0 ? (
                <ConversationEmptyState
                  title="Start a conversation"
                  description="Ask me anything below"
                />
              ) : (
                messages.map((message, i) => {
                  const isLast = i === messages.length - 1;
                  const reasoning = message.parts
                    .filter((p) => p.type === 'reasoning')
                    .map((p) => (p as { text: string }).text)
                    .join('\n\n');
                  const lastPart = message.parts.at(-1);
                  const reasoningStreaming =
                    isLast &&
                    status === 'streaming' &&
                    lastPart?.type === 'reasoning';

                  return (
                    <Message from={message.role} key={message.id}>
                      <MessageContent>
                        {reasoning && (
                          <Reasoning isStreaming={reasoningStreaming}>
                            <ReasoningTrigger />
                            <ReasoningContent>{reasoning}</ReasoningContent>
                          </Reasoning>
                        )}
                        {message.parts.map((part, idx) => {
                          if (part.type === 'text') {
                            return (
                              <Response key={`${message.id}-${idx}`}>
                                {part.text}
                              </Response>
                            );
                          }
                          if (isToolUIPart(part)) {
                            return (
                              <Tool key={part.toolCallId} defaultOpen>
                                <ToolHeader
                                  type={`tool-${getToolName(part)}` as never}
                                  state={part.state}
                                />
                                <ToolContent>
                                  {(part.state === 'input-available' ||
                                    part.state === 'output-available' ||
                                    part.state === 'output-error') &&
                                    part.input !== undefined && (
                                      <ToolInput input={part.input} />
                                    )}
                                  {part.state === 'output-available' && (
                                    <ToolOutput
                                      output={
                                        <pre className="text-xs whitespace-pre-wrap p-3">
                                          {typeof part.output === 'string'
                                            ? part.output
                                            : JSON.stringify(part.output, null, 2)}
                                        </pre>
                                      }
                                      errorText={undefined}
                                    />
                                  )}
                                  {part.state === 'output-error' && (
                                    <ToolOutput
                                      output={null}
                                      errorText={part.errorText}
                                    />
                                  )}
                                </ToolContent>
                              </Tool>
                            );
                          }
                          return null;
                        })}
                      </MessageContent>
                    </Message>
                  );
                })
              )}
              {isLoading &&
                messages.at(-1)?.role === 'user' && (
                  <Message from="assistant">
                    <MessageContent>
                      <Shimmer duration={1.8}>
                        {status === 'submitted' ? 'Thinking...' : 'Generating...'}
                      </Shimmer>
                    </MessageContent>
                  </Message>
                )}
            </ConversationContent>
            <ConversationScrollButton />
          </Conversation>

          <PromptInput onSubmit={handleSubmit} className="mt-4">
            <PromptInputTextarea
              value={input}
              placeholder="Say something..."
              onChange={(e) => setInput(e.currentTarget.value)}
            />
            <PromptInputSubmit
              status={status === 'streaming' ? 'streaming' : 'ready'}
              disabled={!input.trim()}
            />
          </PromptInput>
        </div>
      );
    }
    ```
  </Step>

  <Step>
    #### Point the demo at your route

    The bundled `working-chatbot` defaults to `/api/demo-chat`. Switch it to your route
    by passing a custom transport:

    ```diff
    + import { DefaultChatTransport } from 'ai';

      const { messages, status, sendMessage } = useChat({
    +   transport: new DefaultChatTransport({ api: '/api/chat' }),
      });
    ```
  </Step>
</Steps>

## What each piece does

| Piece                                                     | Why it's here                                                                                                                                               |
| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Conversation` / `ConversationContent`**                | Sticky-bottom scroll container + content slot. Auto-scrolls as new tokens stream in.                                                                        |
| **`ConversationEmptyState`**                              | Renders icon/title/description placeholder when `messages.length === 0`.                                                                                    |
| **`ConversationScrollButton`**                            | Floating "scroll to bottom" pill that appears when the user scrolls up.                                                                                     |
| **`ConversationDownload`**                                | Optional. Floating button that exports the chat as a `.md` file via the bundled `messagesToMarkdown` helper.                                                |
| **`Message` / `MessageContent`**                          | Per-bubble role-aware styling (`is-user` / `is-assistant`).                                                                                                 |
| **`Response`**                                            | The Streamdown-powered markdown renderer. Handles incomplete code fences, GFM tables, math, and live re-flow during streaming.                              |
| **`Reasoning` / `ReasoningTrigger` / `ReasoningContent`** | Collapsible "Thinking..." panel that auto-opens while the model streams `reasoning` parts and auto-closes 1s after they finish.                             |
| **`Tool` / `ToolHeader` / `ToolInput` / `ToolOutput`**    | Collapsible tool-call card showing input JSON + output + status badge (`input-streaming` / `input-available` / `output-available` / `output-error`).        |
| **`Shimmer`**                                             | Animated gradient text. Use for the "Thinking..." / "Generating..." indicator in the assistant bubble between the user's send and the first streamed token. |
| **`PromptInput` family**                                  | Textarea + submit button wired for `submitted`/`streaming` status.                                                                                          |

## Conversation Example

<ComponentPreview name="conversation1" code={(await extractSourceCode('conversation1')).code} lang="tsx" />


# Bubble Board
URL: /docs/creative/bubble-board

A draggable animated bubble grid powered by Framer Motion.

***

title: Bubble Board
description: A draggable animated bubble grid powered by Framer Motion.
root: creative
new: true
---------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";

<ComponentPreview name="bubble-board" classNameComponentContainer="min-h-[350px]" code={(await extractSourceCode('bubble-board')).code} lang="tsx" />

## Behavior

* Drag the board in any direction.
* Bubbles react to the cursor by scaling smoothly based on distance.
* Includes staggered grid alignment for a dimensional feel.


# Floating Dock
URL: /docs/creative/floating-dock

A floating dock navigation component with smooth hover animations. Features desktop and mobile variants with interactive icon scaling.

***

title: Floating Dock
description: A floating dock navigation component with smooth hover animations. Features desktop and mobile variants with interactive icon scaling.
root: basic
-----------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";

<ComponentPreview name="floating-dock-demo" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode("floating-dock-demo")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install motion/react lucide-react react
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install motion/react lucide-react react
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add motion/react lucide-react react
        ```
      </Tab>

      <Tab>
        ```bash
        bun add motion/react lucide-react react
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    <ComponentSource code={(await extractSourceCode("floating-dock-demo")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Usage

```tsx
import { FloatingDock } from "@/components/ui/floating-dock";
import { Home, Github, Twitter } from "lucide-react";

export default function MyComponent() {
  const links = [
    {
      title: "Home",
      icon: <Home className="h-full w-full" />,
      href: "/",
    },
    {
      title: "GitHub",
      icon: <Github className="h-full w-full" />,
      href: "https://github.com",
    },
    {
      title: "Twitter",
      icon: <Twitter className="h-full w-full" />,
      href: "https://twitter.com",
    },
  ];

  return (
    <div className="flex items-center justify-center h-screen">
      <FloatingDock items={links} />
    </div>
  );
}
```

## Features

* 🎯 **Interactive Icons**: Icons scale smoothly on hover with spring animations
* 📱 **Responsive**: Separate desktop and mobile layouts
* 🎨 **Smooth Animations**: Powered by motion/react for fluid transitions
* 🌙 **Dark Mode**: Seamlessly works with light and dark themes
* 🖱️ **Hover Effects**: Icons expand based on mouse position
* 📱 **Mobile Menu**: Collapsible menu for mobile devices

## Positioning

The component supports custom positioning via className props:

```tsx
<FloatingDock
  desktopClassName="fixed bottom-4 left-1/2 -translate-x-1/2"
  mobileClassName="fixed bottom-4 right-4"
  items={links}
/>
```

**Note**:

* Desktop navbar is better positioned at the bottom
* Mobile navbar is better positioned at bottom right

## Customization

You can customize the dock by:

* **Icons**: Use any React node as icons (lucide-react, custom SVGs, images)
* **Colors**: Modify Tailwind classes for background and text colors
* **Sizes**: Adjust the dock height and icon sizes via className
* **Animations**: The spring animations are configurable in the component

## Examples

### Custom Icons with Images

```tsx
const links = [
  {
    title: "Logo",
    icon: (
      <img
        src="/logo.png"
        width={20}
        height={20}
        alt="Logo"
        className="rounded-full"
      />
    ),
    href: "/",
  },
];
```

### Fixed Position Dock

```tsx
<FloatingDock
  desktopClassName="fixed bottom-8 left-1/2 -translate-x-1/2 z-50"
  items={links}
/>
```


# Globe
URL: /docs/creative/globe

Globe is a component that displays a 3D globe with a variety of features and customizations.

***

title: Globe
description: Globe is a component that displays a 3D globe with a variety of features and customizations.
root: creative
--------------

import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";
import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## Basic

<ComponentPreview name="globe1" classNameComponentContainer="min-h-[200px]" code={(await extractSourceCode('globe1')).code} lang="tsx" />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install cobe
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install cobe 
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add cobe 
        ```
      </Tab>

      <Tab>
        ```bash
        bun add cobe 
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ```tsx title="globe.tsx"
    'use client';

    import React, { useEffect, useRef } from 'react';
    import createGlobe from 'cobe';
    import { cn } from '@/lib/utils';

    interface EarthProps {
      className?: string;
      theta?: number;
      dark?: number;
      scale?: number;
      diffuse?: number;
      mapSamples?: number;
      mapBrightness?: number;
      baseColor?: [number, number, number];
      markerColor?: [number, number, number];
      glowColor?: [number, number, number];
    }
    const Earth: React.FC<EarthProps> = ({
      className,
      theta = 0.25,
      dark = 1,
      scale = 1.1,
      diffuse = 1.2,
      mapSamples = 40000,
      mapBrightness = 6,
      baseColor = [0.4, 0.6509, 1],
      markerColor = [1, 0, 0],
      glowColor = [0.2745, 0.5765, 0.898],
    }) => {
      const canvasRef = useRef<HTMLCanvasElement>(null);

      useEffect(() => {
        let width = 0;
        const onResize = () =>
          canvasRef.current && (width = canvasRef.current.offsetWidth);
        window.addEventListener('resize', onResize);
        onResize();
        let phi = 0;

        onResize();
        const globe = createGlobe(canvasRef.current!, {
          devicePixelRatio: 2,
          width: width * 2,
          height: width * 2,
          phi: 0,
          theta: theta,
          dark: dark,
          scale: scale,
          diffuse: diffuse,
          mapSamples: mapSamples,
          mapBrightness: mapBrightness,
          baseColor: baseColor,
          markerColor: markerColor,
          glowColor: glowColor,
          opacity: 1,
          offset: [0, 0],
          markers: [
            // longitude latitude
          ],
          onRender: (state: Record<string, any>) => {
            // Called on every animation frame.
            // `state` will be an empty object, return updated params.\
            state.phi = phi;
            phi += 0.003;
          },
        });

        return () => {
          globe.destroy();
        };
      }, []);

      return (
        <div
          className={cn(
            'flex items-center justify-center z-[10] w-full max-w-[350px] mx-auto',
            className
          )}
        >
          <canvas
            ref={canvasRef}
            style={{
              width: '100%',
              height: '100%',
              maxWidth: '100%',
              aspectRatio: '1',
            }}
          />
        </div>
      );
    };

    export default Earth;
    ```
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  className: {
    description:
      "Optional CSS class for customizing the style and appearance of the Earth component.",
    type: "string",
    default: undefined,
  },
  theta: {
    description:
      "Adjusts the Earth's rotational angle to simulate movement or perspective.",
    type: "number",
    default: 0.25,
  },
  dark: {
    description:
      "Controls the level of darkness, affecting the Earth's lighting and shadowing.",
    type: "number",
    default: 1,
  },
  scale: {
    description:
      "Scales the Earth, making it larger or smaller in the rendered view.",
    type: "number",
    default: 1.1,
  },
  diffuse: {
    description:
      "Influences the intensity of the diffuse lighting, altering the Earth's overall brightness.",
    type: "number",
    default: 1.2,
  },
  mapSamples: {
    description:
      "Defines the number of texture samples for rendering the Earth's map, impacting detail quality.",
    type: "number",
    default: 40000,
  },
  mapBrightness: {
    description:
      "Adjusts the brightness of the Earth's map texture, affecting visibility and color contrast.",
    type: "number",
    default: 6,
  },
  baseColor: {
    description:
      "Sets the base color of the Earth in RGB format, representing its primary hue.",
    type: "[number, number, number]",
    default: "[0.4, 0.6509, 1]",
  },
  markerColor: {
    description:
      "Determines the RGB color of markers placed on the Earth, usually for highlighting locations.",
    type: "[number, number, number]",
    default: "[1, 0, 0]",
  },
  glowColor: {
    description:
      "Defines the RGB color of the Earth's glow effect, enhancing visual appeal and atmosphere.",
    type: "[number, number, number]",
    default: "[0.2745, 0.5765, 0.898]",
  },
}}
/>

## Examples

### Globe Card

<ComponentPreview name="globe2" classNameComponentContainer="min-h-[100px]" code={(await extractSourceCode('globe2')).code} lang="tsx" />


# Interactive Tooltip
URL: /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.

***

title: Interactive Tooltip
description: A dynamic tooltip component with mouse-following animations and spring physics. Perfect for displaying user profiles or team member information with engaging hover effects.
root: creative
--------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

<ComponentPreview name="interactive-tooltip" classNameComponentContainer="h-[250px] flex items-center justify-center" code={(await extractSourceCode("interactive-tooltip")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install motion react
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install motion react
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add motion react
        ```
      </Tab>

      <Tab>
        ```bash
        bun add motion react
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    <ComponentSource code={(await extractSourceCode("interactive-tooltip")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Usage

```tsx
import InteractiveTooltip from "@/components/mvpblocks/creative/interactive-tooltip";

const teamMembers = [
  {
    id: 1,
    name: "John Doe",
    designation: "Senior Developer",
    image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
  },
  {
    id: 2,
    name: "Jane Smith",
    designation: "UI/UX Designer",
    image: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=100&h=100&fit=crop&crop=face"
  },
  {
    id: 3,
    name: "Mike Johnson",
    designation: "Product Manager",
    image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face"
  }
];

export default function MyComponent() {
  return (
    <div className="flex items-center justify-center min-h-[200px] p-8">
      <div className="flex items-center">
        <InteractiveTooltip items={teamMembers} />
      </div>
    </div>
  );
}
```

## API

<TypeTable
  type={{
  items: {
    type: "Array<{id: number, name: string, designation: string, image: string}>",
    description: "Array of items to display with tooltips. Each item should have id, name, designation, and image properties.",
    default: "[]"
  }
}}
/>

### Item Properties

<TypeTable
  type={{
  id: {
    type: "number",
    description: "Unique identifier for the item.",
    default: "-"
  },
  name: {
    type: "string",
    description: "Display name shown in the tooltip.",
    default: "-"
  },
  designation: {
    type: "string",
    description: "Job title or role description shown below the name.",
    default: "-"
  },
  image: {
    type: "string",
    description: "URL of the profile image to display.",
    default: "-"
  }
}}
/>

## Features

* 🎯 **Mouse Following**: Tooltip follows mouse movement with smooth spring physics
* 🔄 **Dynamic Rotation**: Tooltip rotates based on mouse position for natural feel
* ⚡ **Spring Animations**: Smooth enter/exit animations with configurable spring physics
* 🎨 **Gradient Effects**: Beautiful gradient borders for visual appeal
* 📱 **Responsive Design**: Works seamlessly on different screen sizes
* 🖼️ **Image Hover Effects**: Scale and z-index changes on hover
* 🎪 **Stacked Layout**: Overlapping avatars with proper z-index management

## Examples

### Development Team

```tsx
const devTeam = [
  {
    id: 1,
    name: "Alex Rivera",
    designation: "Lead Frontend Developer",
    image: "/team/alex.jpg"
  },
  {
    id: 2,
    name: "Sarah Chen",
    designation: "Backend Engineer",
    image: "/team/sarah.jpg"
  },
  {
    id: 3,
    name: "Marcus Williams",
    designation: "DevOps Engineer",
    image: "/team/marcus.jpg"
  }
];

<InteractiveTooltip items={devTeam} />
```

### Customer Success Team

```tsx
const customerTeam = [
  {
    id: 1,
    name: "Emma Thompson",
    designation: "Customer Success Manager",
    image: "/team/emma.jpg"
  },
  {
    id: 2,
    name: "David Park",
    designation: "Support Specialist",
    image: "/team/david.jpg"
  },
  {
    id: 3,
    name: "Lisa Rodriguez",
    designation: "Account Manager",
    image: "/team/lisa.jpg"
  }
];

<InteractiveTooltip items={customerTeam} />
```

### Executive Team

```tsx
const executives = [
  {
    id: 1,
    name: "Michael Johnson",
    designation: "Chief Executive Officer",
    image: "/executives/ceo.jpg"
  },
  {
    id: 2,
    name: "Jennifer Davis",
    designation: "Chief Technology Officer",
    image: "/executives/cto.jpg"
  },
  {
    id: 3,
    name: "Robert Kim",
    designation: "Chief Marketing Officer",
    image: "/executives/cmo.jpg"
  }
];

<InteractiveTooltip items={executives} />
```

## Animation Details

### Spring Configuration

The component uses carefully tuned spring physics:

* **Stiffness**: 100 (smooth but responsive)
* **Damping**: 5 (minimal bouncing)
* **Rotation Range**: -45° to +45° based on mouse position
* **Translation Range**: -50px to +50px horizontal offset

### Hover Effects

* **Scale**: Images scale to 105% on hover
* **Z-Index**: Hovered image moves to front layer (z-30)
* **Transition**: 500ms duration for smooth scaling

### Tooltip Animation

* **Enter**: Opacity 0→1, Y 20→0, Scale 0.6→1
* **Exit**: Opacity 1→0, Y 0→20, Scale 1→0.6
* **Spring Type**: High stiffness (260) with controlled damping (10)

## Styling Customization

The component uses Tailwind classes and can be customized:

### Avatar Styling

```css
.avatar-custom {
  @apply h-16 w-16 border-2 border-background rounded-full ring-2 ring-primary/20;
}
```

### Tooltip Styling

```css
.tooltip-custom {
  @apply bg-background/95 backdrop-blur-sm border border-border text-foreground px-4 py-2 rounded-lg shadow-xl;
}
```

### Theme Colors

The component uses semantic theme colors for consistency:

* **Background**: `bg-background/95` with blur for modern glass effect
* **Border**: `border-border` for subtle outlines
* **Text**: `text-foreground` for primary text, `text-muted-foreground` for secondary
* **Ring Effect**: `ring-primary/20` with hover state `ring-primary/40`
* **Gradients**: `from-primary/5 via-transparent to-primary/5` for subtle depth

### Gradient Effects

The tooltip includes multiple gradient layers using theme colors:

* **Background gradient**: Subtle vertical gradient with `primary/5`
* **Primary gradient**: 20% width, `via-primary`
* **Secondary gradient**: 40% width, `via-primary/60`

## Best Practices

1. **Image Optimization**: Use optimized images (WebP format recommended)
2. **Responsive Images**: Provide appropriate sizes for different screen densities
3. **Accessibility**: Include proper alt text for profile images
4. **Performance**: Limit the number of items to avoid performance issues
5. **Spacing**: Allow adequate spacing between avatars for comfortable interaction


# Motion Number
URL: /docs/creative/motion-number

Motion Number is a component that displays a number with a motion effect.

***

title: Motion Number
description: Motion Number is a component that displays a number with a motion effect.
--------------------------------------------------------------------------------------

import { Button } from "@/components/ui/button";
import { Github } from "lucide-react";
import Link from "next/link";

<div className="flex flex-col items-center justify-start space-y-8 py-4 text-center">
  <div className="space-y-2">
    <h2 className="text-3xl mt-0 font-bold tracking-tighter sm:text-4xl md:text-5xl">Component In Development</h2>

    <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
      We're currently working on creating beautiful, responsive pagination components for MVPBlocks.
    </p>
  </div>

  <div className="w-full max-w-md rounded-lg border border-border bg-card/40 p-6 shadow-sm">
    <div className="space-y-2">
      <h3 className="text-xl font-bold">Want to contribute?</h3>

      <p className="text-sm text-muted-foreground">
        We welcome contributions from the community! If you have ideas or
        implementations for pagination components, consider contributing to
        MVPBlocks.
      </p>
    </div>
  </div>

  <Link prefetch={false} href="https://github.com/subhadeeproy3902/mvpblocks" target="_blank" rel="noopener noreferrer">
    <Button className="gap-2">
      <Github className="h-4 w-4" />

      Contribute on GitHub
    </Button>
  </Link>
</div>


# Pointer Highlight
URL: /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.

***

title: Pointer Highlight
description: A pointer highlight component that animates a border and pointer around text or content. Perfect for highlighting important text with smooth animations.
root: creative
--------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";

<ComponentPreview name="pointer-highlight-demo" classNameComponentContainer="min-h-[400px]" code={(await extractSourceCode("pointer-highlight-demo")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install motion/react react
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install motion/react react
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add motion/react react
        ```
      </Tab>

      <Tab>
        ```bash
        bun add motion/react react
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    <ComponentSource code={(await extractSourceCode("pointer-highlight-demo")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Usage

```tsx
import { PointerHighlight } from "@/components/ui/pointer-highlight";

export default function MyComponent() {
  return (
    <div className="text-2xl font-bold">
      The best way to grow is to{' '}
      <PointerHighlight>
        <span className="text-primary">collaborate</span>
      </PointerHighlight>
    </div>
  );
}
```

## Features

* 🎯 **Animated Border**: Smooth border animation that expands around content
* 📍 **Pointer Indicator**: Animated pointer icon that appears at the corner
* 📱 **Responsive**: Automatically adjusts to content size changes
* 🎨 **Customizable**: Customize colors, borders, and pointer styles
* 🌙 **Dark Mode**: Works seamlessly with light and dark themes
* ⚡ **Smooth Animations**: Powered by motion/react for fluid transitions

## Customization

### Custom Colors

```tsx
<PointerHighlight
  rectangleClassName="border-blue-500"
  pointerClassName="text-blue-500"
>
  <span>Highlighted text</span>
</PointerHighlight>
```

### Custom Container

```tsx
<PointerHighlight
  containerClassName="inline-block mx-2"
  rectangleClassName="border-2 border-primary rounded-lg"
>
  <span className="text-primary font-bold">Custom styled</span>
</PointerHighlight>
```

## Examples

### Highlighting Multiple Words

```tsx
<div className="text-xl">
  Build{' '}
  <PointerHighlight>
    <span className="text-primary">faster</span>
  </PointerHighlight>
  {' '}with MVPBlocks
</div>
```

### With Custom Styling

```tsx
<PointerHighlight
  rectangleClassName="border-2 border-primary rounded-md"
  pointerClassName="text-primary h-6 w-6"
>
  <span className="text-primary font-semibold text-2xl">
    Important Text
  </span>
</PointerHighlight>
```

### In Headings

```tsx
<h1 className="text-4xl font-bold">
  Welcome to{' '}
  <PointerHighlight>
    <span className="text-primary">MVPBlocks</span>
  </PointerHighlight>
</h1>
```


# Scroll Animation
URL: /docs/creative/scroll

Motion Number is a component that displays a number with a motion effect.

***

title: Scroll Animation
description: Motion Number is a component that displays a number with a motion effect.
--------------------------------------------------------------------------------------

import { Button } from "@/components/ui/button";
import { Github } from "lucide-react";
import Link from "next/link";

<div className="flex flex-col items-center justify-start space-y-8 py-4 text-center">
  <div className="space-y-2">
    <h2 className="text-3xl mt-0 font-bold tracking-tighter sm:text-4xl md:text-5xl">Component In Development</h2>

    <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
      We're currently working on creating beautiful, responsive pagination components for MVPBlocks.
    </p>
  </div>

  <div className="w-full max-w-md rounded-lg border border-border bg-card/40 p-6 shadow-sm">
    <div className="space-y-2">
      <h3 className="text-xl font-bold">Want to contribute?</h3>

      <p className="text-sm text-muted-foreground">
        We welcome contributions from the community! If you have ideas or
        implementations for pagination components, consider contributing to
        MVPBlocks.
      </p>
    </div>
  </div>

  <Link prefetch={false} href="https://github.com/subhadeeproy3902/mvpblocks" target="_blank" rel="noopener noreferrer">
    <Button className="gap-2">
      <Github className="h-4 w-4" />

      Contribute on GitHub
    </Button>
  </Link>
</div>


# Target Cursor
URL: /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.

***

title: Target Cursor
description: A custom animated cursor component with GSAP. Features spinning animation, corner tracking on hover, and parallax effects. Perfect for interactive websites.
root: creative
new: true
---------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";

<ComponentPreview name="target-cursor-demo" classNameComponentContainer="min-h-[500px]" code={(await extractSourceCode("target-cursor-demo")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install gsap react
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install gsap react
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add gsap react
        ```
      </Tab>

      <Tab>
        ```bash
        bun add gsap react
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    <ComponentSource code={(await extractSourceCode("target-cursor-demo")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Usage

```tsx
import { TargetCursor } from "@/components/ui/target-cursor";

export default function MyComponent() {
  return (
    <div>
      <TargetCursor 
        spinDuration={2}
        hideDefaultCursor={true}
        parallaxOn={true}
      />
      
      <button className="cursor-target">Hover me!</button>
      <div className="cursor-target">Another target</div>
    </div>
  );
}
```

## Features

* 🎯 **Custom Cursor**: Replaces default cursor with animated custom cursor
* 🔄 **Spinning Animation**: Continuous rotation animation when idle
* 📐 **Corner Tracking**: Corners expand to frame hovered elements
* 🎨 **Parallax Effect**: Smooth parallax movement of corners
* 📱 **Mobile Detection**: Automatically disabled on mobile devices
* ⚡ **GSAP Powered**: Smooth animations powered by GSAP
* 🎭 **Click Animation**: Scale animation on mouse down/up

## Props

| Prop                | Type      | Default            | Description                           |
| ------------------- | --------- | ------------------ | ------------------------------------- |
| `targetSelector`    | `string`  | `".cursor-target"` | CSS selector for target elements      |
| `spinDuration`      | `number`  | `2`                | Duration of spin animation in seconds |
| `hideDefaultCursor` | `boolean` | `true`             | Hide the default browser cursor       |
| `hoverDuration`     | `number`  | `0.2`              | Duration of hover animation           |
| `parallaxOn`        | `boolean` | `true`             | Enable parallax effect on corners     |

## Examples

### Basic Usage

```tsx
<TargetCursor />
<button className="cursor-target">Hover me</button>
```

### Custom Selector

```tsx
<TargetCursor targetSelector=".my-custom-target" />
<div className="my-custom-target">Custom target</div>
```

### Faster Spin

```tsx
<TargetCursor spinDuration={1} />
```

### Without Parallax

```tsx
<TargetCursor parallaxOn={false} />
```

### Keep Default Cursor

```tsx
<TargetCursor hideDefaultCursor={false} />
```

## Styling Targets

Add the `cursor-target` class (or your custom selector) to any element you want the cursor to interact with:

```tsx
<button className="cursor-target">Button</button>
<div className="cursor-target">Div</div>
<a href="#" className="cursor-target">Link</a>
```

## Mobile Support

The component automatically detects mobile devices and returns `null` to avoid conflicts with touch interactions. It checks for:

* Touch screen capability
* Screen size (≤768px)
* User agent string


# Admin Dashboard
URL: /docs/dashboards/admin

A comprehensive admin dashboard with real-time analytics, user management, and system monitoring. Features custom components with minimal shadcn usage.

***

title: Admin Dashboard
description: A comprehensive admin dashboard with real-time analytics, user management, and system monitoring. Features custom components with minimal shadcn usage.
root: dashboards
full: true
new: true
---------

import { ComponentPreview } from '@/components/preview/component-preview';
import { extractSourceCode } from '@/lib/code';
import { ComponentSource } from '@/components/preview/component-source';
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import { Step, Steps } from 'fumadocs-ui/components/steps';
import { TypeTable } from 'fumadocs-ui/components/type-table';
import { File, Folder, Files } from 'fumadocs-ui/components/files';

<ComponentPreview name="admin-dashboard-1" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('admin-dashboard-1')).code} lang="tsx" fromDocs={true} />

## Folder structure

<Files className="bg-fd-secondary/50">
  <Folder name="components" defaultOpen>
    <Folder name="mvpblocks" defaultOpen>
      <Folder name="ui" defaultOpen>
        <File name="admin-sidebar.tsx" className="hover:bg-secondary/50 cursor-pointer" />

        <File name="dashboard-card.tsx" className="hover:bg-secondary/50 cursor-pointer" />

        <File name="dashboard-header.tsx" className="hover:bg-secondary/50 cursor-pointer" />

        <File name="quick-actions.tsx" className="hover:bg-secondary/50 cursor-pointer" />

        <File name="recent-activity.tsx" className="hover:bg-secondary/50 cursor-pointer" />

        <File name="revenue-chart.tsx" className="hover:bg-secondary/50 cursor-pointer" />

        <File name="system-status.tsx" className="hover:bg-secondary/50 cursor-pointer" />

        <File name="users-table.tsx" className="hover:bg-secondary/50 cursor-pointer" />
      </Folder>

      <File name="index.tsx" className="hover:bg-secondary/50" />
    </Folder>

    <Folder name="ui">
      <File name="breadcrumb.tsx" className="hover:bg-secondary/50" />

      <File name="button.tsx" className="hover:bg-secondary/50" />

      <File name="dropdown-menu.tsx" className="hover:bg-secondary/50" />

      <File name="input.tsx" className="hover:bg-secondary/50" />

      <File name="separator.tsx" className="hover:bg-secondary/50" />

      <File name="sheet.tsx" className="hover:bg-secondary/50" />

      <File name="sidebar.tsx" className="hover:bg-secondary/50" />

      <File name="skeleton.tsx" className="hover:bg-secondary/50" />

      <File name="tooltip.tsx" className="hover:bg-secondary/50" />
    </Folder>
  </Folder>
</Files>

## Installation and setup

To set up the Admin Dashboard, follow these steps:

<Steps>
  <Step>
    Add admin-sidebar, dashboard-card, dashboard-header, quick-actions, recent-activity, revenue-chart, system-status, and user-table components to your project.

    <Tabs items={['CLI', 'Manual']}>
      <Tab>
        Run the following command to install the necessary components:

        ```bash
        npx mvpblocks add admin-sidebar dashboard-card dashboard-header quick-actions recent-activity revenue-chart system-status users-table
        ```
      </Tab>

      <Tab>
        <Steps>
          <Step>
            Copy the code from the following files and paste it into your project:
          </Step>

          <Step>
            Add admin-sidebar.tsx:

            <ComponentSource code={(await extractSourceCode('admin-sidebar')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add dashboard-card.tsx:

            <ComponentSource code={(await extractSourceCode('dashboard-card')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add dashboard-header.tsx:

            <ComponentSource code={(await extractSourceCode('dashboard-header')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add quick-actions.tsx:

            <ComponentSource code={(await extractSourceCode('quick-actions')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add recent-activity.tsx:

            <ComponentSource code={(await extractSourceCode('recent-activity')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add revenue-chart.tsx:

            <ComponentSource code={(await extractSourceCode('revenue-chart')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add system-status.tsx:

            <ComponentSource code={(await extractSourceCode('system-status')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add user-table.tsx:

            <ComponentSource code={(await extractSourceCode('users-table')).code} className="bg-fd-secondary/50" />
          </Step>
        </Steps>
      </Tab>
    </Tabs>
  </Step>
</Steps>


# Personal Finance
URL: /docs/dashboards/personal-finance

Personal Finance Dashboard with budget tracking, expense analytics, savings goals, and transaction management micro UI components.

***

title: Personal Finance
description: Personal Finance Dashboard with budget tracking, expense analytics, savings goals, and transaction management micro UI components.
root: dashboards
full: true
new: true
---------

import { ComponentPreview } from '@/components/preview/component-preview';
import { extractSourceCode } from '@/lib/code';
import { ComponentSource } from '@/components/preview/component-source';
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import { Step, Steps } from 'fumadocs-ui/components/steps';
import { TypeTable } from 'fumadocs-ui/components/type-table';
import { File, Folder, Files } from 'fumadocs-ui/components/files';

<ComponentPreview name="personal-finance-dashboard-1" classNameComponentContainer="h-[100vh]" code={(await extractSourceCode('personal-finance-dashboard-1')).code} lang="tsx" fromDocs={true} />

## Folder Structure

<Files className="bg-fd-secondary/50">
  <Folder name="components" defaultOpen>
    <Folder name="mvpblocks" defaultOpen>
      <Folder name="personal-finance-dashboard-1" defaultOpen>
        <Folder name="ui" defaultOpen>
          <File name="budget-progress.tsx" className="hover:bg-secondary/50 cursor-pointer" />

          <File name="dashboard-layout.tsx" className="hover:bg-secondary/50 cursor-pointer" />

          <File name="Header.tsx" className="hover:bg-secondary/50 cursor-pointer" />

          <File name="IncomeExpenseChart.tsx" className="hover:bg-secondary/50 cursor-pointer" />

          <File name="MonthlySpendingChart.tsx" className="hover:bg-secondary/50 cursor-pointer" />

          <File name="RecentTransactions.tsx" className="hover:bg-secondary/50 cursor-pointer" />

          <File name="SavingsGoals.tsx" className="hover:bg-secondary/50 cursor-pointer" />

          <File name="Footer.tsx" className="hover:bg-secondary/50 cursor-pointer" />

          <File name="StatsCards.tsx" className="hover:bg-secondary/50 cursor-pointer" />
        </Folder>

        <File name="index.tsx" className="hover:bg-secondary/50 cursor-pointer" />
      </Folder>
    </Folder>

    <Folder name="ui">
      <File name="badge.tsx" className="hover:bg-secondary/50" />

      <File name="button.tsx" className="hover:bg-secondary/50" />

      <File name="card.tsx" className="hover:bg-secondary/50" />

      <File name="chart.tsx" className="hover:bg-secondary/50" />

      <File name="dropdown-menu.tsx" className="hover:bg-secondary/50" />

      <File name="input.tsx" className="hover:bg-secondary/50" />

      <File name="progress.tsx" className="hover:bg-secondary/50" />
    </Folder>
  </Folder>
</Files>

## Installation and Setup

To set up the Personal Finance Dashboard, follow these steps

<Steps>
  <Step>
    Install the necessary components for the dashboard

    <Tabs items={['CLI', 'Manual']}>
      <Tab>
        Run the following command to install all finance dashboard components

        ```bash
        npx mvpblocks add personal-finance-dashboard-1
        ```
      </Tab>

      <Tab>
        <Steps>
          {/* 1️⃣ Basic setup */}

          <Step>
            Install required dependencies

            ```bash
            npm install recharts lucide-react next-theme
            ```

            or

            ```bash
            yarn add recharts lucide-react next-theme
            ```
          </Step>

          {/* 2️⃣ Base structure setup */}

          <Step>
            Copy the following components and paste them into your project
          </Step>

          <Step>
            Add index.tsx => Copy the code from the above on clicking the "Code" tab which is present corresponding to "Preview tab" after the component title.
          </Step>

          <Step>
            Add dashboard-layout.tsx

            <ComponentSource code={(await extractSourceCode('dashboard-layout')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add personal-sidebar.tsx

            <ComponentSource code={(await extractSourceCode('personal-sidebar')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add personal-header.tsx

            <ComponentSource code={(await extractSourceCode('personal-header')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add personal-footer.tsx

            <ComponentSource code={(await extractSourceCode('personal-footer')).code} className="bg-fd-secondary/50" />
          </Step>

          {/* 3️⃣ Dashboard content components */}

          <Step>
            Add stats-cards.tsx

            <ComponentSource code={(await extractSourceCode('stats-cards')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add budget-progress.tsx

            <ComponentSource code={(await extractSourceCode('budget-progress')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add income-expense-chart.tsx

            <ComponentSource code={(await extractSourceCode('income-expense-chart')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add monthly-spending-chart.tsx

            <ComponentSource code={(await extractSourceCode('monthly-spending-chart')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add recent-transactions.tsx

            <ComponentSource code={(await extractSourceCode('recent-transactions')).code} className="bg-fd-secondary/50" />
          </Step>

          <Step>
            Add savings-goals.tsx

            <ComponentSource code={(await extractSourceCode('savings-goals')).code} className="bg-fd-secondary/50" />
          </Step>
        </Steps>
      </Tab>
    </Tabs>
  </Step>

  <Step>
    Import and use the dashboard in your application

    ```tsx
    import PersonalFinanceDashboard from '@/components/dashboards/personal-finance-dashboard-1/index';

    export default function FinancePage() {
      return <PersonalFinanceDashboard />;
    }
    ```
  </Step>
</Steps>

## Customization

### Adding New Categories

Update the categories array in `BudgetProgress.tsx`:

```tsx
const categories = [
  {
    name: 'Food & Dining',
    spent: 320,
    budget: 500,
    color: 'bg-blue-500',
    icon: '🍔',
  },
  // ...add more like this
];
```

### Adding New Monthly Spending Data

Update the data array in `MonthlySpendingChart.tsx`:

```tsx
const data = [
  { name: 'Food & Dining', value: 320, color: '#3b82f6' },
  { name: 'Transportation', value: 180, color: '#10b981' },
  { name: 'Entertainment', value: 120, color: '#8b5cf6' },
  // ...add more like this
];
```

Like this do changes in the data or add new data in particular files.


# User Dashboard
URL: /docs/dashboards/user

User dashboards provide insights into user activity, preferences, and interactions. They help users manage their profiles, settings, and other personal information.

***

title: User Dashboard
description: User dashboards provide insights into user activity, preferences, and interactions. They help users manage their profiles, settings, and other personal information.
root: forms
-----------

import { Button } from "@/components/ui/button";
import { Github } from "lucide-react";
import Link from "next/link";

<div className="flex flex-col items-center justify-start space-y-8 py-4 text-center">
  <div className="space-y-2">
    <h2 className="text-3xl mt-0 font-bold tracking-tighter sm:text-4xl md:text-5xl">Component In Development</h2>

    <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
      We're currently working on creating beautiful, responsive pagination components for MVPBlocks.
    </p>
  </div>

  <div className="w-full max-w-md rounded-lg border border-border bg-card/40 p-6 shadow-sm">
    <div className="space-y-2">
      <h3 className="text-xl font-bold">Want to contribute?</h3>

      <p className="text-sm text-muted-foreground">
        We welcome contributions from the community! If you have ideas or
        implementations for pagination components, consider contributing to
        MVPBlocks.
      </p>
    </div>
  </div>

  <Link prefetch={false} href="https://github.com/subhadeeproy3902/mvpblocks" target="_blank" rel="noopener noreferrer">
    <Button className="gap-2">
      <Github className="h-4 w-4" />

      Contribute on GitHub
    </Button>
  </Link>
</div>


# Authentication
URL: /docs/forms/loginforms

Authentication forms are essential for user registration and login. They help secure your application and manage user access.

***

title: Authentication
description: Authentication forms are essential for user registration and login. They help secure your application and manage user access.
root: forms
-----------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## Sign-In Page

<ComponentPreview name="login-form-3" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('login-form-3')).code} lang="tsx" fromDocs={true} />

## Login Page

<ComponentPreview name="login-form-2" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('login-form-2')).code} lang="tsx" fromDocs={true} hasReTrigger={true} />

## Login Form

<ComponentPreview name="login-form1" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('login-form1')).code} lang="tsx" />


# Multi Step Forms
URL: /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.

***

title: Multi Step Forms
description: 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.
root: forms
-----------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Features

* **Step-by-Step Progress**: Visual indicators show users their progress through the form
* **Form Validation**: Built-in validation using React Hook Form and Zod
* **Smooth Animations**: Transitions between steps with Framer Motion
* **Responsive Design**: Works on all screen sizes
* **Customizable**: Easily modify steps, fields, and validation rules

## Preview

<ComponentPreview name="multi-step-form" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('multi-step-form')).code} lang="tsx" fromDocs={true} />

### Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion react-hook-form zod @hookform/resolvers
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion react-hook-form zod @hookform/resolvers
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion react-hook-form zod @hookform/resolvers
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion react-hook-form zod @hookform/resolvers
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    `components/ui/multi-step-form.tsx`

    ```tsx title="multi-step-form.tsx"
    "use client";

    import React, { useState } from "react";
    import { motion, AnimatePresence } from "framer-motion";
    import { z } from "zod";
    import { useForm } from "react-hook-form";
    import { zodResolver } from "@hookform/resolvers/zod";
    import { cn } from "@/lib/utils";
    import { Button } from "@/components/ui/button";
    import { Input } from "@/components/ui/input";
    import { Label } from "@/components/ui/label";
    import { Progress } from "@/components/ui/progress";
    import { CheckCircle2, ArrowRight, ArrowLeft } from "lucide-react";

    // Define the form schema for each step
    const personalInfoSchema = z.object({
      firstName: z.string().min(2, "First name must be at least 2 characters"),
      lastName: z.string().min(2, "Last name must be at least 2 characters"),
      email: z.string().email("Please enter a valid email address"),
    });

    const addressSchema = z.object({
      address: z.string().min(5, "Address must be at least 5 characters"),
      city: z.string().min(2, "City must be at least 2 characters"),
      zipCode: z.string().min(5, "Zip code must be at least 5 characters"),
    });

    const accountSchema = z.object({
      username: z.string().min(3, "Username must be at least 3 characters"),
      password: z
        .string()
        .min(8, "Password must be at least 8 characters")
        .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
        .regex(/[0-9]/, "Password must contain at least one number"),
      confirmPassword: z.string(),
    }).refine(data => data.password === data.confirmPassword, {
      message: "Passwords do not match",
      path: ["confirmPassword"],
    });

    // Combine all schemas for the final form data
    const formSchema = z.object({
      ...personalInfoSchema.shape,
      ...addressSchema.shape,
      ...accountSchema._def.schema.shape,
    });

    type FormData = z.infer<typeof formSchema>;

    interface MultiStepFormProps {
      className?: string;
      onSubmit?: (data: FormData) => void;
    }

    export default function MultiStepForm({ className, onSubmit }: MultiStepFormProps) {
      const [step, setStep] = useState(0);
      const [formData, setFormData] = useState<Partial<FormData>>({});
      const [isSubmitting, setIsSubmitting] = useState(false);
      const [isComplete, setIsComplete] = useState(false);

      // Define the steps
      const steps = [
        {
          id: "personal",
          title: "Personal Information",
          description: "Tell us about yourself",
          schema: personalInfoSchema,
          fields: [
            { name: "firstName", label: "First Name", type: "text", placeholder: "John" },
            { name: "lastName", label: "Last Name", type: "text", placeholder: "Doe" },
            { name: "email", label: "Email", type: "email", placeholder: "john.doe@example.com" },
          ],
        },
        {
          id: "address",
          title: "Address Information",
          description: "Where do you live?",
          schema: addressSchema,
          fields: [
            { name: "address", label: "Address", type: "text", placeholder: "123 Main St" },
            { name: "city", label: "City", type: "text", placeholder: "New York" },
            { name: "zipCode", label: "Zip Code", type: "text", placeholder: "10001" },
          ],
        },
        {
          id: "account",
          title: "Account Setup",
          description: "Create your account",
          schema: accountSchema,
          fields: [
            { name: "username", label: "Username", type: "text", placeholder: "johndoe" },
            { name: "password", label: "Password", type: "password", placeholder: "••••••••" },
            { name: "confirmPassword", label: "Confirm Password", type: "password", placeholder: "••••••••" },
          ],
        },
      ];

      // Get the current step schema
      const currentStepSchema = steps[step].schema;

      // Setup form with the current step schema
      const {
        register,
        handleSubmit,
        formState: { errors },
        reset,
      } = useForm<any>({
        resolver: zodResolver(currentStepSchema as z.ZodType<any>),
        defaultValues: formData,
      });

      // Calculate progress percentage
      const progress = ((step + 1) / steps.length) * 100;

      // Handle next step
      const handleNextStep = (data: any) => {
        const updatedData = { ...formData, ...data };
        setFormData(updatedData);

        if (step < steps.length - 1) {
          setStep(step + 1);
          // Reset form with the updated data for the next step
          reset(updatedData);
        } else {
          // Final step submission
          setIsSubmitting(true);
          setTimeout(() => {
            if (onSubmit) {
              onSubmit(updatedData as FormData);
            }
            setIsComplete(true);
            setIsSubmitting(false);
          }, 1500);
        }
      };

      // Handle previous step
      const handlePrevStep = () => {
        if (step > 0) {
          setStep(step - 1);
        }
      };

      // Animation variants
      const variants = {
        hidden: { opacity: 0, x: 50 },
        visible: { opacity: 1, x: 0 },
        exit: { opacity: 0, x: -50 },
      };

      return (
        <div className={cn("w-full max-w-md mx-auto p-6 rounded-lg shadow-lg bg-card/40", className)}>
          {!isComplete ? (
            <>
              {/* Progress bar */}
              <div className="mb-8">
                <div className="flex justify-between mb-2">
                  <span className="text-sm font-medium">Step {step + 1} of {steps.length}</span>
                  <span className="text-sm font-medium">{Math.round(progress)}%</span>
                </div>
                <Progress value={progress} className="h-2" />
              </div>

              {/* Step indicators */}
              <div className="flex justify-between mb-8">
                {steps.map((s, i) => (
                  <div key={s.id} className="flex flex-col items-center">
                    <div
                      className={cn(
                        "w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold",
                        i < step
                          ? "bg-primary text-primary-foreground"
                          : i === step
                          ? "bg-primary text-primary-foreground ring-2 ring-primary/30"
                          : "bg-secondary text-secondary-foreground"
                      )}
                    >
                      {i < step ? <CheckCircle2 className="h-4 w-4" /> : i + 1}
                    </div>
                    <span className="text-xs mt-1 hidden sm:block">{s.title}</span>
                  </div>
                ))}
              </div>

              {/* Form */}
              <AnimatePresence mode="wait">
                <motion.div
                  key={step}
                  initial="hidden"
                  animate="visible"
                  exit="exit"
                  variants={variants}
                  transition={{ duration: 0.3 }}
                >
                  <div className="mb-6">
                    <h2 className="text-xl font-bold">{steps[step].title}</h2>
                    <p className="text-sm text-muted-foreground">{steps[step].description}</p>
                  </div>

                  <form onSubmit={handleSubmit(handleNextStep)} className="space-y-4">
                    {steps[step].fields.map((field) => (
                      <div key={field.name} className="space-y-2">
                        <Label htmlFor={field.name}>{field.label}</Label>
                        <Input
                          id={field.name}
                          type={field.type}
                          placeholder={field.placeholder}
                          {...register(field.name as any)}
                          className={cn(errors[field.name as string] && "border-destructive")}
                        />
                        {errors[field.name as string] && (
                          <p className="text-sm text-destructive">
                            {errors[field.name as string]?.message as string}
                          </p>
                        )}
                      </div>
                    ))}

                    <div className="flex justify-between pt-4">
                      <Button
                        type="button"
                        variant="outline"
                        onClick={handlePrevStep}
                        disabled={step === 0}
                        className={cn(step === 0 && "invisible")}
                      >
                        <ArrowLeft className="mr-2 h-4 w-4" /> Back
                      </Button>
                      <Button type="submit" disabled={isSubmitting}>
                        {step === steps.length - 1 ? (
                          isSubmitting ? "Submitting..." : "Submit"
                        ) : (
                          <>
                            Next <ArrowRight className="ml-2 h-4 w-4" />
                          </>
                        )}
                      </Button>
                    </div>
                  </form>
                </motion.div>
              </AnimatePresence>
            </>
          ) : (
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5 }}
              className="text-center py-10"
            >
              <div className="inline-flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 mb-4">
                <CheckCircle2 className="h-8 w-8 text-primary" />
              </div>
              <h2 className="text-2xl font-bold mb-2">Form Submitted!</h2>
              <p className="text-muted-foreground mb-6">
                Thank you for completing the form. We&apos;ll be in touch soon.
              </p>
              <Button onClick={() => {
                setStep(0);
                setFormData({});
                setIsComplete(false);
                reset({});
              }}>
                Start Over
              </Button>
            </motion.div>
          )}
        </div>
      );
    }
    ```
  </Step>
</Steps>

### Usage

The multi-step form component can be customized to fit your specific needs. Here's how to use it:

```tsx
<MultiStepForm
  className="max-w-md mx-auto"
  onSubmit={(data) => {
    // Handle form submission
    console.log("Form data:", data);
  }}
/>
```

### Customization

You can customize the form steps, fields, and validation rules by modifying the component code. The form is built using React Hook Form and Zod for validation, making it easy to add or modify fields and validation rules.

#### Adding Custom Steps

To add or modify steps, update the `steps` array in the component:

```tsx
const steps = [
  {
    id: "personal",
    title: "Personal Information",
    description: "Tell us about yourself",
    schema: personalInfoSchema,
    fields: [
      { name: "firstName", label: "First Name", type: "text", placeholder: "John" },
      { name: "lastName", label: "Last Name", type: "text", placeholder: "Doe" },
      { name: "email", label: "Email", type: "email", placeholder: "john.doe@example.com" },
    ],
  },
  // Add more steps here
];
```

#### Customizing Validation

The form uses Zod for validation. You can customize the validation rules by modifying the schema for each step:

```tsx
const personalInfoSchema = z.object({
  firstName: z.string().min(2, "First name must be at least 2 characters"),
  lastName: z.string().min(2, "Last name must be at least 2 characters"),
  email: z.string().email("Please enter a valid email address"),
});
```

### Accessibility

The multi-step form is built with accessibility in mind:

* Proper form labels and ARIA attributes
* Keyboard navigation support
* Error messages for form validation
* Focus management between steps

### Props

<TypeTable
  type={{
  className: {
    description: "Additional CSS classes to apply to the form container.",
    type: "string",
    default: "undefined",
  },
  onSubmit: {
    description: "Callback function called when the form is submitted.",
    type: "(data: FormData) => void",
    default: "undefined",
  },
}}
/>


# Colors
URL: /docs/foundation/colors

Color palette that is used in Mvpblocks consistently.

***

title: Colors
description: Color palette that is used in Mvpblocks consistently.
icon: Blend
-----------

import ColorPalette from '@/components/important/ColorPalette';

## Base Colors

<ColorPalette
  colors={[
  {
    name: 'Background',
    usage: 'bg-background',
    value: 'hsl(var(--background))',
  },
  {
    name: 'Foreground',
    usage: 'text-foreground',
    value: 'hsl(var(--foreground))',
  },
  { name: 'Card', usage: 'bg-card', value: 'hsl(var(--card))' },
  {
    name: 'Card Foreground',
    usage: 'text-card-foreground',
    value: 'hsl(var(--card-foreground))',
  },
]}
/>

## Interactive Colors

<ColorPalette
  colors={[
  { name: 'Primary', usage: 'bg-primary', value: 'hsl(var(--primary))' },
  {
    name: 'Primary Foreground',
    usage: 'text-primary-foreground',
    value: 'hsl(var(--primary-foreground))',
  },
  {
    name: 'Secondary',
    usage: 'bg-secondary',
    value: 'hsl(var(--secondary))',
  },
  {
    name: 'Secondary Foreground',
    usage: 'text-secondary-foreground',
    value: 'hsl(var(--secondary-foreground))',
  },
  { name: 'Accent', usage: 'bg-accent', value: 'hsl(var(--accent))' },
  {
    name: 'Accent Foreground',
    usage: 'text-accent-foreground',
    value: 'hsl(var(--accent-foreground))',
  },
]}
/>

## Utility Colors

<ColorPalette
  colors={[
  { name: 'Muted', usage: 'bg-muted', value: 'hsl(var(--muted))' },
  {
    name: 'Muted Foreground',
    usage: 'text-muted-foreground',
    value: 'hsl(var(--muted-foreground))',
  },
  {
    name: 'Destructive',
    usage: 'bg-destructive',
    value: 'hsl(var(--destructive))',
  },
  {
    name: 'Destructive Foreground',
    usage: 'text-destructive-foreground',
    value: 'hsl(var(--destructive-foreground))',
  },
]}
/>

## Form & Layout Colors

<ColorPalette
  colors={[
  { name: 'Border', usage: 'border-border', value: 'hsl(var(--border))' },
  { name: 'Input', usage: 'input-input', value: 'hsl(var(--input))' },
  { name: 'Ring', usage: 'ring-ring', value: 'hsl(var(--ring))' },
]}
/>

## Other Colors

<ColorPalette
  colors={[
  { name: 'Sidebar', usage: 'bg-sidebar', value: 'hsl(var(--sidebar))' },
  {
    name: 'Sidebar Foreground',
    usage: 'text-sidebar-foreground',
    value: 'hsl(var(--sidebar-foreground))',
  },
  {
    name: 'Sidebar Primary',
    usage: 'bg-sidebar-primary',
    value: 'hsl(var(--sidebar-primary))',
  },
  {
    name: 'Sidebar Primary Foreground',
    usage: 'text-sidebar-primary-foreground',
    value: 'hsl(var(--sidebar-primary-foreground))',
  },
  {
    name: 'Sidebar Accent',
    usage: 'bg-sidebar-accent',
    value: 'hsl(var(--sidebar-accent))',
  },
  {
    name: 'Sidebar Accent Foreground',
    usage: 'text-sidebar-accent-foreground',
    value: 'hsl(var(--sidebar-accent-foreground))',
  },
  {
    name: 'Sidebar Border',
    usage: 'border-sidebar',
    value: 'hsl(var(--sidebar-border))',
  },
  {
    name: 'Sidebar Ring',
    usage: 'ring-sidebar',
    value: 'hsl(var(--sidebar-ring))',
  },
]}
/>


# Contributors
URL: /docs/foundation/contributions

Meet the amazing people who have contributed to MVPBlocks

***

title: Contributors
description: Meet the amazing people who have contributed to MVPBlocks
icon: Users
-----------

import Contributors from '@/components/about/Contributors';
import { Callout } from "fumadocs-ui/components/callout";

MVPBlocks is built by an amazing community of developers from around the world. We appreciate every contribution, whether it's code, documentation, design, or feedback.

<Contributors />

<Callout>
  Thank you to all the wonderful people who have contributed to this project!
</Callout>

## How to Contribute

We welcome contributions from everyone! Here's how you can get involved:

### 1. Fork the Repository

Start by forking the [MVPBlocks repository](https://github.com/subhadeeproy3902/mvpblocks) on GitHub.

### 2. Clone Your Fork

```bash
git clone https://github.com/YOUR_USERNAME/mvpblocks.git
cd mvpblocks
```

### 3. Create a Branch

```bash
git checkout -b feature/your-feature-name
```

### 4. Make Your Changes

* Add new components
* Fix bugs
* Improve documentation
* Enhance existing features

### 5. Commit Your Changes

```bash
git add .
git commit -m "feat: add your feature description"
```

### 6. Push to Your Fork

```bash
git push origin feature/your-feature-name
```

### 7. Create a Pull Request

Go to the original repository and create a pull request from your fork.

## Contribution Guidelines

* Follow the existing code style and conventions
* Write clear, descriptive commit messages
* Test your changes before submitting
* Update documentation when necessary
* Be respectful and constructive in discussions

## Recognition

All contributors are automatically added to this page once their pull request is merged. Thank you for making MVPBlocks better!


# Bento Grids
URL: /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.

***

title: Bento Grids
description: 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.
root: grids
-----------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";

## Features

* **Responsive Design**: Automatically adapts to different screen sizes
* **Flexible Layout**: Combine different sized grid items for visual interest
* **Customizable**: Easily modify colors, content, and styling to match your brand
* **Interactive Elements**: Includes hover effects and animations for better user engagement

## Basic Bento Grid

<ComponentPreview name="bento-grid-1" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("bento-grid-1")).code} lang="tsx" fromDocs={true} />

### Usage

```jsx
import BentoGrid1 from "@/components/mvpblocks/grids/bento-grid-1";

export default function MyPage() {
  return (
    <div>
      <BentoGrid1 />
    </div>
  );
}
```

### Customization

You can customize the Bento grid by modifying the items array in the component:

```jsx
const items = [
  {
    title: "Custom Title",
    description: "Your custom description here.",
    icon: <YourIcon className="h-5 w-5" />,
    size: "medium", // "small", "medium", or "large"
  },
  // Add more items as needed
];
```

## Bento with details

<ComponentPreview name="bento-grid-2" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("bento-grid-2")).code} lang="tsx" fromDocs={true} />


# Gallery
URL: /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.

***

title: Gallery
description: 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.
root: grids
-----------

import { Button } from "@/components/ui/button";
import { Github } from "lucide-react";
import Link from "next/link";

<div className="flex flex-col items-center justify-start space-y-8 py-4 text-center">
  <div className="space-y-2">
    <h2 className="text-3xl mt-0 font-bold tracking-tighter sm:text-4xl md:text-5xl">Component In Development</h2>

    <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
      We're currently working on creating beautiful, responsive pagination components for MVPBlocks.
    </p>
  </div>

  <div className="w-full max-w-md rounded-lg border border-border bg-card/40 p-6 shadow-sm">
    <div className="space-y-2">
      <h3 className="text-xl font-bold">Want to contribute?</h3>

      <p className="text-sm text-muted-foreground">
        We welcome contributions from the community! If you have ideas or
        implementations for pagination components, consider contributing to
        MVPBlocks.
      </p>
    </div>
  </div>

  <Link prefetch={false} href="https://github.com/subhadeeproy3902/mvpblocks" target="_blank" rel="noopener noreferrer">
    <Button className="gap-2">
      <Github className="h-4 w-4" />

      Contribute on GitHub
    </Button>
  </Link>
</div>


# Masonry Grids
URL: /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.

***

title: Masonry Grids
description: 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.
root: grids
-----------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";

<ComponentPreview name="masonry-grid-1" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("masonry-grid-1")).code} lang="tsx" />


# Astro
URL: /docs/installation/astro

Install and configure shadcn/ui for Astro

***

title: Astro
description: Install and configure shadcn/ui for Astro
------------------------------------------------------

import { Callout } from "fumadocs-ui/components/callout";

### Create project

Start by creating a new Astro project:

```bash
npx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
```

### Edit tsconfig.json file

Add the following code to the `tsconfig.json` file to resolve paths:

```ts title="tsconfig.json" {4-9} showLineNumbers
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}
```

### Run the CLI

Run the `shadcn` init command to setup your project:

```bash
npx shadcn@latest init
```

### Add Components

You can now start adding components to your project.

```bash
npx shadcn@latest add button
```

The command above will add the `Button` component to your project. You can then import it like this:

```astro title="src/pages/index.astro" {2,16} showLineNumbers
---
import { Button } from "@/components/ui/button"
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<Link prefetch={false} rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro + TailwindCSS</title>
	</head>

	<body>
		<div className="grid place-items-center h-screen content-center">
			<Button>Button</Button>
		</div>
	</body>
</html>
```


# Gatsby
URL: /docs/installation/gatsby

Install and configure Gatsby.

***

title: Gatsby
description: Install and configure Gatsby.
------------------------------------------

import { Callout } from "fumadocs-ui/components/callout";

<Callout className="mb-6 border-blue-600 bg-blue-50 dark:border-blue-900 dark:bg-blue-950 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
  **Update:** We have added full support for React 19 and Tailwind v4 in the
  `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more
  information.
</Callout>

### Create project

Start by creating a new Gatsby project using `create-gatsby`:

```bash
npm init gatsby
```

### Configure your Gatsby project to use TypeScript and Tailwind CSS

You will be asked a few questions to configure your project:

```txt showLineNumbers
✔ What would you like to call your site?
· your-app-name
✔ What would you like to name the folder where your site will be created?
· your-app-name
✔ Will you be using JavaScript or TypeScript?
· TypeScript
✔ Will you be using a CMS?
· Choose whatever you want
✔ Would you like to install a styling system?
· Tailwind CSS
✔ Would you like to install additional features with other plugins?
· Choose whatever you want
✔ Shall we do this? (Y/n) · Yes
```

### Edit tsconfig.json file

Add the following code to the `tsconfig.json` file to resolve paths:

```ts {4-9} showLineNumbers
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}
```

### Create gatsby-node.ts file

Create a `gatsby-node.ts` file at the root of your project if it doesn’t already exist, and add the code below to the `gatsby-node` file so your app can resolve paths:

```ts
import * as path from "path"

export const onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        "@/components": path.resolve(__dirname, "src/components"),
        "@/lib/utils": path.resolve(__dirname, "src/lib/utils"),
      },
    },
  })
}
```

### Run the CLI

Run the `shadcn` init command to setup your project:

```bash
npx shadcn@latest init
```

### Configure components.json

You will be asked a few questions to configure `components.json`:

```txt showLineNumbers
Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › ./src/styles/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no
```

### That's it

You can now start adding components to your project.

```bash
npx shadcn@latest add button
```

The command above will add the `Button` component to your project. You can then import it like this:

```tsx {1,6} showLineNumbers
import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```


# Laravel
URL: /docs/installation/laraval

Install and configure shadcn/ui for Laravel

***

title: Laravel
description: Install and configure shadcn/ui for Laravel
--------------------------------------------------------

import { Callout } from "fumadocs-ui/components/callout";

### Create project

Start by creating a new Laravel project with Inertia and React using the laravel installer `laravel new my-app`:

```bash
laravel new my-app --react
```

### Add Components

You can now start adding components to your project.

```bash
npx shadcn@latest add switch
```

The command above will add the `Switch` component to `resources/js/components/ui/switch.tsx`. You can then import it like this:

```tsx title="resources/js/pages/index.tsx" {1,6} showLineNumbers
import { Switch } from "@/components/ui/switch"

const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  )
}

export default MyPage
```


# Manual Installation
URL: /docs/installation/manual

Add dependencies to your project manually.

***

title: Manual Installation
description: Add dependencies to your project manually.
-------------------------------------------------------

import { Callout } from "fumadocs-ui/components/callout";

### Add Tailwind CSS

Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.

[Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation)

### Add dependencies

Add the following dependencies to your project:

```bash
npm install class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
```

### Configure path aliases

Configure the path aliases in your `tsconfig.json` file.

```json {3-6} title="tsconfig.json" showLineNumbers
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

The `@` alias is a preference. You can use other aliases if you want.

### Configure styles

Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).

```css showLineNumbers title="src/styles/globals.css"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

### Add a cn helper

```ts showLineNumbers title="lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
```

### Create a `components.json` file

Create a `components.json` file in the root of your project.

```json title="components.json" showLineNumbers
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
```

### That's it

You can now start adding components to your project.


# Next.js
URL: /docs/installation/nextjs

Install and configure shadcn/ui for Next.js.

***

title: Next.js
description: Install and configure shadcn/ui for Next.js.
---------------------------------------------------------

import { Step, Steps } from 'fumadocs-ui/components/steps';

## Install Next Js

### System requirements

* [Node.js 18.18](https://nodejs.org/) or later.
* macOS, Windows (including WSL), and Linux are supported.

### Automatic installation

We recommend starting a new Next.js app using [`create-next-app`](/docs/app/api-reference/cli/create-next-app), which sets up everything automatically for you. To create a project, run:

```bash filename="Terminal"
npx create-next-app@latest
```

On installation, you'll see the following prompts:

```txt filename="Terminal"
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*
```

After the prompts, [`create-next-app`](/docs/app/api-reference/cli/create-next-app) will create a folder with your project name and install the required dependencies.

## Install ShadCN

### For Next Js

<Steps>
  <Step>
    ### Create project

    Run the `init` command to create a new Next.js project or to setup an existing one:

    ```bash
    npx shadcn@latest init
    ```

    <Callout className="mt-4">
      You can use the `-d` flag for defaults i.e `new-york`, `zinc` and `yes` for the css variables.

      ```bash
      npx shadcn@latest init -d
      ```
    </Callout>
  </Step>

  <Step>
    ### Configure components.json
  </Step>

  You will be asked a few questions to configure `components.json`:

  ```txt showLineNumbers
  Which style would you like to use? › New York
  Which color would you like to use as base color? › Zinc
  Do you want to use CSS variables for colors? › no / yes
  ```

  <Step>
    ### That's it
  </Step>

  You can now start adding components to your project.

  ```bash
  npx shadcn@latest add button
  ```

  The command above will add the `Button` component to your project. You can then import it like this:

  ```tsx title="index.tsx"
  import { Button } from '@/components/ui/button';

  export default function Home() {
    return (
      <div>
        <Button>Click me</Button>
      </div>
    );
  }
  ```
</Steps>

## Install Framer Motion

<Steps>
  <Step>Installation</Step>

  ```bash
  npm install motion
  ```

  <Step>Usage</Step>

  ```tsx title="index.tsx"
  import { motion } from "motion/react";

  export default function Home() {
    return (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      >
        Hello World
      </motion.div>
    );
  }
  ```
</Steps>

## Other libraries

<Steps>
  <Step>React Icons</Step>

  ```bash
  npm install react-icons
  ```

  <Step>Usage</Step>

  ```tsx title="index.tsx"
  import { FaSearch } from "react-icons/fa";

  export default function Home() {
    return (
      <div>
        <FaSearch />
      </div>
    );
  }
  ```
</Steps>

<Steps>
  <Step>Canvas Confetti</Step>

  ```bash
  npm install canvas-confetti
  ```

  ```bash
  npm i --save-dev @types/canvas-confetti
  ```

  <Step>Usage</Step>

  ```tsx title="index.tsx"
  import { useEffect } from "react";
  import confetti from "canvas-confetti";

  export default function Home() {
    useEffect(() => {
      confetti();
    }, []);

    return <div>Hello World</div>;
  }
  ```
</Steps>


# React Router
URL: /docs/installation/react-router

Install and configure shadcn/ui for React Router.

***

title: React Router
description: Install and configure shadcn/ui for React Router.
--------------------------------------------------------------

import { Callout } from "fumadocs-ui/components/callout";

### Create project

```bash
npx create-react-router@latest my-app
```

### Run the CLI

Run the `shadcn` init command to setup your project:

```bash
npx shadcn@latest init
```

### Add Components

You can now start adding components to your project.

```bash
npx shadcn@latest add button
```

The command above will add the `Button` component to your project. You can then import it like this:

```tsx showLineNumbers title="app/routes/home.tsx"
import { Button } from "~/components/ui/button"

import type { Route } from "./+types/home"

export function meta({}: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ]
}

export default function Home() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}
```


# Remix
URL: /docs/installation/remix

Install and configure shadcn/ui for Remix.

***

title: Remix
description: Install and configure shadcn/ui for Remix.
-------------------------------------------------------

import { Callout } from "fumadocs-ui/components/callout";

<Callout>
  **Note:** This guide is for Remix. For React Router, see the [React Router](/docs/installation/react-router) guide.
</Callout>

### Create project

Start by creating a new Remix project using `create-remix`:

```bash
npx create-remix@latest my-app
```

### Run the CLI

Run the `shadcn` init command to setup your project:

```bash
npx shadcn@latest init
```

### Configure components.json

You will be asked a few questions to configure `components.json`:

```bash
Which color would you like to use as base color? › Neutral
```

### App structure

<Callout>
  **Note**: This app structure is only a suggestion. You can place the files wherever you want.
</Callout>

* Place the UI components in the `app/components/ui` folder.
* Your own components can be placed in the `app/components` folder.
* The `app/lib` folder contains all the utility functions. We have a `utils.ts` where we define the `cn` helper.
* The `app/tailwind.css` file contains the global CSS.

### Install Tailwind CSS

```bash
npm install -D tailwindcss@latest autoprefixer@latest
```

Then we create a `postcss.config.js` file:

```js title="postcss.config.js" showLineNumbers
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

And finally we add the following to our `remix.config.js` file:

```js title="remix.config.js" {4-5} showLineNumbers
/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ...
  tailwind: true,
  postcss: true,
  ...
};
```

### Add `tailwind.css` to your app

In your `app/root.tsx` file, import the `tailwind.css` file:

```js {1, 4} showLineNumbers title="app/root.tsx"
import styles from "./tailwind.css?url"

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
]
```

### That's it

You can now start adding components to your project.

```bash
npx shadcn@latest add button
```

The command above will add the `Button` component to your project. You can then import it like this:

```tsx {1,6} showLineNumbers title="app/routes/index.tsx"
import { Button } from "~/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```


# TanStack Router
URL: /docs/installation/tanstack-router

Install and configure shadcn/ui for TanStack Router.

***

title: TanStack Router
description: Install and configure shadcn/ui for TanStack Router.
-----------------------------------------------------------------

import { Callout } from "fumadocs-ui/components/callout";

### Create project

Start by creating a new TanStack Router project:

```bash
npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn
```

### Add Components

You can now start adding components to your project.

```bash
npx shadcn@canary add button
```

The command above will add the `Button` component to your project. You can then import it like this:

```tsx title="src/routes/index.tsx" showLineNumbers {3,12}
import { createFileRoute } from "@tanstack/react-router"

import { Button } from "@/components/ui/button"

export const Route = createFileRoute("/")({
  component: App,
})

function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```


# TanStack Start
URL: /docs/installation/tanstack

Install and configure shadcn/ui for TanStack Start.

***

title: TanStack Start
description: Install and configure shadcn/ui for TanStack Start.
----------------------------------------------------------------

import { Callout } from "fumadocs-ui/components/callout";

### Create project

Start by creating a new TanStack Start project by following the [Build a Project from Scratch](https://tanstack.com/start/latest/docs/framework/react/build-from-scratch) guide on the TanStack Start website.

**Do not add Tailwind yet. We'll install Tailwind v4 in the next step.**

### Add Tailwind

Install `tailwindcss` and its dependencies.

```bash
npm install tailwindcss @tailwindcss/postcss postcss
```

### Create postcss.config.ts

Create a `postcss.config.ts` file at the root of your project.

```ts title="postcss.config.ts" showLineNumbers
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}
```

### Create `app/styles/app.css`

Create an `app.css` file in the `app/styles` directory and import `tailwindcss`

```css title="app/styles/app.css"
@import "tailwindcss" source("../");
```

### Import `app.css`

```tsx title="app/routes/__root.tsx" showLineNumbers {5,21-26} showLineNumbers
import type { ReactNode } from "react"
import { createRootRoute, Outlet } from "@tanstack/react-router"
import { Meta, Scripts } from "@tanstack/start"

import appCss from "@/styles/app.css?url"

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        title: "TanStack Start Starter",
      },
    ],
    links: [
      {
        rel: "stylesheet",
        href: appCss,
      },
    ],
  }),
  component: RootComponent,
})
```

### Edit tsconfig.json file

Add the following code to the `tsconfig.json` file to resolve paths.

```ts title="tsconfig.json" showLineNumbers {9-12}
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./app/*"]
    }
  }
}
```

### Run the CLI

Run the `shadcn` init command to setup your project:

```bash
npx shadcn@canary init
```

This will create a `components.json` file in the root of your project and configure CSS variables inside `app/styles/app.css`.

### That's it

You can now start adding components to your project.

```bash
npx shadcn@canary add button
```

The command above will add the `Button` component to your project. You can then import it like this:

```tsx title="app/routes/index.tsx" showLineNumbers {1,6}
import { Button } from "@/components/ui/button"

function Home() {
  const router = useRouter()
  const state = Route.useLoaderData()

  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```


# Vite
URL: /docs/installation/vite

Install and configure shadcn/ui for Vite.

***

title: Vite
description: Install and configure shadcn/ui for Vite.
------------------------------------------------------

import { Callout } from "fumadocs-ui/components/callout";

### Create project

Start by creating a new React project using `vite`. Select the **React + TypeScript** template:

```bash
npm create vite@latest
```

### Add Tailwind CSS

```bash
npm install tailwindcss@3.4.1 @tailwindcss/vite
```

Replace everything in `src/index.css` with the following:

```css title="src/index.css"
@import "tailwindcss";
```

### Edit tsconfig.json file

The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.
Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json` and
`tsconfig.app.json` files:

```ts title="tsconfig.json" {11-16} showLineNumbers
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

### Edit tsconfig.app.json file

Add the following code to the `tsconfig.app.json` file to resolve paths, for your IDE:

```ts title="tsconfig.app.json" {4-9} showLineNumbers
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}
```

### Update vite.config.ts

Add the following code to the vite.config.ts so your app can resolve paths without error:

```bash
npm install -D @types/node
```

```typescript title="vite.config.ts" showLineNumbers {1,2,8-13}
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})
```

### Run the CLI

Run the `shadcn` init command to setup your project:

```bash
npx shadcn@latest init
```

You will be asked a few questions to configure `components.json`.

```txt
Which color would you like to use as base color? › Neutral
```

### Add Components

You can now start adding components to your project.

```bash
npx shadcn@latest add button
```

The command above will add the `Button` component to your project. You can then import it like this:

```tsx showLineNumbers title="src/App.tsx"
import { Button } from "@/components/ui/button"

function App() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}

export default App
```


# About
URL: /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.

***

title: About
description: 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.
root: mainsections
updated: true
-------------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { ComponentSource } from "@/components/preview/component-source";

## About Us 1

<ComponentPreview name="about-us-1" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('about-us-1')).code} lang="tsx" fromDocs={true} />

### Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion 
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion 
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion 
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Spotlight

    <ComponentSource code={(await extractSourceCode('spotlight')).code} className="bg-fd-secondary/50" />
  </Step>

  <Step>
    #### Pulse Card

    <ComponentSource code={(await extractSourceCode('pulse-card')).code} className="bg-fd-secondary/50" />
  </Step>

  <Step>
    #### Add this animation to your CSS file

    ```css
    .spin {
      animation: spin 5s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
    ```
  </Step>

  <Step>
    #### Border Beam

    <ComponentSource code={(await extractSourceCode('border-beam')).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## About Us 2

<ComponentPreview name="about-us-2" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('about-us-2')).code} lang="tsx" fromDocs={true} />

### Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion lucide-react next-themes
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion lucide-react next-themes
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion lucide-react next-themes
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion lucide-react next-themes
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Border Beam

    <ComponentSource code={(await extractSourceCode('border-beam')).code} className="bg-fd-secondary/50" />
  </Step>

  <Step>
    #### Counter

    <ComponentSource code={(await extractSourceCode('counter')).code} className="bg-fd-secondary/50" />
  </Step>

  <Step>
    #### Spotlight

    <ComponentSource code={(await extractSourceCode('spotlight')).code} className="bg-fd-secondary/50" />
  </Step>

  <Step>
    #### Utils

    <ComponentSource code={(await extractSourceCode('utils')).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>


# Contact
URL: /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.

***

title: Contact
description: 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.
root: mainsections
new: true
---------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## Contact Us 1

<ComponentPreview name="contact-us-1" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('contact-us-1')).code} lang="tsx" />

## Contact Us 2

<ComponentPreview name="contact-us-2" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('contact-us-2')).code} lang="tsx" fromDocs={true} />


# CTA
URL: /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.

***

title: CTA
description: 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.
root: mainsections
------------------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## CTA 1

<ComponentPreview name="cta-1" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('cta-1')).code} lang="tsx" fromDocs={true} />

## CTA 2

<ComponentPreview name="cta-2" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('cta-2')).code} lang="tsx" fromDocs={true} />

## CTA 3

<ComponentPreview name="cta-3" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('cta-3')).code} lang="tsx" fromDocs={true} />


# FAQs
URL: /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.

***

title: FAQs
description: 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.
root: mainsections
------------------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## FAQ 1

<ComponentPreview name="faq-1" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('faq-1')).code} lang="tsx" fromDocs={true} />

## FAQ 2

<ComponentPreview name="faq-2" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('faq-2')).code} lang="tsx" fromDocs={true} />

## FAQ 3

<ComponentPreview name="faq-3" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('faq-3')).code} lang="tsx" fromDocs={true} />

## FAQ 4

<ComponentPreview name="faq-4" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('faq-4')).code} lang="tsx" fromDocs={true} />


# Features
URL: /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.

***

title: Features
description: 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.
root: mainsections
------------------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## Grid Features

<ComponentPreview name="feature-1" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('feature-1')).code} lang="tsx" fromDocs={true} />

## Steps Animated

<ComponentPreview name="feature-2" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('feature-2')).code} lang="tsx" fromDocs={true} />

## Circulated Features

<ComponentPreview name="feature-3" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('feature-3')).code} lang="tsx" fromDocs={true} />


# Hero
URL: /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.

***

title: Hero
description: 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.
root: mainsections
------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";

## App Hero

<ComponentPreview name="app-hero" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("app-hero")).code} lang="tsx" fromDocs={true} />

## Spline Hero

<ComponentPreview name="3dglobe" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("3dglobe")).code} lang="tsx" fromDocs={true} />

> Apply the below CSS for the above hero:

```css
.neumorphic-button::after {
  content: '';
  @apply absolute inset-0 opacity-0 transition-opacity duration-300 bg-gradient-to-br from-[#9b87f5]/20 to-transparent rounded-full;
}
  
.neumorphic-button:hover::after {
  @apply opacity-100;
}
```

## Notebook Hero

<ComponentPreview name="notebook" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("notebook")).code} lang="tsx" fromDocs={true} />

> Apply the below CSS for the above hero:

```css
@keyframes moveGradientLeft {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: -200% 0%;
  }
}

.animate-gradient-x {
  animation: moveGradientLeft 20s linear infinite;
}
```

## Minimal Hero

<ComponentPreview name="minimal-hero" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("minimal-hero")).code} lang="tsx" fromDocs={true} />

> Apply the below CSS for the above hero:

```css
@keyframes word-appear {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
    filter: blur(10px);
  }

  50% {
    opacity: 0.8;
    transform: translateY(10px) scale(0.95);
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes grid-draw {
  0% {
    stroke-dashoffset: 1000;
    opacity: 0;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0.15;
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    opacity: 0.1;
    transform: scale(1);
  }

  50% {
    opacity: 0.3;
    transform: scale(1.1);
  }
}

.word {
  display: inline-block;
  opacity: 0;
  margin: 0 0.1em;
  transition: all 0.3s ease;
}

.word:hover {
  color: #c8b4a0;
  transform: translateY(-2px);
}

.grid-line {
  stroke: #c8b4a0;
  stroke-width: 0.5;
  opacity: 0;
  stroke-dasharray: 5 5;
  stroke-dashoffset: 1000;
  animation: grid-draw 2s ease-out forwards;
}

.detail-dot {
  fill: #c8b4a0;
  opacity: 0;
  animation: pulse-glow 3s ease-in-out infinite;
}

.corner-element {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(200, 180, 160, 0.2);
  opacity: 0;
  animation: word-appear 1s ease-out forwards;
}

.corner-element::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(200, 180, 160, 0.3);
  border-radius: 50%;
}

.text-decoration {
  position: relative;
}

.text-decoration::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c8b4a0, transparent);
  animation: underline-grow 2s ease-out forwards;
  animation-delay: 2s;
}

@keyframes underline-grow {
  to {
    width: 100%;
  }
}

.floating-element {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #c8b4a0;
  border-radius: 50%;
  opacity: 0;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.2;
  }

  25% {
    transform: translateY(-10px) translateX(5px);
    opacity: 0.6;
  }

  50% {
    transform: translateY(-5px) translateX(-3px);
    opacity: 0.4;
  }

  75% {
    transform: translateY(-15px) translateX(7px);
    opacity: 0.8;
  }
}
```

## Geometric Hero

<ComponentPreview name="geometric-hero" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("geometric-hero")).code} lang="tsx" fromDocs={true} />

## Lucy Hero

<ComponentPreview name="mockup-hero" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("mockup-hero")).code} lang="tsx" fromDocs={true} />

## Trading Hero

<ComponentPreview name="trading" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("trading")).code} lang="tsx" fromDocs={true} />

## Dark modern hero

<ComponentPreview name="hero-1" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("hero-1")).code} lang="tsx" fromDocs={true} />

## Fitness Hero

<ComponentPreview name="fitness-hero" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("fitness-hero")).code} lang="tsx" fromDocs={true} />

## Gradient Hero

<ComponentPreview name="gradient-hero" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("gradient-hero")).code} lang="tsx" fromDocs={true} />


# Pricing
URL: /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.

***

title: Pricing
description: 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.
root: mainsections
updated: true
-------------

import { ComponentPreview } from '@/components/preview/component-preview';
import { extractSourceCode } from '@/lib/code';

## Simple Pricing

<ComponentPreview name="simple-pricing" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('simple-pricing')).code} lang="tsx" fromDocs={true} />

## Designer Pricing

<ComponentPreview name="designer-pricing" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('designer-pricing')).code} lang="tsx" fromDocs={true} />

## Congested Pricing

<ComponentPreview name="congusted-pricing" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('congusted-pricing')).code} lang="tsx" fromDocs={true} />

## Pricing with Modals

<ComponentPreview name="pricing-with-modals" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('pricing-with-modals')).code} lang="tsx" fromDocs={true} />

## 4 pricing tiers

<ComponentPreview name="pricing-5" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('pricing-5')).code} lang="tsx" fromDocs={true} />

## Modern Pricing

<ComponentPreview name="pricing-2" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('pricing-2')).code} lang="tsx" fromDocs={true} />

## Basic Pricing

<ComponentPreview name="pricing-3" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('pricing-3')).code} lang="tsx" fromDocs={true} />

## Beautiful Pricing

<ComponentPreview name="pricing-4" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('pricing-4')).code} lang="tsx" fromDocs={true} />

## Glassmorphism Pricing

<ComponentPreview name="pricing-glassmorphism" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('pricing-glassmorphism')).code} lang="tsx" fromDocs={true} />


# Team
URL: /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.

***

title: Team
description: Team sections provide information about the people behind your product or service. They can include details about team members, their roles, and their expertise.
root: mainsections
updated: true
-------------

import { ComponentPreview } from '@/components/preview/component-preview';
import { extractSourceCode } from '@/lib/code';

## Detailed Team

<ComponentPreview name="team-1" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('team-1')).code} lang="tsx" />

## Filterable Team

<ComponentPreview name="team-4" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('team-3')).code} lang="tsx" fromDocs={true} />

## Custom social team

<ComponentPreview name="team-2" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('team-2')).code} lang="tsx" fromDocs={true} />

## Designer Team Section

<ComponentPreview name="team-8" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('team-8')).code} lang="tsx" fromDocs={true} />

## Member Role Teams

<ComponentPreview name="team-3" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('team-3')).code} lang="tsx" fromDocs={true} />

## Basic Static Team

<ComponentPreview name="team-5" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('team-5')).code} lang="tsx" fromDocs={true} />

## Modern Member Team

<ComponentPreview name="team-7" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('team-7')).code} lang="tsx" fromDocs={true} />

## Team Carousel With Roles

<ComponentPreview name="team-10" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('team-10')).code} lang="tsx" fromDocs={true} />

## Professional Team Section

<ComponentPreview name="team-6" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('team-6')).code} lang="tsx" fromDocs={true} />

## Unique Team Section With Roles

<ComponentPreview name="team-9" classNameComponentContainer="min-h-[600px]" code={(await extractSourceCode('team-9')).code} lang="tsx" fromDocs={true} />


# Testimonials
URL: /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.

***

title: Testimonials
description: 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.
root: mainsections
------------------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Testimonials Marquee

<ComponentPreview name="testimonials-marquee" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('testimonials-marquee')).code} lang="tsx" fromDocs={true} />

### Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion lucide-react
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion lucide-react
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion lucide-react
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion lucide-react
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    `components/ui/marquee.tsx`

    ```tsx title="marquee.tsx"
    import { cn } from "@/lib/utils";
    import { ComponentPropsWithoutRef } from "react";

    interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
      /**
       * Optional CSS class name to apply custom styles
       */
      className?: string;
      /**
       * Whether to reverse the animation direction
       * @default false
       */
      reverse?: boolean;
      /**
       * Whether to pause the animation on hover
       * @default false
       */
      pauseOnHover?: boolean;
      /**
       * Content to be displayed in the marquee
       */
      children: React.ReactNode;
      /**
       * Whether to animate vertically instead of horizontally
       * @default false
       */
      vertical?: boolean;
      /**
       * Number of times to repeat the content
       * @default 4
       */
      repeat?: number;
    }

    export function Marquee({
      className,
      reverse = false,
      pauseOnHover = false,
      children,
      vertical = false,
      repeat = 4,
      ...props
    }: MarqueeProps) {
      return (
        <div
          {...props}
          className={cn(
            "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
            {
              "flex-row": !vertical,
              "flex-col": vertical,
            },
            className,
          )}
        >
          {Array(repeat)
            .fill(0)
            .map((_, i) => (
              <div
                key={i}
                className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
                  "animate-marquee flex-row": !vertical,
                  "animate-marquee-vertical flex-col": vertical,
                  "group-hover:[animation-play-state:paused]": pauseOnHover,
                  "[animation-direction:reverse]": reverse,
                })}
              >
                {children}
              </div>
            ))}
        </div>
      );
    }
    ```
  </Step>

  <Step>
    #### Update the import paths to match your project setup.
  </Step>

  <Step>
    #### Update `tailwind.config.ts`

    ```ts
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      theme: {
        extend: {
          animation: {
            marquee: "marquee var(--duration) linear infinite", // [!code highlight]
            "marquee-vertical": "marquee-vertical var(--duration) linear infinite", // [!code highlight]
          }, // [!code highlight]
          keyframes: { // [!code highlight]
            marquee: { // [!code highlight]
              from: { transform: "translateX(0)" }, // [!code highlight]
              to: { transform: "translateX(calc(-100% - var(--gap)))" }, // [!code highlight]
            }, // [!code highlight]
            "marquee-vertical": { // [!code highlight]
              from: { transform: "translateY(0)" }, // [!code highlight]
              to: { transform: "translateY(calc(-100% - var(--gap)))" }, // [!code highlight]
            }, // [!code highlight]
          }, // [!code highlight]
        },
      },
    };
    ```
  </Step>
</Steps>

### Props

#### Highlight Props

<TypeTable
  type={{
  children: {
    description: "The content to be highlighted.",
    type: "React.ReactNode",
    default: "undefined",
  },
  className: {
    description: "Optional CSS class for customizing the style and appearance of the highlight.",
    type: "string",
    default: "undefined",
  },
}}
/>

#### TestimonialCard Props

<TypeTable
  type={{
  name: {
    description: "The name of the testimonial author.",
    type: "string",
    default: "undefined",
  },
  role: {
    description: "The role or occupation of the testimonial author.",
    type: "string",
    default: "undefined",
  },
  img: {
    description: "The URL or path to the image of the testimonial author.",
    type: "string",
    default: "undefined",
  },
  description: {
    description: "The testimonial text or content.",
    type: "React.ReactNode",
    default: "undefined",
  },
  className: {
    description: "Optional CSS class for customizing the style and appearance of the testimonial card.",
    type: "string",
    default: "undefined",
  },
}}
/>

## Testimonials Carousel

<ComponentPreview name="testimonials-carousel" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('testimonials-carousel')).code} lang="tsx" fromDocs={true} />


# Waitlist
URL: /docs/pages/waitlist

These pages are used to collect user emails for a waitlist.

***

title: Waitlist
description: These pages are used to collect user emails for a waitlist.
root: pages
new: true
---------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

<ComponentPreview name="waitlist" classNameComponentContainer="h-[600px]" code={(await extractSourceCode('waitlist')).code} lang="tsx" fromDocs={true} />


# Preloaders
URL: /docs/preloaders/preloader-1

A collection of preloaders for smooth page transitions

***

title: Preloaders
description: A collection of preloaders for smooth page transitions
-------------------------------------------------------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";

## Preloader 1

<ComponentPreview name="preloader-1" classNameComponentContainer="h-[400px] bg-black flex items-center justify-center p-0 rounded-none" code={(await extractSourceCode('preloader-1')).code} lang="tsx" />


# Footers
URL: /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.

***

title: Footers
description: 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.
root: required
--------------

import { ComponentPreview } from '@/components/preview/component-preview';
import { extractSourceCode } from '@/lib/code';
import { ComponentSource } from '@/components/preview/component-source';
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import { Step, Steps } from 'fumadocs-ui/components/steps';

## 4 Column Footer

<ComponentPreview name="footer-4col" classNameComponentContainer="h-[400px]" code={(await extractSourceCode('footer-4col')).code} lang="tsx" fromDocs={true} />

## Glowing Footer

<ComponentPreview name="footer-glow" classNameComponentContainer="h-[400px]" code={(await extractSourceCode('footer-glow')).code} lang="tsx" fromDocs={true} />

## Footer with Newsletter

<ComponentPreview name="footer-newsletter" classNameComponentContainer="h-[400px]" code={(await extractSourceCode('footer-newsletter')).code} lang="tsx" />

## Animated Footer

<ComponentPreview name="footer-animated" classNameComponentContainer="h-[300px]" code={(await extractSourceCode('footer-animated')).code} lang="tsx" />

## Standard Footer

<ComponentPreview name="footer-standard" classNameComponentContainer="h-[400px]" code={(await extractSourceCode('footer-standard')).code} lang="tsx" />


# Headers
URL: /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.

***

title: Headers
description: 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.
root: required
--------------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## Header 1

<ComponentPreview name="header-1" classNameComponentContainer="h-[600px] relative" code={(await extractSourceCode('header-1')).code} lang="tsx" fromDocs={true} />

## Header 2

<ComponentPreview name="header-2" classNameComponentContainer="h-[600px] relative" code={(await extractSourceCode('header-2')).code} lang="tsx" fromDocs={true} />


# Logo Cloud
URL: /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.

***

title: Logo Cloud
description: 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.
root: required
--------------

import {ComponentPreview} from "@/components/preview/component-preview";
import {extractSourceCode} from "@/lib/code";

## Sparkles Logo Cloud

<ComponentPreview name="sparkles-logo" classNameComponentContainer="h-[600px]" code={(await extractSourceCode("sparkles-logo")).code} lang="tsx" fromDocs={true} />


# Blur In Text
URL: /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.

***

title: Blur In Text
description: Text emerges from a soft blur into crystal clarity. Perfect for hero headlines and section reveals that demand attention with an elegant, cinematic feel.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Letter by Letter

Each letter emerges from blur individually for a dramatic effect.

<ComponentPreview name="blur-in-text-demo" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("blur-in-text-demo")).code} lang="tsx" hasReTrigger={true} />

## Word by Word

Words reveal one at a time for a more readable, impactful entrance.

<ComponentPreview name="blur-in-text-word" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("blur-in-text-word")).code} lang="tsx" hasReTrigger={true} />

## Scroll Triggered

Animation triggers when the text scrolls into view.

<ComponentPreview name="blur-in-text-inview" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("blur-in-text-inview")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    <ComponentSource code={(await extractSourceCode("blur-in-text")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  text: {
    description: "The text to animate.",
    type: "string",
    default: "required",
  },
  blurAmount: {
    description: "Initial blur amount in pixels.",
    type: "number",
    default: "10",
  },
  duration: {
    description: "Animation duration per element in seconds.",
    type: "number",
    default: "0.8",
  },
  delay: {
    description: "Initial delay before animation starts.",
    type: "number",
    default: "0",
  },
  stagger: {
    description: "Delay between each element animating.",
    type: "number",
    default: "0.05",
  },
  direction: {
    description: "Animate blur in or out.",
    type: "'in' | 'out'",
    default: "'in'",
  },
  split: {
    description: "How to split the text for animation.",
    type: "'letter' | 'word' | 'none'",
    default: "'letter'",
  },
  trigger: {
    description: "When to trigger the animation.",
    type: "'mount' | 'inView' | 'hover'",
    default: "'mount'",
  },
  yOffset: {
    description: "Vertical offset during animation.",
    type: "number",
    default: "20",
  },
  className: {
    description: "Additional CSS classes.",
    type: "string",
    default: "''",
  },
}}
/>

## Examples

```tsx
// Dramatic blur with slow reveal
<BlurInText
  text="Welcome"
  blurAmount={20}
  duration={1.5}
  stagger={0.1}
/>

// Quick word reveal
<BlurInText
  text="Fast and Clean"
  split="word"
  duration={0.5}
  stagger={0.2}
/>

// Blur out effect
<BlurInText
  text="Goodbye"
  direction="out"
  trigger="hover"
/>
```


# Circular Text
URL: /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.

***

title: Circular Text
description: 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.
root: text-animations

***

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

<ComponentPreview name="circular-text" classNameComponentContainer="h-[400px]" code={(await extractSourceCode("circular-text")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    <ComponentSource code={(await extractSourceCode("circular-text")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Usage

```tsx
import { CircularText } from "@/components/mvpblocks/text-animations/circular-text";

export default function MyComponent() {
  return (
    <div className="flex items-center justify-center h-screen">
      <CircularText
        text="Circular Text Animation • "
        spinDuration={20}
        onHover="speedUp"
        className="text-white"
      />
    </div>
  );
}
```

## Pro

<TypeTable
  type={{
  text: {
    type: "string",
    description: "The text to display in circular format."
  },
  spinDuration: {
    type: "number",
    description: "Duration of one complete rotation in seconds.",
    default: "20"
  },
  onHover: {
    type: '"slowDown" | "speedUp" | "pause" | "goBonkers"',
    description: "Animation behavior on hover.",
    default: '"speedUp"'
  },
  className: {
    type: "string",
    description: "Additional CSS classes for styling."
  }
}}
/>

## Features

* 🎯 **Smooth Animation**: Continuous rotation with customizable speed
* 🎨 **Hover Effects**: Multiple hover behaviors (slowDown, speedUp, pause, goBonkers)
* 🎪 **Customizable**: Easy to style with CSS classes
* 📱 **Responsive**: Works well on different screen sizes
* ⚡ **Performance**: Optimized with framer-motion

## Examples

### Speed Up on Hover

```tsx
<CircularText
  text="Speed Up Effect • "
  spinDuration={15}
  onHover="speedUp"
/>
```

### Pause on Hover

```tsx
<CircularText
  text="Pause on Hover • "
  spinDuration={25}
  onHover="pause"
/>
```

### Go Bonkers on Hover

```tsx
<CircularText
  text="Go Bonkers! • "
  spinDuration={30}
  onHover="goBonkers"
/>
```


# Fade In Up Text
URL: /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.

***

title: Fade In Up Text
description: Elegant text entrance animation that fades in while floating from any direction. Perfect for hero headlines, section titles, and page transitions.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Word by Word

Words fade in and float upward one at a time.

<ComponentPreview name="fade-in-up-demo" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("fade-in-up-demo")).code} lang="tsx" hasReTrigger={true} />

## Letter by Letter

Each letter animates individually for a more dramatic effect.

<ComponentPreview name="fade-in-up-letter" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("fade-in-up-letter")).code} lang="tsx" hasReTrigger={true} />

## Slide from Side

Text slides in from the right with word staggering.

<ComponentPreview name="fade-in-up-left" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("fade-in-up-left")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    <ComponentSource code={(await extractSourceCode("fade-in-up-text")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  text: {
    description: "The text to animate.",
    type: "string",
    default: "required",
  },
  duration: {
    description: "Animation duration per element in seconds.",
    type: "number",
    default: "0.5",
  },
  delay: {
    description: "Initial delay before animation starts.",
    type: "number",
    default: "0",
  },
  stagger: {
    description: "Delay between each element animating.",
    type: "number",
    default: "0.03",
  },
  distance: {
    description: "Distance to travel in pixels.",
    type: "number",
    default: "30",
  },
  direction: {
    description: "Direction of the animation.",
    type: "'up' | 'down' | 'left' | 'right'",
    default: "'up'",
  },
  split: {
    description: "How to split the text for animation.",
    type: "'letter' | 'word' | 'none'",
    default: "'word'",
  },
  trigger: {
    description: "When to trigger the animation.",
    type: "'mount' | 'inView'",
    default: "'mount'",
  },
  once: {
    description: "Only animate once when in view.",
    type: "boolean",
    default: "true",
  },
  className: {
    description: "Additional CSS classes.",
    type: "string",
    default: "''",
  },
}}
/>

## Examples

```tsx
// Classic fade up
<FadeInUpText
  text="Welcome to our site"
  direction="up"
  split="word"
/>

// Dramatic letter animation
<FadeInUpText
  text="HELLO"
  split="letter"
  stagger={0.1}
  distance={50}
/>

// Slide from left
<FadeInUpText
  text="Sliding In"
  direction="right"
  duration={0.8}
/>

// Scroll triggered
<FadeInUpText
  text="Scroll to reveal"
  trigger="inView"
  distance={40}
/>
```


# Fuzzy Text
URL: /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.

***

title: Fuzzy Text
description: CRT television static noise effect with chromatic aberration, scanlines, and jitter. Text appears fuzzy with VHS/old TV static look, clearing on hover.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Classic Fuzzy Static

Text with continuous noise/static effect that clears on hover.

<ComponentPreview name="fuzzy-text-demo" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("fuzzy-text-demo")).code} lang="tsx" hasReTrigger={true} />

## Hover to Clear

Green terminal style - hover to clear the static and reveal clean text.

<ComponentPreview name="fuzzy-text-hover" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("fuzzy-text-hover")).code} lang="tsx" hasReTrigger={true} />

## 404 Error Style

High intensity noise that never clears - perfect for error pages.

<ComponentPreview name="fuzzy-text-fast" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("fuzzy-text-fast")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    <ComponentSource code={(await extractSourceCode("fuzzy-text")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  text: {
    description: "The text to display with fuzzy effect.",
    type: "string",
    default: "required",
  },
  fontSize: {
    description: "Font size of the text.",
    type: "string",
    default: "'4rem'",
  },
  noiseIntensity: {
    description: "Intensity of the noise effect (0-2).",
    type: "number",
    default: "1",
  },
  enableHover: {
    description: "Whether hovering clears the noise effect.",
    type: "boolean",
    default: "true",
  },
  baseColor: {
    description: "Base color of the text.",
    type: "string",
    default: "'#fff'",
  },
  glowColor: {
    description: "Color of the glow effect.",
    type: "string",
    default: "'#fff'",
  },
  speed: {
    description: "Speed of noise update in milliseconds.",
    type: "number",
    default: "50",
  },
  className: {
    description: "Additional CSS classes.",
    type: "string",
    default: "''",
  },
}}
/>

## Examples

```tsx
// White text on black background
<FuzzyText
  text="STATIC NOISE"
  baseColor="#ffffff"
  glowColor="#ffffff"
  enableHover={true}
/>

// Green terminal style
<FuzzyText
  text="ACCESS DENIED"
  baseColor="#00ff00"
  glowColor="#00ff00"
  noiseIntensity={1.2}
/>

// Red error/warning
<FuzzyText
  text="404 NOT FOUND"
  baseColor="#ff0040"
  glowColor="#ff0040"
  enableHover={false}
/>

// Subtle effect
<FuzzyText
  text="Subtle Glitch"
  noiseIntensity={0.5}
  speed={80}
/>

// Fast intense noise
<FuzzyText
  text="CHAOS"
  noiseIntensity={2}
  speed={20}
/>
```


# Glitch Text
URL: /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.

***

title: Glitch Text
description: Cyberpunk-style glitch effect with RGB color splitting, position jittering, and scanlines. Perfect for gaming, tech, and edgy brand aesthetics.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Continuous Glitch

Periodic glitch effect that fires at regular intervals.

<ComponentPreview name="glitch-text-demo" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("glitch-text-demo")).code} lang="tsx" hasReTrigger={true} />

## Hover Activated

Intense glitch effect that triggers on hover.

<ComponentPreview name="glitch-text-hover" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("glitch-text-hover")).code} lang="tsx" hasReTrigger={true} />

## Subtle Glitch

Softer, more refined glitch for professional designs.

<ComponentPreview name="glitch-text-subtle" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("glitch-text-subtle")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    <ComponentSource code={(await extractSourceCode("glitch-text")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  text: {
    description: "The text to animate.",
    type: "string",
    default: "required",
  },
  intensity: {
    description: "Glitch displacement amount in pixels.",
    type: "number",
    default: "5",
  },
  colors: {
    description: "RGB split colors [left, right].",
    type: "[string, string]",
    default: "['#ff0000', '#00ffff']",
  },
  duration: {
    description: "Duration of each glitch burst in seconds.",
    type: "number",
    default: "0.2",
  },
  glitchInterval: {
    description: "Time between glitches in milliseconds.",
    type: "number",
    default: "3000",
  },
  trigger: {
    description: "When to trigger the animation.",
    type: "'mount' | 'hover' | 'inView' | 'continuous'",
    default: "'continuous'",
  },
  className: {
    description: "Additional CSS classes.",
    type: "string",
    default: "''",
  },
}}
/>

## Examples

```tsx
// Intense cyberpunk glitch
<GlitchText
  text="CYBERPUNK"
  intensity={10}
  colors={['#ff0000', '#00ffff']}
  glitchInterval={1500}
/>

// Vaporwave aesthetic
<GlitchText
  text="AESTHETIC"
  colors={['#ff71ce', '#01cdfe']}
  intensity={6}
/>

// Gaming style
<GlitchText
  text="GAME OVER"
  trigger="hover"
  intensity={8}
  duration={0.5}
/>
```


# Gradient Flow Text
URL: /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.

***

title: Gradient Flow Text
description: Mesmerizing animated gradient that flows through text like liquid colors. Perfect for eye-catching headlines, brand names, and call-to-action elements.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Continuous Flow

Smooth, endless gradient animation that draws the eye.

<ComponentPreview name="gradient-flow-demo" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("gradient-flow-demo")).code} lang="tsx" hasReTrigger={true} />

## Hover Activated

Gradient starts flowing when user hovers over the text.

<ComponentPreview name="gradient-flow-hover" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("gradient-flow-hover")).code} lang="tsx" hasReTrigger={true} />

## Rainbow Spectrum

Full rainbow color cycle for maximum visual impact.

<ComponentPreview name="gradient-flow-rainbow" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("gradient-flow-rainbow")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    <ComponentSource code={(await extractSourceCode("gradient-flow-text")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  text: {
    description: "The text to display with gradient effect.",
    type: "string",
    default: "required",
  },
  colors: {
    description: "Array of colors for the gradient. Repeat first color at end for seamless loop.",
    type: "string[]",
    default: "['#ff0080', '#7928ca', '#ff0080']",
  },
  speed: {
    description: "Animation cycle duration in seconds.",
    type: "number",
    default: "3",
  },
  angle: {
    description: "Gradient angle in degrees.",
    type: "number",
    default: "90",
  },
  trigger: {
    description: "When to trigger the animation.",
    type: "'continuous' | 'hover' | 'inView'",
    default: "'continuous'",
  },
  className: {
    description: "Additional CSS classes.",
    type: "string",
    default: "''",
  },
}}
/>

## Examples

```tsx
// Brand colors
<GradientFlowText
  text="Company Name"
  colors={['#0066cc', '#00ccff', '#0066cc']}
  speed={4}
/>

// Sunset gradient
<GradientFlowText
  text="Sunset Vibes"
  colors={['#ff512f', '#f09819', '#ff512f']}
  angle={45}
/>

// Neon party
<GradientFlowText
  text="PARTY"
  colors={['#ff00ff', '#00ffff', '#ffff00', '#ff00ff']}
  speed={2}
/>

// Subtle professional
<GradientFlowText
  text="Enterprise"
  colors={['#1a1a2e', '#16213e', '#1a1a2e']}
  speed={6}
  trigger="hover"
/>
```


# Text Animations
URL: /docs/text-animations

Explore a variety of engaging text animations to enhance your web projects. From fuzzy static effects

***

title: Text Animations
description: Explore a variety of engaging text animations to enhance your web projects. From fuzzy static effects
full: true
new: true
---------

import SpotlightCard from "@/components/ui/spotlight-cards";

<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4">
  <SpotlightCard title="Blur in Text" href="/docs/text-animations/blur-in-text" />

  <SpotlightCard title="Circular Text" href="/docs/text-animations/circular-text" />

  <SpotlightCard title="Fuzzy Text" href="/docs/text-animations/fuzzy-text" />

  <SpotlightCard title="Glitch Text" href="/docs/text-animations/glitch-text" />

  <SpotlightCard title="Gradient Flow Text" href="/docs/text-animations/gradient-flow-text" />

  <SpotlightCard title="Random Unveil" href="/docs/text-animations/randomunveil" />

  <SpotlightCard title="Scroll Reveal" href="/docs/text-animations/scroll-reveal-text" />

  <SpotlightCard title="Scroll Velocity" href="/docs/text-animations/scroll-velocity" />

  <SpotlightCard title="Shiny Text" href="/docs/text-animations/shiny-text" />

  <SpotlightCard title="Shuffle Text" href="/docs/text-animations/shuffle-text" />

  <SpotlightCard title="Text Reveal" href="/docs/text-animations/text-reveal" />

  <SpotlightCard title="Text Type" href="/docs/text-animations/text-type" />

  <SpotlightCard title="Typewriter Text" href="/docs/text-animations/typewriter" />

  <SpotlightCard title="Variable Proximity Text" href="/docs/text-animations/variable-proximity-text" />

  <SpotlightCard title="Wave Text" href="/docs/text-animations/wave-text" />
</div>


# Random Unveil
URL: /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.

***

title: Random Unveil
description: 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.
root: text-animations
---------------------

import { Button } from "@/components/ui/button";
import { Github } from "lucide-react";
import Link from "next/link";

<div className="flex flex-col items-center justify-start space-y-8 py-4 text-center">
  <div className="space-y-2">
    <h2 className="text-3xl mt-0 font-bold tracking-tighter sm:text-4xl md:text-5xl">Component In Development</h2>

    <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
      We're currently working on creating beautiful, responsive pagination components for MVPBlocks.
    </p>
  </div>

  <div className="w-full max-w-md rounded-lg border border-border bg-card/40 p-6 shadow-sm">
    <div className="space-y-2">
      <h3 className="text-xl font-bold">Want to contribute?</h3>

      <p className="text-sm text-muted-foreground">
        We welcome contributions from the community! If you have ideas or
        implementations for pagination components, consider contributing to
        MVPBlocks.
      </p>
    </div>
  </div>

  <Link prefetch={false} href="https://github.com/subhadeeproy3902/mvpblocks" target="_blank" rel="noopener noreferrer">
    <Button className="gap-2">
      <Github className="h-4 w-4" />

      Contribute on GitHub
    </Button>
  </Link>
</div>


# Scroll Reveal Text
URL: /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.

***

title: Scroll Reveal Text
description: 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.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Blur Reveal

Text blurs into clarity as you scroll down, and blurs back out when scrolling up.

<ComponentPreview name="scroll-reveal-demo" classNameComponentContainer="h-[400px] overflow-y-auto" code={(await extractSourceCode("scroll-reveal-demo")).code} lang="tsx" hasReTrigger={true} />

## Character Reveal

Each character reveals individually based on scroll progress.

<ComponentPreview name="scroll-reveal-characters" classNameComponentContainer="h-[400px] overflow-y-auto" code={(await extractSourceCode("scroll-reveal-characters")).code} lang="tsx" hasReTrigger={true} />

## Slide Reveal

Text slides into view tied to scroll position.

<ComponentPreview name="scroll-reveal-slide" classNameComponentContainer="h-[400px] overflow-y-auto" code={(await extractSourceCode("scroll-reveal-slide")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    <ComponentSource code={(await extractSourceCode("scroll-reveal-text")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  text: {
    description: "The text to display with scroll reveal effect.",
    type: "string",
    default: "required",
  },
  revealType: {
    description: "Type of reveal animation.",
    type: "'blur' | 'fade' | 'slide' | 'scale' | 'characters'",
    default: "'blur'",
  },
  scrollOffset: {
    description: "Scroll trigger points [start, end] using Framer Motion offset syntax.",
    type: "[string, string]",
    default: "['start 0.9', 'start 0.3']",
  },
  staggerDelay: {
    description: "Delay between each character reveal (for 'characters' type).",
    type: "number",
    default: "0.03",
  },
  blurAmount: {
    description: "Maximum blur amount in pixels.",
    type: "number",
    default: "10",
  },
  slideDistance: {
    description: "Distance to slide from (for 'slide' type).",
    type: "number",
    default: "30",
  },
  className: {
    description: "Additional CSS classes.",
    type: "string",
    default: "''",
  },
}}
/>

## Examples

```tsx
// Blur reveal (default)
<ScrollRevealText
  text="As you scroll, I reveal"
  revealType="blur"
  blurAmount={15}
/>

// Character-by-character reveal
<ScrollRevealText
  text="Character by character"
  revealType="characters"
  staggerDelay={0.02}
/>

// Slide in from below
<ScrollRevealText
  text="Sliding into view"
  revealType="slide"
  slideDistance={50}
/>

// Fade in
<ScrollRevealText
  text="Fading in"
  revealType="fade"
/>

// Scale in
<ScrollRevealText
  text="Scaling up"
  revealType="scale"
/>

// Custom scroll trigger points
<ScrollRevealText
  text="Earlier trigger"
  scrollOffset={['start 0.95', 'start 0.5']}
/>
```


# Scroll Velocity
URL: /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.

***

title: Scroll Velocity
description: 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.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

<ComponentPreview name="scrollbasedvelocity-demo" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("scrollbasedvelocity-demo")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion 
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion 
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion 
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    `components/ui/scrollbasedvelocity.tsx`

    ```tsx title="scrollbasedvelocity.tsx"
    "use client";

    import React, { useEffect, useRef, useState } from "react";
    import {
      motion,
      useAnimationFrame,
      useMotionValue,
      useScroll,
      useSpring,
      useTransform,
      useVelocity,
    } from "framer-motion";
    import { cn } from "@/lib/utils";

    interface VelocityScrollProps {
      text: string;
      default_velocity?: number;
      className?: string;
    }

    interface ParallaxProps {
      children: string;
      baseVelocity: number;
      className?: string;
    }

    export const wrap = (min: number, max: number, v: number) => {
      const rangeSize = max - min;
      return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
    };

    export const VelocityScroll: React.FC<VelocityScrollProps> = ({
      text,
      default_velocity = 5,
      className,
    }) => {
      const ParallaxText: React.FC<ParallaxProps> = ({
        children,
        baseVelocity = 100,
        className,
      }) => {
        const baseX = useMotionValue(0);
        const { scrollY } = useScroll();
        const scrollVelocity = useVelocity(scrollY);
        const smoothVelocity = useSpring(scrollVelocity, {
          damping: 50,
          stiffness: 400,
        });

        const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {
          clamp: false,
        });

        const [repetitions, setRepetitions] = useState(1);
        const containerRef = useRef<HTMLDivElement>(null);
        const textRef = useRef<HTMLSpanElement>(null);

        useEffect(() => {
          const calculateRepetitions = () => {
            if (containerRef.current && textRef.current) {
              const containerWidth = containerRef.current.offsetWidth;
              const textWidth = textRef.current.offsetWidth;
              const newRepetitions = Math.ceil(containerWidth / textWidth) + 2;
              setRepetitions(newRepetitions);
            }
          };

          calculateRepetitions();

          window.addEventListener("resize", calculateRepetitions);
          return () => window.removeEventListener("resize", calculateRepetitions);
        }, [children]);

        const x = useTransform(baseX, (v) => `${wrap(-100 / repetitions, 0, v)}%`);

        const directionFactor = useRef<number>(1);
        useAnimationFrame((t, delta) => {
          let moveBy = directionFactor.current * baseVelocity * (delta / 1000);

          if (velocityFactor.get() < 0) {
            directionFactor.current = -1;
          } else if (velocityFactor.get() > 0) {
            directionFactor.current = 1;
          }

          moveBy += directionFactor.current * moveBy * velocityFactor.get();

          baseX.set(baseX.get() + moveBy);
        });

        return (
          <div
            className="w-full overflow-hidden whitespace-nowrap"
            ref={containerRef}
          >
            <motion.div className={cn("inline-block", className)} style={{ x }}>
              {Array.from({ length: repetitions }).map((_, i) => (
                <span key={i} ref={i === 0 ? textRef : null}>
                  {children}{" "}
                </span>
              ))}
            </motion.div>
          </div>
        );
      };

      return (
        <section className="relative w-full">
          <ParallaxText baseVelocity={default_velocity} className={className}>
            {text}
          </ParallaxText>
          <ParallaxText baseVelocity={-default_velocity} className={className}>
            {text}
          </ParallaxText>
        </section>
      );
    };
    ```
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  text: {
    description: "The text to be animated.",
    type: "string",
    default: "Hello World!",
  },
  default_velocity: {
    description: "The default velocity of the animation.",
    type: "number",
    default: 5,
  },
  className: {
    description:
      "Optional CSS class for customizing the style and appearance of the text.",
    type: "string",
    default: undefined,
  },
}}
/>


# Shiny Text
URL: /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.

***

title: Shiny Text
description: 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.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Premium Shine

Continuous bright shine animation with glow effect - like Apple product text.

<ComponentPreview name="shiny-text-demo" classNameComponentContainer="h-[300px] bg-black" code={(await extractSourceCode("shiny-text-demo")).code} lang="tsx" hasReTrigger={true} />

## Hover Trigger

Golden shine activates when user hovers over the text.

<ComponentPreview name="shiny-text-hover" classNameComponentContainer="h-[300px] bg-black" code={(await extractSourceCode("shiny-text-hover")).code} lang="tsx" hasReTrigger={true} />

## Vision Pro Style

Extra wide shine with slow animation for maximum impact.

<ComponentPreview name="shiny-text-gradient" classNameComponentContainer="h-[300px] bg-black" code={(await extractSourceCode("shiny-text-gradient")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    <ComponentSource code={(await extractSourceCode("shiny-text")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  text: {
    description: "The text to display with shine effect.",
    type: "string",
    default: "required",
  },
  shineColor: {
    description: "Color of the shine/reflection effect.",
    type: "string",
    default: "'rgba(255, 255, 255, 1)'",
  },
  duration: {
    description: "Duration of the shine animation in seconds.",
    type: "number",
    default: "3",
  },
  angle: {
    description: "Angle of the shine gradient in degrees.",
    type: "number",
    default: "120",
  },
  shimmerWidth: {
    description: "Width of the shimmer band (higher = wider shine).",
    type: "number",
    default: "200",
  },
  trigger: {
    description: "When to trigger the animation.",
    type: "'hover' | 'loop' | 'inView'",
    default: "'loop'",
  },
  className: {
    description: "Additional CSS classes.",
    type: "string",
    default: "''",
  },
  disabled: {
    description: "Disable the animation.",
    type: "boolean",
    default: "false",
  },
}}
/>

## Examples

```tsx
// Premium white shine (default)
<ShinyText
  text="Premium Quality"
  shimmerWidth={200}
  duration={3}
/>

// Gold luxury shine
<ShinyText
  text="Luxury Gold"
  shineColor="rgba(255, 215, 0, 1)"
  shimmerWidth={180}
  duration={2.5}
/>

// Interactive hover shine
<ShinyText
  text="Hover for Shine"
  trigger="hover"
  shimmerWidth={200}
/>

// Extra wide slow shine
<ShinyText
  text="Apple Vision Pro"
  shimmerWidth={250}
  duration={4}
/>

// Diagonal shine
<ShinyText
  text="Angled Shine"
  angle={45}
  shimmerWidth={150}
/>
```


# Shuffle Text
URL: /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.

***

title: Shuffle Text
description: 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.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Basic Usage

Text automatically scrambles and decodes on mount.

<ComponentPreview name="shuffle-text-demo" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("shuffle-text-demo")).code} lang="tsx" hasReTrigger={true} />

## Hover Trigger

Text scrambles when user hovers over it.

<ComponentPreview name="shuffle-text-hover" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("shuffle-text-hover")).code} lang="tsx" hasReTrigger={true} />

## Scroll Trigger

Text decodes as you scroll - stops when you stop scrolling!

<ComponentPreview name="shuffle-text-inview" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("shuffle-text-inview")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    <ComponentSource code={(await extractSourceCode("shuffle-text")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  text: {
    description: "The final text to reveal after the scramble animation.",
    type: "string",
    default: "required",
  },
  trigger: {
    description: "When to trigger the animation. 'scroll' ties reveal progress to scroll position.",
    type: "'mount' | 'hover' | 'scroll'",
    default: "'mount'",
  },
  scrambleSpeed: {
    description: "How fast the random characters shuffle (in ms). Lower = faster scramble.",
    type: "number",
    default: "50",
  },
  revealDelay: {
    description: "Delay between each character being revealed (in ms). Higher = slower decode.",
    type: "number",
    default: "100",
  },
  className: {
    description: "Optional CSS class for styling.",
    type: "string",
    default: "''",
  },
  characterSet: {
    description: "Custom characters to use for the scramble effect.",
    type: "string",
    default: "'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*'",
  },
  sequential: {
    description: "If true, characters reveal left-to-right. If false, characters randomly lock in place.",
    type: "boolean",
    default: "true",
  },
  onComplete: {
    description: "Callback function fired when the animation completes.",
    type: "() => void",
    default: "undefined",
  },
}}
/>

## Speed Examples

```tsx
// Slow dramatic decode (good for hero sections)
<ShuffleText text="Welcome" scrambleSpeed={60} revealDelay={200} />

// Fast decode (good for hover effects)
<ShuffleText text="Click Me" scrambleSpeed={30} revealDelay={80} />

// Ultra slow cinematic decode
<ShuffleText text="Loading..." scrambleSpeed={80} revealDelay={300} />
```


# Text Reveal
URL: /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.

***

title: Text Reveal
description: 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.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Title Reveal

<ComponentPreview name="text-reveal-1" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("text-reveal-1")).code} lang="tsx" hasReTrigger={true} />

## With custom props

<ComponentPreview name="text-reveal-2" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("text-reveal-2")).code} lang="tsx" hasReTrigger={true} />

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install motion/react react
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install motion/react react
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add motion/react react
        ```
      </Tab>

      <Tab>
        ```bash
        bun add motion/react react
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    Text Reveal Component

    <ComponentSource code={(await extractSourceCode("text-reveal")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  children: {
    description: "The text to be revealed.",
    type: "string",
    default: "undefined",
  },
  className: {
    description: "Optional CSS class for customizing the style and appearance of the text.",
    type: "string",
    default: "undefined",
  },
  blur: {
    description: "Initial blur amount in pixels before the animation starts.",
    type: "number",
    default: "10",
  },
  delay: {
    description: "Delay in seconds between revealing each word or letter.",
    type: "number",
    default: "0.1",
  },
  duration: {
    description: "Animation duration in seconds for each word or letter.",
    type: "number",
    default: "1",
  },
  from: {
    description: "Animation direction from which each word or letter enters.",
    type: "'top' | 'bottom'",
    default: "'bottom'",
  },
  split: {
    description: "Whether to animate the text by words or individual letters.",
    type: "'word' | 'letter'",
    default: "'word'",
  },
}}
/>


# Text Type
URL: /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.

***

title: Text Type
description: A text typing animation component with GSAP. Features typing, deleting, looping, and customizable cursor effects. Perfect for hero sections and landing pages.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";

<ComponentPreview name="text-type-demo" classNameComponentContainer="min-h-[300px]" code={(await extractSourceCode("text-type-demo")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install gsap react
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install gsap react
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add gsap react
        ```
      </Tab>

      <Tab>
        ```bash
        bun add gsap react
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    <ComponentSource code={(await extractSourceCode("text-type-demo")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Usage

```tsx
import { TextType } from "@/components/ui/text-type";

export default function MyComponent() {
  return (
    <div className="text-4xl font-bold">
      <TextType
        text={["Text typing effect", "for your websites", "Happy coding!"]}
        typingSpeed={75}
        pauseDuration={1500}
        showCursor={true}
        cursorCharacter="|"
      />
    </div>
  );
}
```

## Features

* ⌨️ **Typing Animation**: Smooth character-by-character typing effect
* 🗑️ **Auto Delete**: Automatically deletes text before typing next phrase
* 🔄 **Looping**: Seamlessly loops through multiple text strings
* 🎨 **Customizable Cursor**: Custom cursor character and blink animation
* ⚡ **GSAP Powered**: Smooth animations powered by GSAP
* 📱 **Responsive**: Works on all screen sizes
* 🎯 **Intersection Observer**: Start animation when element is visible
* 🎨 **Color Support**: Custom colors for each text string

## Props

| Prop                  | Type                         | Default  | Description                       |
| --------------------- | ---------------------------- | -------- | --------------------------------- |
| `text`                | `string \| string[]`         | Required | Text or array of texts to type    |
| `typingSpeed`         | `number`                     | `50`     | Speed of typing in milliseconds   |
| `deletingSpeed`       | `number`                     | `30`     | Speed of deleting in milliseconds |
| `pauseDuration`       | `number`                     | `2000`   | Pause between typing and deleting |
| `initialDelay`        | `number`                     | `0`      | Initial delay before starting     |
| `loop`                | `boolean`                    | `true`   | Whether to loop through texts     |
| `showCursor`          | `boolean`                    | `true`   | Show/hide cursor                  |
| `cursorCharacter`     | `string \| ReactNode`        | `"\|"`   | Cursor character                  |
| `cursorBlinkDuration` | `number`                     | `0.5`    | Cursor blink speed                |
| `startOnVisible`      | `boolean`                    | `false`  | Start when element is visible     |
| `reverseMode`         | `boolean`                    | `false`  | Type text in reverse              |
| `textColors`          | `string[]`                   | `[]`     | Array of colors for each text     |
| `variableSpeed`       | `{min: number, max: number}` | -        | Random speed range                |
| `onSentenceComplete`  | `function`                   | -        | Callback when sentence completes  |

## Examples

### Basic Usage

```tsx
<TextType
  text="Hello, World!"
  typingSpeed={100}
  showCursor={true}
/>
```

### Multiple Texts

```tsx
<TextType
  text={["Welcome", "to MVPBlocks", "Start building!"]}
  typingSpeed={75}
  pauseDuration={2000}
  loop={true}
/>
```

### Custom Colors

```tsx
<TextType
  text={["Red text", "Blue text", "Green text"]}
  textColors={["#ef4444", "#3b82f6", "#22c55e"]}
/>
```

### Variable Speed

```tsx
<TextType
  text="Variable speed typing"
  variableSpeed={{ min: 50, max: 150 }}
/>
```

### Start on Visible

```tsx
<TextType
  text="Starts when visible"
  startOnVisible={true}
/>
```

### Custom Cursor

```tsx
<TextType
  text="Custom cursor"
  cursorCharacter="▊"
  cursorBlinkDuration={0.8}
/>
```


# Typewriter
URL: /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.

***

title: Typewriter
description: 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.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

<ComponentPreview name="typewriter-demo" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("typewriter-demo")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion 
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion 
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion 
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    `components/ui/typewriter.tsx`

    ```tsx title="typewriter.tsx"
    "use client";

    import { useEffect } from "react";
    import { motion, useMotionValue, useTransform, animate } from "framer-motion";

    export default function TextGenerateEffect({
      words,
      className = "",
    }: {
      words: string;
      className?: string;
    }) {
      const count = useMotionValue(0);
      const rounded = useTransform(count, (latest) => Math.round(latest));
      const displayText = useTransform(rounded, (latest) =>
        words.slice(0, latest)
      );

      useEffect(() => {
        const controls = animate(count, words.length, {
          type: "tween",
          duration: 2.5, // Increased from 1 to 2.5 seconds
          ease: "easeInOut",
        });
        return controls.stop;
      }, [words]);

      return (
        <motion.span className={className}>
          {displayText}
        </motion.span>
      );
    };
    ```
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  words: {
    description: "The text to be typed out.",
    type: "string",
    default: "Hello World!",
  },
  className: {
    description:
      "Optional CSS class for customizing the style and appearance of the text.",
    type: "string",
    default: undefined,
  },
}}
/>

## Gradient Typewriter

<ComponentPreview name="gradient-typewriter" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("gradient-typewriter")).code} lang="tsx" hasReTrigger={true} />


# Variable Proximity Text
URL: /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.

***

title: Variable Proximity Text
description: Interactive text where font weight and optical size change based on mouse proximity to each letter. Uses variable fonts for smooth, fluid transitions.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Linear Falloff

Font weight increases linearly as the cursor approaches each letter.

<ComponentPreview name="variable-proximity-demo" classNameComponentContainer="h-[350px]" code={(await extractSourceCode("variable-proximity-demo")).code} lang="tsx" hasReTrigger={true} />

## Gaussian Falloff

Smooth gaussian distribution creates a softer, more natural effect.

<ComponentPreview name="variable-proximity-gaussian" classNameComponentContainer="h-[350px]" code={(await extractSourceCode("variable-proximity-gaussian")).code} lang="tsx" hasReTrigger={true} />

## Exponential Falloff

Sharp exponential falloff for more dramatic proximity effect.

<ComponentPreview name="variable-proximity-exponential" classNameComponentContainer="h-[350px]" code={(await extractSourceCode("variable-proximity-exponential")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Add the Google Font

    Add the Roboto Flex variable font to your layout or CSS:

    ```css
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
    ```
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    <ComponentSource code={(await extractSourceCode("variable-proximity-text")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  label: {
    description: "The text to display.",
    type: "string",
    default: "required",
  },
  containerRef: {
    description: "Ref to the container element for mouse position calculation.",
    type: "RefObject<HTMLElement>",
    default: "required",
  },
  fromFontVariationSettings: {
    description: "Font variation settings when mouse is far away.",
    type: "string",
    default: "'wght' 400, 'opsz' 9",
  },
  toFontVariationSettings: {
    description: "Font variation settings when mouse is closest.",
    type: "string",
    default: "'wght' 900, 'opsz' 40",
  },
  radius: {
    description: "Radius of influence in pixels.",
    type: "number",
    default: "100",
  },
  falloff: {
    description: "Type of distance falloff function.",
    type: "'linear' | 'exponential' | 'gaussian'",
    default: "'linear'",
  },
  className: {
    description: "Additional CSS classes.",
    type: "string",
    default: "''",
  },
}}
/>

## Examples

```tsx
'use client';

import { useRef } from 'react';
import { VariableProximityText } from '@/components/ui/variable-proximity-text';

// Basic usage
function Example() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} className="relative p-8">
      <VariableProximityText
        label="Hover over me!"
        containerRef={containerRef}
        radius={100}
        falloff="linear"
      />
    </div>
  );
}

// With custom font variation settings
<VariableProximityText
  label="Custom Weight Range"
  containerRef={containerRef}
  fromFontVariationSettings="'wght' 200, 'opsz' 9"
  toFontVariationSettings="'wght' 1000, 'opsz' 40"
  radius={150}
/>

// Gaussian falloff for smoother effect
<VariableProximityText
  label="Smooth Gaussian"
  containerRef={containerRef}
  falloff="gaussian"
  radius={120}
/>

// Exponential falloff for sharp effect
<VariableProximityText
  label="Sharp Exponential"
  containerRef={containerRef}
  falloff="exponential"
  radius={80}
/>
```

## Variable Font Requirements

This component requires a **variable font** that supports the `wght` (weight) and optionally `opsz` (optical size) axes. The default font is [Roboto Flex](https://fonts.google.com/specimen/Roboto+Flex).

Other compatible variable fonts:

* [Inter](https://fonts.google.com/specimen/Inter)
* [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro)
* [Montserrat](https://fonts.google.com/specimen/Montserrat)


# Wave Text
URL: /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.

***

title: Wave Text
description: Letters dance in a smooth sine wave pattern, creating a playful, ocean-like motion. Perfect for adding life to headers and interactive elements.
root: text-animations
---------------------

import { ComponentPreview } from "@/components/preview/component-preview";
import { extractSourceCode } from "@/lib/code";
import { ComponentSource } from "@/components/preview/component-source";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { TypeTable } from "fumadocs-ui/components/type-table";

## Continuous Wave

Letters continuously wave up and down in a mesmerizing pattern.

<ComponentPreview name="wave-text-demo" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("wave-text-demo")).code} lang="tsx" hasReTrigger={true} />

## Hover Activated

Wave animation triggers on hover for interactive elements.

<ComponentPreview name="wave-text-hover" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("wave-text-hover")).code} lang="tsx" hasReTrigger={true} />

## Subtle Motion

Gentle, barely-there motion for elegant, professional designs.

<ComponentPreview name="wave-text-subtle" classNameComponentContainer="h-[300px]" code={(await extractSourceCode("wave-text-subtle")).code} lang="tsx" hasReTrigger={true} />

## Installation

<Steps>
  <Step>
    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
      <Tab>
        ```bash
        npm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        pnpm install framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        yarn add framer-motion
        ```
      </Tab>

      <Tab>
        ```bash
        bun add framer-motion
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    #### Copy and paste the following code into your project.

    <ComponentSource code={(await extractSourceCode("wave-text")).code} className="bg-fd-secondary/50" />
  </Step>
</Steps>

## Props

<TypeTable
  type={{
  text: {
    description: "The text to animate.",
    type: "string",
    default: "required",
  },
  amplitude: {
    description: "Height of the wave in pixels.",
    type: "number",
    default: "20",
  },
  frequency: {
    description: "Wave frequency (spacing between peaks).",
    type: "number",
    default: "0.3",
  },
  speed: {
    description: "Animation speed in seconds per cycle.",
    type: "number",
    default: "2",
  },
  direction: {
    description: "Wave direction.",
    type: "'up' | 'down' | 'both'",
    default: "'both'",
  },
  trigger: {
    description: "When to trigger the animation.",
    type: "'mount' | 'hover' | 'inView' | 'continuous'",
    default: "'continuous'",
  },
  className: {
    description: "Additional CSS classes.",
    type: "string",
    default: "''",
  },
}}
/>

## Examples

```tsx
// Energetic wave
<WaveText
  text="Party Time"
  amplitude={30}
  frequency={0.6}
  speed={1}
/>

// Calm ocean wave
<WaveText
  text="Peaceful"
  amplitude={10}
  frequency={0.2}
  speed={4}
  direction="up"
/>

// Interactive hover wave
<WaveText
  text="Touch Me"
  trigger="hover"
  amplitude={20}
/>
```