### Setup Development Environment

Source: https://github.com/magicuidesign/magicui/blob/main/CONTRIBUTING.md

Commands to clone the repository, install dependencies, configure environment variables, and start the development server.

```bash
git clone https://github.com/<YOUR_USERNAME>/magicui.git
cd magicui
git checkout -b my-new-branch
pnpm i
touch .env.local && echo "NEXT_PUBLIC_APP_URL=http://localhost:3000" > .env.local
pnpm dev
```

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

### Install Highlighter Dependencies Manually

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/highlighter.mdx

Install the required motion and rough-notation packages for manual setup.

```bash
pnpm add motion rough-notation
```

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

### Installation

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/interactive-grid-pattern.mdx

Instructions for installing the Interactive Grid Pattern component using either the CLI or manual setup.

```APIDOC
## Installation

### CLI Installation

Use the following command to add the component to your project:

```bash
npx shadcn@latest add @magicui/interactive-grid-pattern
```

### Manual Installation

1. Copy and paste the component code into your project.
2. Update the import paths to match your project setup.

```tsx showLineNumbers
// Component code will be provided here after manual installation
```
```

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

### Installation

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/retro-grid.mdx

Install the Retro Grid component using either the CLI or manual setup.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @magicui/retro-grid
```

### Manual
1. Copy and paste the component code into your project.
2. Update the import paths to match your project setup.
3. No additional CSS is required.
```

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

### Bento Grid Example Setup

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/public/llms-full.txt

Imports necessary icons and components for creating a Bento Grid layout. Includes example data for files to be displayed within the grid.

```tsx
import { CalendarIcon, FileTextIcon } from "@radix-ui/react-icons"
import { BellIcon, Share2Icon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Calendar } from "@/components/ui/calendar"
import AnimatedBeamMultipleOutputDemo from "@/registry/example/animated-beam-multiple-outputs"
import AnimatedListDemo from "@/registry/example/animated-list-demo"
import { BentoCard, BentoGrid } from "@/registry/magicui/bento-grid"
import { Marquee } from "@/registry/magicui/marquee"

const files = [
  {
    name: "bitcoin.pdf",
    body: "Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.",
  },
  {
    name: "finances.xlsx",
    body: "A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.",
  },
  {
    name: "logo.svg",
    body: "Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.",
  },
  {
    name: "keys.gpg",
    body: "GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.",
  },
  {
    name: "seed.txt",
    body: "A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.",
  },
]

```

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

### Install Bento Grid using CLI

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/bento-grid.mdx

Installs the Bento Grid component into your project using the shadcn-ui CLI. This is the recommended method for quick setup.

```bash
npx shadcn@latest add @magicui/bento-grid
```

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

### Installation

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/cool-mode.mdx

Instructions for installing the Cool Mode component using either the CLI or manual setup.

```APIDOC
## Installation

### CLI Installation

Use the following command to add the component to your project:

```bash
npx shadcn@latest add @magicui/cool-mode
```

### Manual Installation

Copy and paste the component's source code into your project and update import paths as needed.

```tsx
// ComponentSource name="cool-mode"
// Update import paths to match your project setup.
```
```

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

### Install MagicUI Pointer via CLI

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/pointer.mdx

Installs the MagicUI Pointer component using the shadcn-ui CLI. This is the recommended method for quick setup.

```bash
npx shadcn@latest add @magicui/pointer
```

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

### Initialize Next.js Project with CLI

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/blog/creating-next-js-app.mdx

This command initiates the interactive setup wizard for a new Next.js application. It handles boilerplate generation, dependency installation, and configuration for TypeScript, ESLint, and the App Router.

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

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

### Install Animated Circular Progress Bar via CLI

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/animated-circular-progress-bar.mdx

Use the shadcn CLI to automatically add the component to your project. This is the recommended method for quick setup.

```bash
npx shadcn@latest add @magicui/animated-circular-progress-bar
```

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

### Initialize Project and Install Dependencies

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/blog/install-tailwind-css.mdx

Commands to scaffold a package.json file and install Tailwind CSS, PostCSS, and Autoprefixer as development dependencies.

```bash
npm init -y
npm install -D tailwindcss postcss autoprefixer
```

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

### Initialize React Project

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/blog/mui-table.mdx

Command to bootstrap a new React application using Next.js.

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

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

### Set Up Tailwind CSS in Next.js

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/blog/install-tailwind-css.mdx

Guides on setting up Tailwind CSS for Next.js projects. For new projects, `create-next-app` can handle the setup. For existing projects, it details manual installation and ensures the `content` path in `tailwind.config.js` includes necessary directories like `app`, `pages`, and `components`.

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

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx,mdx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

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

### Noise Texture Installation

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/noise-texture.mdx

Install the Noise Texture component using either the CLI or manual setup.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @magicui/noise-texture
```

### Manual
1. Copy and paste the component source code into your project.
2. Update the import paths to match your project setup.
```

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

### Installation

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/text-3d-flip.mdx

Install the Text 3D Flip component using either the CLI or manual installation.

```APIDOC
## Installation

Install the Text 3D Flip component using either the CLI or manual installation.

### CLI Installation

```bash
npx shadcn@latest add @magicui/text-3d-flip
```

### Manual Installation

1. Copy and paste the component code into your project.
2. Update the import paths to match your project setup.

<ComponentSource name="text-3d-flip" />
```

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

### Install shadcn CLI

Source: https://github.com/magicuidesign/magicui/blob/main/skills/magic-ui/references/components.md

Initializes shadcn in your project and adds Magic UI components. Ensure shadcn is initialized once per project. Components are added via the registry using their specific slug.

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

```bash
npx shadcn@latest add @magicui/<component-slug>
```

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

### Install Comic Text Component via CLI

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/comic-text.mdx

Installs the Comic Text component using the shadcn-ui CLI. This is the recommended method for quick setup.

```bash
npx shadcn@latest add @magicui/comic-text
```

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

### Install Backlight via CLI

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/backlight.mdx

Use the shadcn CLI to add the Backlight component to your project.

```bash
npx shadcn@latest add @magicui/backlight
```

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

### Install Magic UI Dependencies with npm

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/blog/create-nextjs-app.mdx

Installs essential libraries for animations, icons, and CSS class management required by Magic UI components. This is a one-time setup step.

```bash
npm i framer-motion lucide-react clsx tailwind-merge
```

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

### Grid Pattern Dashed Example

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/public/llms-full.txt

Provides a basic setup for a dashed Grid Pattern. Requires 'use client' directive.

```tsx
"use client"


```

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

### Rainbow Button Usage Example

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/public/llms-full.txt

Demonstrates how to use the default RainbowButton component. It renders a button with the text 'Get Unlimited Access'.

```tsx
import { RainbowButton } from "@/registry/magicui/rainbow-button"

export default function RainbowButtonDemo() {
  return <RainbowButton>Get Unlimited Access</RainbowButton>
}
```

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

### Initialize Vite React Project

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/blog/tailwind-landing-page-templates.mdx

Scaffolds a new React project using Vite and installs its dependencies. Replace 'my-landing-page' with your desired project name.

```bash
npm create vite@latest my-landing-page --template react
cd my-landing-page
npm install
```

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

### Install Highlighter via CLI

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/highlighter.mdx

Use the shadcn CLI to add the highlighter component to your project.

```bash
npx shadcn@latest add @magicui/highlighter
```

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

### Install iPhone Component via CLI

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/iphone.mdx

Use the shadcn CLI to automatically add the iPhone component to your project. This is the recommended method for most setups.

```bash
npx shadcn@latest add @magicui/iphone
```

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

### Avatar Circles Component Documentation

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/docs/components/avatar-circles.mdx

This section details the Avatar Circles component, its installation via CLI or manual setup, and its usage with available props.

```APIDOC
## Avatar Circles Component

### Description
Displays overlapping circles of avatars. This component is useful for showcasing multiple user profiles in a compact and visually appealing manner.

### Installation

#### CLI
```bash
npx shadcn@latest add @magicui/avatar-circles
```

#### Manual
Copy and paste the component code into your project and update the import paths as needed.

### Usage

Import the `AvatarCircles` component and use it with the provided props.

```tsx
import { AvatarCircles } from "@/components/ui/avatar-circles"
```

```tsx
<AvatarCircles
  numPeople={99}
  avatarUrls={[
    {
      imageUrl: "https://avatars.githubusercontent.com/u/16860528",
      profileUrl: "https://github.com/dillionverma",
    },
  ]} 
/>
```

### Props

| Prop        | Type     | Default | Description                                   |
| ----------- | -------- | ------- | --------------------------------------------- |
| `className` | `string` | `-`     | The class name to be applied to the component |
| `numPeople` | `number` | `99`    | The number appearing in the last circle       |
```

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

### Start Local Development Server

Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/content/blog/create-next-js-app.mdx

Command to launch the Next.js development server with hot-reloading enabled for rapid UI iteration.

```bash
npm run dev
```