Magic UI

https://magicui.design/docs
Admin
Magic UI is a collection of re-usable components, blocks, and templates designed to help you build...
Tokens:132,829
Snippets:788
Trust Score:9.2
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies for Manual Setup

Source: https://magicui.design/docs/components/highlighter

Install the necessary dependencies for manual integration of the highlighter component.

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

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

### Install Hero Video Dialog via CLI

Source: https://magicui.design/docs/components/hero-video-dialog

Install the Hero Video Dialog component using the shadcn CLI. This is the recommended method for quick setup.

```bash
npx shadcn@latest add @magicui/hero-video-dialog
```

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

### Install Magic UI Components

Source: https://magicui.design/docs/components/hyper-text

Update import paths to match your project setup.

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

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

### Install Highlighter via CLI

Source: https://magicui.design/docs/components/highlighter

Install the highlighter component using the shadcn-ui CLI.

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

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

### Install Backlight Component via CLI

Source: https://magicui.design/docs/components/backlight

Install the Backlight component using the shadcn-ui CLI.

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

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

### Install Animated Grid Pattern via CLI

Source: https://magicui.design/docs/components/animated-grid-pattern

Use the shadcn-ui CLI to add the Animated Grid Pattern component to your project. This is the recommended installation method for quick setup.

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

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

### Install Safari Component via CLI

Source: https://magicui.design/docs/components/safari

Use the shadcn CLI to add the Safari component to your project. This is the recommended installation method.

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

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

### Install Text 3D Flip Component via CLI

Source: https://magicui.design/docs/components/text-3d-flip

Install the @magicui/text-3d-flip component using the shadcn-ui CLI.

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

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

### Install Text Reveal via CLI

Source: https://magicui.design/docs/components/text-reveal

Install the Text Reveal component using the shadcn-ui CLI.

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

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

### Install Meteors Component via CLI

Source: https://magicui.design/docs/components/meteors

Use the shadcn-ui CLI to add the Meteors component to your project. This is the quickest way to get started.

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

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

### Install Dependencies Manually

Source: https://magicui.design/docs/components/tweet-card

Install the required react-tweet package for manual setup.

```bash
npm install react-tweet
```

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

### Install Video Text via CLI

Source: https://magicui.design/docs/components/video-text

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

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

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

### Install iPhone Component via CLI

Source: https://magicui.design/docs/components/iphone

Use the shadcn-ui CLI to add the @magicui/iphone component to your project. This is the recommended installation method.

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

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

### Install Android Component

Source: https://magicui.design/docs/components/android

Use the CLI to add the Android component to your project.

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

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

### Install Dock via CLI

Source: https://magicui.design/docs/components/dock

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

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

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

### Install Smooth Cursor via CLI

Source: https://magicui.design/docs/components/smooth-cursor

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

```bash
npx shadcn@latest add @magicui/smooth-cursor
```

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

### Install HyperText Dependencies Manually

Source: https://magicui.design/docs/components/hyper-text

Manually install the 'motion' dependency required for the HyperText component.

```bash
npm install motion
```

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

### Install HyperText via CLI

Source: https://magicui.design/docs/components/hyper-text

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

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

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

### Install Number Ticker via CLI

Source: https://magicui.design/docs/components/number-ticker

Install the Number Ticker component using the shadcn-ui CLI.

```bash
npx shadcn@latest add @magicui/number-ticker
```

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

### Install Spinning Text via CLI

Source: https://magicui.design/docs/components/spinning-text

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

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

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

### Install Comic Text component

Source: https://magicui.design/docs/components/comic-text

Use the CLI to add the component to your project.

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

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

### Install Cool Mode via CLI

Source: https://magicui.design/docs/components/cool-mode

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

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

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

### Install Blur Fade via CLI

Source: https://magicui.design/docs/components/blur-fade

Install the Blur Fade component using the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @magicui/blur-fade
```

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

### Install Sparkles Text component

Source: https://magicui.design/docs/components/sparkles-text

Use the CLI to add the component to your project.

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

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

### Install Interactive Grid Pattern via CLI

Source: https://magicui.design/docs/components/interactive-grid-pattern

Use the shadcn-ui CLI to add the InteractiveGridPattern component to your project. Ensure you have the CLI installed.

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

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

### Install Warp Background via CLI

Source: https://magicui.design/docs/components/warp-background

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

```bash
npx shadcn@latest add @magicui/warp-background
```

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

### Install Morphing Text via CLI

Source: https://magicui.design/docs/components/morphing-text

Install the Morphing Text component using the shadcn CLI. This is the recommended method for quick integration.

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

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

### Install Border Beam via CLI

Source: https://magicui.design/docs/components/border-beam

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

```bash
npx shadcn@latest add @magicui/border-beam
```

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

### Install Dotted Map using CLI

Source: https://magicui.design/docs/components/dotted-map

Install the Dotted Map component using the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @magicui/dotted-map
```

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

### Install Animated Beam via CLI

Source: https://magicui.design/docs/components/animated-beam

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

```bash
npx shadcn@latest add @magicui/animated-beam
```

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

### Install Text Animate via CLI

Source: https://magicui.design/docs/components/text-animate

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

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

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

### Import GlareHover

Source: https://magicui.design/docs/components/glare-hover

Import the GlareHover component from its registry path. This is the initial setup step.

```tsx
import { GlareHover } from "@/registry/magicui/glare-hover"

```

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

### Initialize Project

Source: https://magicui.design/docs/installation

Run this command to set up a new Next.js project or configure an existing one for Magic UI.

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

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

### Render Noise Texture within a Container

Source: https://magicui.design/docs/components/noise-texture

Example of rendering the NoiseTexture component within a relative container. This setup ensures the texture overlays content correctly. Adjust container styles as needed.

```tsx
<div className="relative h-64 overflow-hidden rounded-lg border">
  <NoiseTexture />
</div>

```

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

### Install Orbiting Circles via CLI

Source: https://magicui.design/docs/components/orbiting-circles

Install the Orbiting Circles component using the shadcn-ui CLI. This is the recommended installation method.

```bash
npx shadcn@latest add @magicui/orbiting-circles
```

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

### Install Globe Dependencies Manually

Source: https://magicui.design/docs/components/globe

Install the necessary npm packages for the Globe component.

```bash
npm install cobe@0.6.4 motion
```

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

### Install File Tree via CLI

Source: https://magicui.design/docs/components/file-tree

Use the npx command to add the @magicui/file-tree package to your project.

```bash
npx shadcn@latest add @magicui/file-tree
```

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

### Install Confetti dependencies manually

Source: https://magicui.design/docs/components/confetti

Install the required canvas-confetti package manually before adding the component code.

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

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

### Install Terminal Component via CLI

Source: https://magicui.design/docs/components/terminal

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

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

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

### Install Bento Grid via CLI

Source: https://magicui.design/docs/components/bento-grid

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

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

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

### Install Particles Component via CLI

Source: https://magicui.design/docs/components/particles

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

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

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

### Install Lens Component via CLI

Source: https://magicui.design/docs/components/lens

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

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

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

### Install Icon Cloud via CLI

Source: https://magicui.design/docs/components/icon-cloud

Use the shadcn CLI to add the Icon Cloud component to your project.

```bash
npx shadcn@latest add @magicui/icon-cloud
```

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

### Install Magic UI MCP for Roo-Cline IDE

Source: https://magicui.design/docs/mcp

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

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

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

### Install Light Rays via CLI

Source: https://magicui.design/docs/components/light-rays

Use the shadcn-ui CLI to add the @magicui/light-rays package to your project.

```bash
npx shadcn@latest add @magicui/light-rays
```

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

### Install Magic UI MCP for Cline IDE

Source: https://magicui.design/docs/mcp

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

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

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

### Install Magic UI MCP for Claude IDE

Source: https://magicui.design/docs/mcp

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

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

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

### Install Magic UI MCP for Windsurf IDE

Source: https://magicui.design/docs/mcp

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

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

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

### Initialize WebGL Pipeline

Source: https://magicui.design/docs/components/retro-grid

Sets up the WebGL pipeline, including creating the program, buffer, and program info. Handles potential errors during initialization.

```typescript
const initializePipeline = () => {
      const nextGl = getContext()

      if (!nextGl) {
        releasePipeline(false)
        return false
      }

      gl = nextGl
      releasePipeline(true)
      gl = nextGl

      const program = createProgram(nextGl)

      if (!program) {
        return false
      }

      const nextProgramInfo = getProgramInfo(nextGl, program)

      if (!nextProgramInfo) {
        nextGl.deleteProgram(program)
        return false
      }

      const nextPositionBuffer = nextGl.createBuffer()

      if (!nextPositionBuffer) {
        nextGl.deleteProgram(program)
        return false
      }

      nextGl.bindBuffer(nextGl.ARRAY_BUFFER, nextPositionBuffer)
      nextGl.bufferData(
        nextGl.ARRAY_BUFFER,
        new Float32Array([-1, -1, 3, -1, -1, 3]),
        nextGl.STATIC_DRAW
      )

      positionBuffer = nextPositionBuffer
      programInfo = nextProgramInfo

      return true
    }
```

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

### Install Magic UI MCP for Cursor IDE

Source: https://magicui.design/docs/mcp

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

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

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

### Install Neon Gradient Card via CLI

Source: https://magicui.design/docs/components/neon-gradient-card

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

```bash
npx shadcn@latest add @magicui/neon-gradient-card
```
Tokens:
Raw