Merging Bubbles

A visual representation of merging bubbles with icons on either side and a plus sign in the center. It adjusts size and positions elements based on configuration. Use it as a background element in designs that require a dynamic, interactive feel.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/merging-bubbles

npx layro-cli add @nolly-studio/merging-bubbles

npx layro-cli add @nolly-studio/merging-bubbles

bunx layro-cli add @nolly-studio/merging-bubbles

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { useId } from "react"

import { cn } from "@/lib/utils"

interface MergingBubblesProps {
  size?: "xs" | "sm" | "md" | "lg"
  className?: string
  startIcon?: React.ReactNode
  endIcon?: React.ReactNode
  showPlus?: boolean
}