Cool Mode

Cool mode effect for buttons, links, and other DOMs

import { Button } from "@/components/ui/button"
import { CoolMode } from "@/registry/magicui/cool-mode"

export function CoolModeDemo() {
  return (
    <div className="relative justify-center">
      <CoolMode>
        <Button>Click Me!</Button>
      </CoolMode>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @magicui/cool-mode

Examples

Custom Particle

Open in

import { Button } from "@/components/ui/button"
import { CoolMode } from "@/registry/magicui/cool-mode"

export function CoolModeCustom() {
  return (
    <div className="relative justify-center">
      <CoolMode
        options={{
          particle:
            "https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg",
        }}
      >
        <Button>Click Me!</Button>
      </CoolMode>
    </div>
  )
}

Usage

import { CoolMode } from "@/components/ui/cool-mode"

<CoolMode>
  <button>Click me</button>
</CoolMode>

Props

Prop	Type	Default	Description
`particle`	`String`	`"circle"`	The particle URL for a custom particle
`size`	`Number`	`Varies`	Size of the particle
`particleCount`	`Number`	`Varies`	The number of particles to generate
`speedHorz`	`Number`	`Varies`	Horizontal speed of the particles
`speedUp`	`Number`	`Varies`	Upward speed of the particles

Credits

Credit to Bankk
Inspired by ClickFusion

Confetti Dock

On This Page

Installation Examples Custom Particle Usage Props Credits

Contribute

Limited Time Offer

Ship Faster with Magic UI Pro

Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.

Next.js 15 + TypeScript ready

Copy, paste, customize in minutes

Save 100+ hours of development

$199once

Get Lifetime Access

Trusted by 5,000+ developers

Cool Mode

Cool mode effect for buttons, links, and other DOMs

Open in

import { Button } from "@/components/ui/button"
import { CoolMode } from "@/registry/magicui/cool-mode"

export function CoolModeDemo() {
  return (
    <div className="relative justify-center">
      <CoolMode>
        <Button>Click Me!</Button>
      </CoolMode>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @magicui/cool-mode

Examples

Custom Particle

Open in

import { Button } from "@/components/ui/button"
import { CoolMode } from "@/registry/magicui/cool-mode"

export function CoolModeCustom() {
  return (
    <div className="relative justify-center">
      <CoolMode
        options={{
          particle:
            "https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg",
        }}
      >
        <Button>Click Me!</Button>
      </CoolMode>
    </div>
  )
}

Usage

import { CoolMode } from "@/components/ui/cool-mode"

<CoolMode>
  <button>Click me</button>
</CoolMode>

Props

Prop	Type	Default	Description
`particle`	`String`	`"circle"`	The particle URL for a custom particle
`size`	`Number`	`Varies`	Size of the particle
`particleCount`	`Number`	`Varies`	The number of particles to generate
`speedHorz`	`Number`	`Varies`	Horizontal speed of the particles
`speedUp`	`Number`	`Varies`	Upward speed of the particles

Credits

Credit to Bankk
Inspired by ClickFusion

Confetti Dock

On This Page

Installation Examples Custom Particle Usage Props Credits

Contribute

Limited Time Offer

Ship Faster with Magic UI Pro

Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.

Next.js 15 + TypeScript ready

Copy, paste, customize in minutes

Save 100+ hours of development

$199once

Get Lifetime Access

Trusted by 5,000+ developers