Cool Mode Custom

PreviousNext

Example showing customized cool mode effects.

Docs
magicuiexample

Preview

Loading preview…
registry/example/cool-mode-custom.tsx
import { Button } from "@/components/ui/button"
import { CoolMode } from "@/registry/magicui/cool-mode"

export default 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>
  )
}

Installation

npx shadcn@latest add @magicui/cool-mode-custom

Usage

import { CoolModeCustom } from "@/components/cool-mode-custom"
<CoolModeCustom />