### Install Dependencies

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/CONTRIBUTING.md

Install all project dependencies using pnpm. Ensure you have pnpm installed globally.

```bash
pnpm i
```

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

### Add Example to Registry Examples

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/CONTRIBUTING.md

Export your example definition in the `registry/registry-examples.ts` file. Specify the example's name, description, type, registry dependencies, and file paths.

```typescript
export const examples: Registry = [
  // ... existing examples ...
  {
    name: "example-component-demo",
    description: "An example of the example-component",
    type: "registry:example",
    registryDependencies: ["example-component"],
    files: [
      {
        path: "registry/example/example-component-demo.tsx",
        type: "registry:example",
      },
    ],
  },
];
```

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

### Install EldoraUI CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/saas-landing-page-tutorial.mdx

Run this command to install the EldoraUI command-line interface for your project.

```bash
npx eldoraui init
```

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

### Install Photon Beam via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/photon-beam.mdx

Use the shadcn-ui CLI to add the Photon Beam component to your project. This is the recommended installation method.

```bash
npx shadcn@latest add "https://eldoraui.site/r/photon-beam"
```

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

### Install Map Component via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/map.mdx

Use the Shadcn CLI to add the Map component to your project. This is the recommended installation method.

```bash
npx shadcn@latest add @eldoraui/map
```

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

### Install EldoraUI Components

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/animated-landing-pages.mdx

Install the required EldoraUI components for your Next.js project using shadcn-ui.

```bash
npx shadcn@latest add @eldoraui/fade-text
npx shadcn@latest add @eldoraui/blur-in-text
npx shadcn@latest add @eldoraui/animated-shiny-button
npx shadcn@latest add @eldoraui/word-pull-up-text
npx shadcn@latest add @eldoraui/grid
npx shadcn@latest add @eldoraui/cobe-globe
```

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

### Install Dependencies

Source: https://github.com/karthikmudunuri/eldoraui/wiki/Home

Install necessary dependencies for Eldora UI: clsx, tailwind-merge, and tailwind-variants.

```bash
npm i clsx tailwind-merge tailwind-variants
```

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

### Install ScaleLetterText

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/text-animation-guide.mdx

Install the ScaleLetterText component. This component adds 3D scaling effects to individual letters on hover.

```bash
npx shadcn@latest add @eldoraui/scale-letter-text
```

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

### Install Safari Browser via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/safari-browser.mdx

Use the shadcn-ui CLI to add the Safari Browser component to your project.

```bash
npx shadcn@latest add @eldoraui/safari-browser
```

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

### Install GradualSpacingText

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/text-animation-guide.mdx

Install the GradualSpacingText component. This component reveals characters sequentially with adjusting spacing.

```bash
npx shadcn@latest add @eldoraui/gradual-spacing-text
```

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

### Install Grid Component

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/interactive-card-components.mdx

Use this command to add the Grid component to your project. Ensure you are using shadcn-ui.

```bash
npx shadcn@latest add @eldoraui/grid
```

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

### Install LiveButton via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/live-button.mdx

Use the shadcn-ui CLI to add the LiveButton component to your project.

```bash
npx shadcn@latest add @eldoraui/live-button
```

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

### Run Development Server

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/CONTRIBUTING.md

Start the Eldoraui development server. This command will compile and serve the project locally.

```bash
pnpm dev
```

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

### Install WordPullUpText Component

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/text-animation-guide.mdx

Install the WordPullUpText component using shadcn-ui. This is a prerequisite for using the WordPullUpText animation.

```bash
npx shadcn@latest add @eldoraui/word-pull-up-text
```

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

### Install DockText

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/text-animation-guide.mdx

Install the DockText component. This component mimics the macOS dock magnification effect on text.

```bash
npx shadcn@latest add @eldoraui/dock-text
```

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

### Install Animated Frameworks via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/animated-frameworks.mdx

Use the npx command to add the Animated Frameworks component to your project via the CLI.

```bash
npx shadcn@latest add @eldoraui/animated-frameworks
```

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

### Install FadeText Component

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/text-animation-guide.mdx

Install the FadeText component using shadcn-ui. This is required before implementing FadeText animations.

```bash
npx shadcn@latest add @eldoraui/fade-text
```

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

### Install Testimonial Slider via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/testimonal-slider.mdx

Use the command-line interface to add the Testimonial Slider component to your project.

```bash
npx shadcn@latest add @eldoraui/testimonal-slider
```

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

### Install Animated List via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/animated-list.mdx

Use the shadcn-ui CLI to add the @eldoraui/animated-list package to your project.

```bash
npx shadcn@latest add @eldoraui/animated-list
```

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

### Install iPhone 17 Pro via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/iphone-17-pro.mdx

Install the iPhone 17 Pro component using the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @eldoraui/iphone-17-pro
```

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

### Install Eldora UI MCP for Windsurf

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/mcp.mdx

Use this command to install the Eldora UI MCP server integration for the Windsurf IDE.

```bash
npx @karthikmudunuri/cli@latest install windsurf
```

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

### Install WavyText

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/text-animation-guide.mdx

Install the WavyText component. This component creates a continuous looping wave effect for each character.

```bash
npx shadcn@latest add @eldoraui/wavy-text
```

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

### Initialize shadcn/ui

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/introduction-to-eldoraui.mdx

Run this command to initialize shadcn/ui in your Next.js project if you haven't already. This is a prerequisite for installing EldoraUI components.

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

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

### Animated Frameworks Example

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

Demonstrates how to use the AnimatedFrameworks component. It accepts card titles and descriptions for display.

```tsx
import AnimatedFrameworks from "@/registry/eldoraui/animated-frameworks"

export function AnimatedFrameworksExample() {
  return (
    <AnimatedFrameworks
      cardTitle="Universal Compatibility"
      cardDescription="Works seamlessly with Next.js, React, HTML, Apple, GitHub, OpenAI, and more fits everywhere."
    />
  )
}
```

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

### Install Novatrix Background via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/novatrix-background.mdx

Use the shadcn-ui CLI to add the Novatrix Background component to your project.

```bash
npx shadcn@latest add @eldoraui/novatrix-background
```

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

### Install Eldora UI MCP for Cursor

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/mcp.mdx

Use this command to install the Eldora UI MCP server integration for the Cursor IDE.

```bash
npx @karthikmudunuri/cli@latest install cursor
```

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

### Install Eldora UI MCP for Claude

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/mcp.mdx

Use this command to install the Eldora UI MCP server integration for the Claude IDE.

```bash
npx @karthikmudunuri/cli@latest install claude
```

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

### Install iPad Component via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/ipad.mdx

Use this command to add the iPad component to your project using the CLI.

```bash
npx shadcn@latest add @eldoraui/ipad
```

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

### Install Logo Timeline via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/logo-timeline.mdx

Use the shadcn-ui CLI to add the Logo Timeline component to your project.

```bash
npx shadcn@latest add @eldoraui/logo-timeline
```

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

### Install Browser Component via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/browser.mdx

Use this command to quickly add the browser component to your project using the shadcn CLI.

```bash
npx shadcn@latest add @eldoraui/browser
```

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

### Install Blur In Text via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/blur-in-text.mdx

Use the Shadcn CLI to add the Blur In Text component to your project.

```bash
npx shadcn@latest add @eldoraui/blur-in-text
```

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

### Install Integrations Component via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/integrations.mdx

Use this command to quickly add the integrations component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add @eldoraui/integrations
```

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

### Install Hacker Background via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/hacker-background.mdx

Use the shadcn-ui CLI to add the Hacker Background component to your project.

```bash
npx shadcn@latest add @eldoraui/hacker-background
```

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

### Install Animated Badge via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/animated-badge.mdx

Use the shadcn-ui CLI to add the Animated Badge component to your project.

```bash
npx shadcn@latest add @eldoraui/animated-badge
```

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

### Blur In Text Demo

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

Example usage of the BlurInText component, demonstrating how to apply it with custom styling and text content.

```tsx
import { BlurInText } from "@/registry/eldoraui/blur-in-text"

export function BlurInTextDemo() {
  return (
    <BlurInText
      className="font-display text-center text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
      text="Blur In"
    />
  )
}
```

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

### Install Card Flip Hover via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/card-flip-hover.mdx

Use the shadcn-ui CLI to add the Card Flip Hover component to your project.

```bash
npx shadcn@latest add @eldoraui/card-flip-hover
```

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

### Install Font Weight Text Component via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/font-weight-text.mdx

Use the shadcn-ui CLI to add the @eldoraui/font-weight-text component to your project.

```bash
npx shadcn@latest add @eldoraui/font-weight-text
```

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

### Install GitHub Inline Comments via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/github-inline-comments.mdx

Use the npx command to add the GitHub Inline Comments component to your project.

```bash
npx shadcn@latest add @eldoraui/github-inline-comments
```

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

### Install Clerk OTP via CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/clerk-otp.mdx

Use this command to add the Clerk OTP component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add @eldoraui/clerk-otp
```

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

### Create Local Environment File

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/CONTRIBUTING.md

Create a .env.local file and set the NEXT_PUBLIC_APP_URL. This is necessary for the development server to run correctly.

```bash
touch .env.local && echo "NEXT_PUBLIC_APP_URL=http://localhost:3000" > .env.local
```

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

### Create Component Demo File

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/CONTRIBUTING.md

Create a demo file to showcase your new component. This file will be used in the documentation to display the component's usage.

```typescript
import ExampleComponent from '@/registry/eldoraui/example-component'

export default function ExampleComponentDemo() {
  return (
    <div className="relative justify-center">
      <ExampleComponent />
    </div>
  )
}
```

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

### Install SeparateAwayText

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/text-animation-guide.mdx

Install the SeparateAwayText component. This component dramatically separates two text elements vertically.

```bash
npx shadcn@latest add @eldoraui/seperate-away-text
```

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

### Terminal Component Example

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

Demonstrates the usage of the Terminal component with custom commands, steps, and localhost information. Ensure the component is imported correctly.

```tsx
import Terminal from "@/registry/eldoraui/terminal"

export default function TerminalDemo() {
  return (
    <main className="flex min-h-[60vh] items-center justify-center p-6">
      <div className="w-full max-w-3xl">
        <Terminal
          command="npx shadcn@latest add 'https://eldoraui.site/r/terminal'"
          steps={[
            { text: "~ Project name", bold: true },
            { text: " | terminal-demo" },
            { text: " | cd terminal-demo" },
            { text: "~ Installing UI components", bold: true },
            { text: " | ✓ eldoraui/terminal" },
          ]}
          pulseInterval={100}
          showLocalhost={true}
          hostBarTitle="localhost:3000"
          hostMessage="New App Created!"
        />
      </div>
    </main>
  )
}
```

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

### Install LetterPullUpText

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/text-animation-guide.mdx

Install the LetterPullUpText component using shadcn-ui. This component animates individual letters pulling up from below.

```bash
npx shadcn@latest add @eldoraui/letter-pull-up-text
```

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

### Install MultiDirectionSlideText

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/text-animation-guide.mdx

Install the MultiDirectionSlideText component. This component slides two text elements from opposite horizontal directions.

```bash
npx shadcn@latest add @eldoraui/multi-direction-slide-text
```

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

### Bad Button Component Example

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/AGENTS.md

An example of a poorly structured button component that lacks the proper EldoraUI structure and accessibility features.

```typescript
// ❌ Bad: Missing proper structure and accessibility
export function BadButton({ children, onClick }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  )
}
```

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

### Navigate to Project Directory

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/CONTRIBUTING.md

Change the current directory to the cloned eldoraui project folder.

```bash
cd eldoraui
```

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

### Install Eldora UI MCP for Cline

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/mcp.mdx

Use this command to install the Eldora UI MCP server integration for the Cline IDE.

```bash
npx @karthikmudunuri/cli@latest install cline
```

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

### Add Component to Documentation

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/CONTRIBUTING.md

Create an MDX file to document your new component. This file includes the component's title, description, and usage examples.

```markdown
---
title: Example Component
date: 2024-06-01
description: Example component for Eldora UI
author: eldoraui
published: true
---

<ComponentPreview name="example-component-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add "https://eldoraui.site/r/example-component"
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="example-component" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Add the required CSS animations</Step>

<Step>Add the following animations to your global CSS file inside the `@theme inline` block (e.g., `app/globals.css` or similar)</Step>

```css title="app/globals.css" {1-2,4-18}
--animate-example: example var(--duration) infinite linear;

@keyframes example {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
```

</Steps>

</TabsContent>

</Tabs>

## Props

| Prop    | Type     | Default  | Description                |
| ------- | -------- | -------- | -------------------------- |
| `color` | `String` | `"blue"` | The color of the component |
```

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

### Animated Badge Usage Example

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

Demonstrates how to use the AnimatedBadge component in a React application. This example shows a basic integration with custom text.

```typescript
import AnimatedBadge from "@/registry/eldoraui/animated-badge"

export function AnimatedBadgeDemo() {
  return (
    <div className="relative" suppressHydrationWarning>
      <AnimatedBadge
        text="Introducing Eldora ui"

```

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

### Install Eldora UI MCP for Roo-Cline

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/mcp.mdx

Use this command to install the Eldora UI MCP server integration for the Roo- Cline IDE.

```bash
npx @karthikmudunuri/cli@latest install roo-cline
```

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

### Install EldoraUI Component using shadcn CLI

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/blog/introduction-to-eldoraui.mdx

Add an EldoraUI component to your project using the shadcn CLI. This installs the component's source code directly into your project, similar to how shadcn/ui components are added.

```bash
npx shadcn@latest add @eldoraui/cobe-globe
```

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

### Notification List Example with Animated List

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/animated-list.mdx

Implement a notification feed using the AnimatedList component. This example demonstrates how to map an array of notification data to animated list items, including custom configurations for spacing and animation.

```tsx
const notifications = [
  { name: "Location", message: "Thomas has arrived home", time: "2h ago" },
  { name: "Fitness", message: "Daily step goal reached!", time: "1h ago" },
  { name: "Calendar", message: "Team meeting in 30 minutes", time: "45m ago" },
  // ... more notifications
]

<div className="relative h-[400px] w-full overflow-hidden rounded-lg border bg-background">
  <AnimatedList
    stackGap={20}
    columnGap={85}
    scaleFactor={0.05}
    scrollDownDuration={5}
    formationDuration={1}
  >
    {notifications.map((notification, index) => (
      <div
        key={index}
        className="flex w-full max-w-[350px] items-center gap-4 rounded-2xl border bg-card p-4 shadow-sm"
      >
        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-500 text-white text-sm font-medium">
          {notification.name.charAt(0)}
        </div>
        <div className="flex flex-1 flex-col">
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium">{notification.name}</span>
            <span className="text-xs text-muted-foreground">{notification.time}</span>
          </div>
          <span className="text-sm text-muted-foreground">{notification.message}</span>
        </div>
      </div>
    ))}
  </AnimatedList>
</div>
```

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

### LiveButton with Background Example

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/live-button.mdx

Demonstrates using the LiveButton within a div that has a gradient background.

```tsx
<div className="flex h-screen w-full items-center justify-center bg-gradient-to-br from-black/90 to-black">
  <LiveButton text="Get Started" url="https://example.com" />
</div>

```

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

### Import and Use Map Component

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/installation/index.mdx

Example of how to import and use the Map component in your React application.

```tsx
import { Map } from "@/components/eldoraui/map"

export default function Home() {
  return <Map />
}
```

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

### Terminal Component Usage Example

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/terminal.mdx

Demonstrates how to use the Terminal component with various props, including commands, steps, and localhost notification settings.

```tsx
<Terminal
  command="npx shadcn@latest add 'https://eldoraui.site/r/terminal'"
  steps={[
    { text: "~ Project name", bold: true },
    { text: " | terminal-demo" },
    { text: " | cd terminal-demo" },
    { text: "~ Installing UI components", bold: true },
    { text: " | ✓ eldoraui/terminal" },
  ]}
  pulseInterval={100}
  showLocalhost={true}
  hostBarTitle="localhost:3000"
  hostMessage="New App Created!"
/>
```

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

### Render Animated Badge with Link

Source: https://github.com/karthikmudunuri/eldoraui/blob/main/apps/www/content/docs/components/animated-badge.mdx

Example of rendering the AnimatedBadge component with text, color, and a link.

```tsx
<AnimatedBadge
  text="Introducing Eldora ui"
  color="#22d3ee"
  href="/docs/components/animated-badge"
/>

```