MVPBlocks

https://github.com/subhadeeproy3902/mvpblocks
Admin
MVPBlocks is an open-source component library built with Next.js and TailwindCSS, offering copyable...
Tokens:73,026
Snippets:334
Trust Score:9.7
License:BSD-3-Clause
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize Project with MVPBlocks CLI

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/cli/README.md

Demonstrates how to start a new project from scratch using the MVPBlocks CLI. It shows navigating to a directory, running a component add command, and outlines the automatic setup process including framework detection, theme selection, and dependency installation.

```bash
# Navigate to where you want your project
mkdir my-awesome-project
cd my-awesome-project

# Run ANY command and MVPBlocks will set everything up!
npx mvpblocks add hero-1 --ts
```

--------------------------------

### Initialize shadcn/ui CLI

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/tanstack.mdx

Runs the shadcn init command to set up the project with shadcn/ui. This command generates a components.json file and configures CSS variables.

```bash
npx shadcn@canary init
```

--------------------------------

### Beginner Workflow: Landing Page Setup

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/cli/README.md

A step-by-step guide for beginners to create a landing page. It involves creating a directory, adding a hero component with TypeScript, choosing Next.js during initialization, and then adding more components like features and testimonials.

```bash
# I want to build a landing page
mkdir my-landing-page
cd my-landing-page
npx mvpblocks add hero-1 --ts
# 🎯 Choose Next.js → Enter project name → Pick theme → Done!
npx mvpblocks add features
npx mvpblocks add testimonials  
npx mvpblocks add cta-1
# Perfect landing page ready! 🚀
```

--------------------------------

### Initialize Project with MVPBlocks CLI

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Demonstrates the 'magic way' to initialize a new project using the MVPBlocks CLI. This involves navigating to a directory, running any component command, and following the interactive setup prompts for framework, theme, and component installation.

```bash
mkdir my-awesome-project
cd my-awesome-project
```

```bash
# Use directly (recommended)
npx mvpblocks add hero-1 --ts
```

```bash
# Use directly (recommended)
yarn dlx mvpblocks add hero-1 --ts
```

```bash
# Use directly (recommended)
pnpm dlx mvpblocks add hero-1 --ts
```

```bash
# Use directly (recommended)
bunx mvpblocks add hero-1 --ts
```

--------------------------------

### Installation Instructions for Text Reveal

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/text-animations/text-reveal.mdx

Provides installation commands for the text reveal component using various package managers including npm, pnpm, yarn, and bun. This ensures easy integration into different project setups.

```bash
npm install motion/react react
```

```bash
pnpm install motion/react react
```

```bash
yarn add motion/react react
```

```bash
bun add motion/react react
```

--------------------------------

### Initialize Shadcn/UI

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/nextjs.mdx

Initializes shadcn/ui in a Next.js project. The command can be run with default settings using the -d flag for a quick setup.

```bash
npx shadcn@latest init
```

```bash
npx shadcn@latest init -d
```

--------------------------------

### Add shadcn/ui Button Component

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/tanstack.mdx

Adds the Button component from shadcn/ui to the project using the CLI. This command fetches the component and makes it available for import.

```bash
npx shadcn@canary add button
```

--------------------------------

### Install and Use React Icons

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/nextjs.mdx

Installs the react-icons library for easy access to popular icon sets. The example shows how to import and render the FaSearch icon.

```bash
npm install react-icons
```

```tsx
import { FaSearch } from "react-icons/fa";

export default function Home() {
  return (
    <div>
      <FaSearch />
    </div>
  );
}
```

--------------------------------

### Create Astro Project

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/astro.mdx

Initializes a new Astro project with Tailwind CSS, installs dependencies, adds React support, and sets up Git.

```bash
npx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
```

--------------------------------

### Install MVPBlocks CLI

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/cli/README.md

Instructions for installing the MVPBlocks CLI globally using npm for faster access. It also shows how to run the help command.

```bash
npm install -g mvpblocks
mvpblocks --help
```

--------------------------------

### Example Component Registration with Bun

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/scripts/README.md

An example demonstrating how to register a component using the 'add-component' npm script with Bun.

```Bash
bun run add-component components/mvpblocks/basics/buttons/btn-gradient1.tsx
```

--------------------------------

### Manual Installation of Mvpblocks

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/get-started.mdx

Provides instructions for manually installing Mvpblocks, likely for React projects. This option is useful when direct integration is preferred.

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

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

--------------------------------

### Install Tailwind CSS Dependencies

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/tanstack.mdx

Installs Tailwind CSS and its necessary dependencies using npm. This is a prerequisite for configuring Tailwind in the TanStack Start project.

```bash
npm install tailwindcss @tailwindcss/postcss postcss
```

--------------------------------

### Install and Use Canvas Confetti

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/nextjs.mdx

Installs the canvas-confetti library for creating confetti animations. It includes installing the library and its types, and a basic usage example using useEffect.

```bash
npm install canvas-confetti
```

```bash
npm i --save-dev @types/canvas-confetti
```

```tsx
import { useEffect } from "react";
import confetti from "canvas-confetti";

export default function Home() {
  useEffect(() => {
    confetti();
  }, []);

  return <div>Hello World</div>;
}
```

--------------------------------

### Import and Use Button Component

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/tanstack.mdx

Demonstrates how to import and use the shadcn/ui Button component in a TanStack Start route component. It shows a basic usage of the Button.

```tsx
import { Button } from "@/components/ui/button"

function Home() {
  const router = useRouter()
  const state = Route.useLoaderData()

  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```

--------------------------------

### Install and Use Framer Motion

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/nextjs.mdx

Installs Framer Motion for animations in React applications. The example demonstrates basic usage with initial, animate, and exit properties for opacity.

```bash
npm install motion
```

```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>
  );
}
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/manual.mdx

Installs essential project dependencies including class-variance-authority, clsx, tailwind-merge, lucide-react, and tw-animate-css using npm.

```bash
npm install class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
```

--------------------------------

### Initialize shadcn/ui CLI

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/astro.mdx

Runs the shadcn/ui initialization command to set up the project for using shadcn/ui components.

```bash
npx shadcn@latest init
```

--------------------------------

### Create Gatsby Project

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/gatsby.mdx

Initializes a new Gatsby project using the create-gatsby command-line interface. This is the first step in setting up a Gatsby application.

```bash
npm init gatsby
```

--------------------------------

### Create and Import Tailwind CSS

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/tanstack.mdx

Creates an app.css file in the app/styles directory and imports Tailwind CSS. This file is then imported into the root component to apply styles globally.

```css
@import "tailwindcss" source("../");
```

--------------------------------

### Experienced Developer Workflow: SaaS App Setup

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/cli/README.md

A workflow tailored for experienced developers who might have specific preferences, such as choosing Vite for a modern setup and a particular theme. It demonstrates adding a dashboard component with TypeScript, followed by UI components like buttons and modals.

```bash
# I have specific preferences
mkdir my-saas-app
cd my-saas-app
npx mvpblocks add dashboard --ts
# 🎯 Choose Vite → Modern setup → Blue theme → Ready!
npx mvpblocks add button
npx mvpblocks add modal
# Components added to existing structure
```

--------------------------------

### Start Dev Server (npm, pnpm, yarn, bun)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/add-a-block.mdx

Start the local development server to preview your changes in real-time. This command compiles the project and makes it accessible via a local URL.

```bash
npm run dev
```

```bash
pnpm run dev
```

```bash
yarn dev
```

```bash
bun run dev
```

--------------------------------

### Create Remix Project

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/remix.mdx

Initializes a new Remix project using the create-remix CLI. This is the first step in setting up the development environment.

```bash
npx create-remix@latest my-app
```

--------------------------------

### Globally Install MVPBlocks (bun)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Installs MVPBlocks globally using bun for faster access and then adds a hero component.

```bash
bun add -g mvpblocks
mvpblocks add hero-1 --ts  # No bunx needed!
```

--------------------------------

### Create Laravel Project with React

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/laraval.mdx

Creates a new Laravel project with Inertia and React support using the laravel installer.

```bash
laravel new my-app --react
```

--------------------------------

### Configure tsconfig.json for Path Resolution

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/tanstack.mdx

Updates the tsconfig.json file to include path aliases, specifically mapping '@/*' to './app/*', which simplifies importing modules within the project.

```typescript
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./app/*"]
    }
  }
}
```

--------------------------------

### Initialize shadcn/ui CLI

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/react-router.mdx

Command to run the shadcn/ui initialization process to set up the project for shadcn/ui components.

```bash
npx shadcn@latest init
```

--------------------------------

### Install MVPBlocks CLI

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Instructions for installing the MVPBlocks CLI globally or using it directly via package managers like npm, yarn, pnpm, and bun.

```bash
# Use directly (recommended)
npx mvpblocks --help

# Or install globally
npm install -g mvpblocks
```

```bash
# Use directly (recommended)
yarn dlx mvpblocks --help

# Or install globally
yarn global add mvpblocks
```

```bash
# Use directly (recommended)
pnpm dlx mvpblocks --help

# Or install globally
pnpm add -g mvpblocks
```

```bash
# Use directly (recommended)
bunx mvpblocks --help

# Or install globally
bun add -g mvpblocks
```

--------------------------------

### Install Motion and React

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/creative/interactive-tooltip.mdx

Installs the necessary 'motion' and 'react' packages using different package managers (npm, pnpm, yarn, bun). These are dependencies for the interactive tooltip component.

```bash
npm install motion react
```

```bash
pnpm install motion react
```

```bash
yarn add motion react
```

```bash
bun add motion react
```

--------------------------------

### Initialize shadcn/ui CLI

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/remix.mdx

Runs the shadcn CLI to begin the configuration process for shadcn/ui components within the project. This command prompts for project-specific settings.

```bash
npx shadcn@latest init
```

--------------------------------

### Install Tailwind CSS and Autoprefixer

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/remix.mdx

Installs Tailwind CSS and Autoprefixer as development dependencies, which are essential for styling in Remix projects using shadcn/ui.

```bash
npm install -D tailwindcss@latest autoprefixer@latest
```

--------------------------------

### Globally Install MVPBlocks (pnpm)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Installs MVPBlocks globally using pnpm for faster access and then adds a hero component.

```bash
pnpm add -g mvpblocks
mvpblocks add hero-1 --ts  # No pnpm dlx needed!
```

--------------------------------

### Install Dependencies (npm, pnpm, yarn, bun)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cards/card-flip.mdx

Installs the necessary dependencies, lucide-react and react, using various package managers.

```bash
npm install lucide-react react
```

```bash
pnpm install lucide-react react
```

```bash
yarn add lucide-react react
```

```bash
bun add lucide-react react
```

--------------------------------

### Globally Install MVPBlocks (npm)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Installs MVPBlocks globally using npm for faster access and then adds a hero component.

```bash
npm install -g mvpblocks
mvpblocks add hero-1 --ts  # No npx needed!
```

--------------------------------

### Globally Install MVPBlocks (yarn)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Installs MVPBlocks globally using yarn for faster access and then adds a hero component.

```bash
yarn global add mvpblocks
mvpblocks add hero-1 --ts  # No yarn dlx needed!
```

--------------------------------

### Initialize shadcn/ui CLI

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/gatsby.mdx

Runs the shadcn/ui CLI to initialize the project with the chosen configuration, including TypeScript, styling, and color preferences.

```bash
npx shadcn@latest init
```

--------------------------------

### Install Mvpblocks for Remix

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/get-started.mdx

Provides instructions for installing Mvpblocks with Remix. This component likely integrates with the Remix framework for server-side rendering and routing.

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

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

--------------------------------

### Install MVPBlocks Component (bun)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Installs a component using bun and triggers the theme selector. This command is used for theme switching.

```bash
bunx mvpblocks add button --ts  # Theme selector will appear
```

--------------------------------

### Install Mvpblocks for Next.js

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/get-started.mdx

Provides instructions for installing Mvpblocks with Next.js. This component likely integrates with the Next.js framework for seamless usage.

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

<DocsInstallationCard
  title="Next.js"
  light="/nextjs_icon_dark.svg"
  dark="/nextjs_icon_dark.svg"
  url="/docs/installation/nextjs"
/>
```

--------------------------------

### Install Mvpblocks for Vite

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/get-started.mdx

Provides instructions for installing Mvpblocks with Vite. This component likely integrates with the Vite build tool for efficient development.

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

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

--------------------------------

### Configure components.json (Color Selection)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/remix.mdx

Illustrates the interactive prompt during the shadcn/ui initialization process, specifically for selecting the base color for the UI components.

```bash
Which color would you like to use as base color? › Neutral
```

--------------------------------

### Install Mvpblocks for TanStack

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/get-started.mdx

Provides instructions for installing Mvpblocks with TanStack. This component likely integrates with TanStack libraries.

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

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

--------------------------------

### Install MVPBlocks Component (npm)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Installs a component using npm and triggers the theme selector. This command is used for theme switching.

```bash
npx mvpblocks add button --ts  # Theme selector will appear
```

--------------------------------

### Install framer-motion

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/text-animations/typewriter.mdx

Instructions for installing the 'framer-motion' library, a dependency for the typewriter animation, using various package managers.

```bash
npm install framer-motion
```

```bash
pnpm install framer-motion
```

```bash
yarn add framer-motion
```

```bash
bun add framer-motion
```

--------------------------------

### Install MVPBlocks Component (pnpm)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Installs a component using pnpm and triggers the theme selector. This command is used for theme switching.

```bash
pnpm dlx mvpblocks add button --ts  # Theme selector will appear
```

--------------------------------

### Create Next.js App

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/nextjs.mdx

Installs a new Next.js project using the create-next-app CLI. It prompts the user for various configuration options like TypeScript, ESLint, Tailwind CSS, and the App Router.

```bash
npx create-next-app@latest
```

--------------------------------

### Create Vite Project

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/vite.mdx

Initializes a new React project using Vite with the React + TypeScript template.

```bash
npm create vite@latest
```

--------------------------------

### Install Mvpblocks for Astro

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/get-started.mdx

Provides instructions for installing Mvpblocks with Astro. This component likely integrates with the Astro static site generator.

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

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

--------------------------------

### Add Component with npm (Global Install)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/cli/README.md

Shows how to add a component ('hero-1') using the globally installed MVPBlocks CLI. Installing globally via npm allows direct command execution without 'npx'. The '--ts' flag indicates TypeScript support.

```bash
npm install -g mvpblocks
mvpblocks add hero-1 --ts
```

--------------------------------

### Install MVPBlocks Component (yarn)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Installs a component using yarn and triggers the theme selector. This command is used for theme switching.

```bash
yarn dlx mvpblocks add button --ts  # Theme selector will appear
```

--------------------------------

### Install Tailwind CSS

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/vite.mdx

Installs Tailwind CSS and its Vite plugin for styling. It also shows how to import Tailwind CSS into the main CSS file.

```bash
npm install tailwindcss@3.4.1 @tailwindcss/vite
```

```css
@import "tailwindcss";
```

--------------------------------

### Install MVPBlocks Dependencies

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/chatbot/conversation.mdx

Installs the necessary packages for MVPBlocks using npm, pnpm, yarn, or bun.

```bash
npm install react-markdown sonner ai @ai-sdk/groq
```

```bash
pnpm install react-markdown sonner ai @ai-sdk/groq
```

```bash
yarn add react-markdown sonner ai @ai-sdk/groq
```

```bash
bun add react-markdown sonner ai @ai-sdk/groq
```

--------------------------------

### Run MVPBlocks CLI with npx

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/cli/README.md

Demonstrates how to execute MVPBlocks CLI commands directly using npx without a global installation. This includes running the help command.

```bash
npx mvpblocks --help
```

--------------------------------

### Install Gradient Bars (bun)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/backgrounds/gradient-bars.mdx

Installs the 'motion' and 'react' packages using bun, which are dependencies for the Gradient Bars component.

```bash
bun add motion react
```

--------------------------------

### Install Framer Motion for Components

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/mainsections/about.mdx

Provides installation commands for Framer Motion across different package managers (npm, pnpm, yarn, bun). This is a prerequisite for using some of the UI components.

```bash
npm install framer-motion
```

```bash
pnpm install framer-motion
```

```bash
yarn add framer-motion
```

```bash
bun add framer-motion
```

--------------------------------

### Install Testimonials Marquee Dependencies

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/mainsections/testimonials.mdx

Installs the necessary dependencies for the Testimonials Marquee component, including framer-motion and lucide-react, using various package managers.

```bash
npm install framer-motion lucide-react
```

```bash
pnpm install framer-motion lucide-react
```

```bash
yarn add framer-motion lucide-react
```

```bash
bun add framer-motion lucide-react
```

--------------------------------

### Create SaaS Dashboard Project Directory

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Initializes a new directory for your SaaS dashboard project and navigates into it. This is the starting point for building a dashboard application.

```bash
mkdir my-saas-app
cd my-saas-app
```

--------------------------------

### Startup Features Card Example

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cards/card-flip.mdx

An example of a Flip Card designed for startups, emphasizing features like authentication and payment readiness. This showcases the component's adaptability for business needs.

```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"
  ]}/>
```

--------------------------------

### Create React Router Project

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/react-router.mdx

Command to create a new React Router project using the create-react-router CLI.

```bash
npx create-react-router@latest my-app
```

--------------------------------

### Install framer-motion

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/text-animations/circular-text.mdx

Instructions for installing the framer-motion library, a dependency for the circular text animation, using npm, pnpm, yarn, and bun.

```bash
npm install framer-motion
```

```bash
pnpm install framer-motion
```

```bash
yarn add framer-motion
```

```bash
bun add framer-motion
```

--------------------------------

### Install Dependencies (npm, pnpm, yarn, bun)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/add-a-block.mdx

Install the necessary project dependencies using your preferred package manager. This ensures that all required libraries and tools are available for development.

```bash
npm install
```

```bash
pnpm install
```

```bash
yarn
```

```bash
bun install
```

--------------------------------

### Install MVPBlocks Components via CLI

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/dashboards/admin.mdx

Installs multiple MVPBlocks components using the npx command. This is a quick way to add several dashboard elements to your project.

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

--------------------------------

### Add shadcn/ui Button Component

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/astro.mdx

Adds the 'Button' component from shadcn/ui to the Astro project.

```bash
npx shadcn@latest add button
```

--------------------------------

### Get Component Information Command

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/cli/README.md

Retrieves detailed information about a specific component. This command does not auto-initialize the project.

```bash
npx mvpblocks info button
```

--------------------------------

### Interactive Tooltip Example: Development Team

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/creative/interactive-tooltip.mdx

An example showcasing the InteractiveTooltip component with a predefined 'devTeam' array. This demonstrates how to populate the tooltip with development team member information.

```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} />
```

--------------------------------

### Configure tsconfig.json for Vite

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/vite.mdx

Modifies the tsconfig.json file to include `baseUrl` and `paths` for module resolution, aliasing paths starting with '@' to the './src' directory.

```typescript
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

--------------------------------

### Development Tools Card Example

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cards/card-flip.mdx

Presents a Flip Card tailored for development tools, highlighting features like code editors and Git integration. This example demonstrates a specific use case for the component.

```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"
  ]}/>
```

--------------------------------

### Animated Footer Example

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/required/footers.mdx

Demonstrates an animated footer component. Animation can be used to add dynamic visual interest or to subtly guide user interaction within the footer.

```tsx
await extractSourceCode('footer-animated')).code
```

--------------------------------

### Initialize shadcn/ui CLI

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/vite.mdx

Runs the shadcn/ui initialization command to set up the project's configuration file (`components.json`) and prompts the user for project-specific settings like base color.

```bash
npx shadcn@latest init
```

--------------------------------

### Configure PostCSS for Tailwind

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/tanstack.mdx

Creates a postcss.config.ts file at the project root to configure PostCSS with the Tailwind CSS plugin. This enables Tailwind's processing capabilities.

```typescript
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}
```

--------------------------------

### Add Shadcn/UI Component

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/laraval.mdx

Adds a shadcn/ui component, such as 'switch', to your Laravel project. The component will be placed in the resources/js/components/ui directory.

```bash
npx shadcn@latest add switch
```

--------------------------------

### Import and Use Button Component in React Router

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/react-router.mdx

Example of importing and using the shadcn/ui Button component within a React Router application. It demonstrates the import statement and JSX usage.

```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>
  )
}
```

--------------------------------

### Use Button Component in Astro Page

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/astro.mdx

Demonstrates how to import and use the shadcn/ui Button component within an Astro page (`index.astro`).

```astro
---
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>
```

--------------------------------

### Create components.json

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/manual.mdx

This JSON file configures your project's components, including style, Tailwind CSS settings, and component aliases. It serves as the central configuration for managing UI elements within the project.

```json
{
  "$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"
}
```

--------------------------------

### Import CSS in Root Component

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/installation/tanstack.mdx

Imports the custom CSS file (appCss) into the root component (app/routes/__root.tsx) to ensure global styles are applied. It also configures meta tags and links for the application.

```tsx
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,
})
```

--------------------------------

### Initialize Project and Add Hero Component (TypeScript)

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/cli/README.md

Demonstrates the workflow of creating a new project directory, navigating into it, and adding a hero component using TypeScript. This process includes auto-detection, framework choice, project creation, dependency installation, theme selection, and component addition.

```bash
mkdir my-project && cd my-project
npx mvpblocks add hero-1 --ts
```

--------------------------------

### Get MVPBlocks Component Details

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Retrieves detailed information about a specific MVPBlocks component, such as its description, category, dependencies, and file location. You can specify the component name as an argument. Examples are shown for the 'button' and 'hero-1' components.

```bash
npx mvpblocks info button
npx mvpblocks info hero-1
```

```bash
yarn dlx mvpblocks info button
yarn dlx mvpblocks info hero-1
```

```bash
pnpm dlx mvpblocks info button
pnpm dlx mvpblocks info hero-1
```

```bash
bunx mvpblocks info button
bunx mvpblocks info hero-1
```

--------------------------------

### Add Hero Section to Landing Page

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Adds a hero section to your landing page project. This command can be executed using npm, yarn, pnpm, or bun, and includes the --ts flag for TypeScript support. The interactive flow guides you through project setup, theme selection, and completion.

```bash
npx mvpblocks add hero-1 --ts
```

```bash
yarn dlx mvpblocks add hero-1 --ts
```

```bash
pnpm dlx mvpblocks add hero-1 --ts
```

```bash
bunx mvpblocks add hero-1 --ts
```

--------------------------------

### Install Mvpblocks for Laravel

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/get-started.mdx

Provides instructions for installing Mvpblocks with Laravel. This component likely integrates with the Laravel PHP framework.

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

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

--------------------------------

### Install Mvpblocks for Gatsby

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/get-started.mdx

Provides instructions for installing Mvpblocks with Gatsby. This component likely integrates with the Gatsby static site generator.

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

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

--------------------------------

### Show MVPBlocks Help Information

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Displays help information and lists all available commands for the MVPBlocks CLI. This can be accessed using the --help or help flags.

```bash
npx mvpblocks --help
npx mvpblocks help
```

```bash
yarn dlx mvpblocks --help
yarn dlx mvpblocks help
```

```bash
pnpm dlx mvpblocks --help
pnpm dlx mvpblocks help
```

```bash
bunx mvpblocks --help
bunx mvpblocks help
```

--------------------------------

### Create Landing Page Project Directory

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/cli.mdx

Initializes a new directory for your landing page project and navigates into it. This is the first step in building a new landing page with MVPBlocks.

```bash
mkdir my-landing-page
cd my-landing-page
```

--------------------------------

### Install Mvpblocks for TanStack Router

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/get-started.mdx

Provides instructions for installing Mvpblocks with TanStack Router. This component likely integrates with TanStack Router for routing solutions.

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

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

--------------------------------

### Install Mvpblocks for React Router

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/content/docs/get-started.mdx

Provides instructions for installing Mvpblocks with React Router. This component likely integrates with React Router for client-side navigation.

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

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

--------------------------------

### List Components Command

Source: https://github.com/subhadeeproy3902/mvpblocks/blob/main/cli/README.md

Lists all available components that can be added to the project. This command does not auto-initialize the project.

```bash
npx mvpblocks list
```
Tokens:
Raw