Background Pattern 30 - Radial dot burstPro

Centered CTA with an app icon at the heart of radiating dot rings that shrink and fade outward.

About Background Pattern 30

Centered CTA with an app icon at the heart of radiating dot rings that shrink and fade outward.

Background Pattern 30 is a background pattern block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 88 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • radial
  • burst
  • dots
  • cta

Installation

  1. Set up your project with npx chocolateui init and npx chocolateui login (see the installation guide).
  2. Run the Chocolate UI CLI:
npx chocolateui add background-pattern-30

Dependencies installed automatically: lucide-react.

Uses: button, reveal, utils.

Usage

import BackgroundPattern30 from "@/components/blocks/background-pattern-30"

export default function Page() {
  return <BackgroundPattern30 />
}

FAQ