@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
51 lines • 1.8 kB
TypeScript
import React from "react";
/**
* DotBackground Component Props
* @param width The horizontal spacing between dots
* @param height The vertical spacing between dots
* @param x The x-offset of the entire pattern
* @param y The y-offset of the entire pattern
* @param cx The x-offset of individual dots
* @param cy The y-offset of individual dots
* @param cr The radius of each dot
* @param className Additional CSS classes to apply to the SVG container
* @param glow Whether dots should have a glowing animation effect
*/
interface DotBackgroundProps extends React.SVGProps<SVGSVGElement> {
width?: number;
height?: number;
x?: number;
y?: number;
cx?: number;
cy?: number;
cr?: number;
className?: string;
glow?: boolean;
[key: string]: unknown;
}
/**
* DotBackground Component
* A React component that creates an animated or static dot pattern background using SVG.
* The pattern automatically adjusts to fill its container and can optionally display glowing dots.
* @see DotBackgroundProps for the props interface.
* @example
* // Basic usage
* <DotBackground />
*
* // With glowing effect and custom spacing
* <DotBackground
* width={20}
* height={20}
* glow={true}
* className="opacity-50"
* />
*@summary Summary:
* - The component is client-side only ("use client")
* - Automatically responds to container size changes
* - When glow is enabled, dots will animate with random delays and durations
* - Uses Motion for animations
* - Dots color can be controlled via the text color utility classes
*/
export declare function DotBackground({ width, height, x, y, cx, cy, cr, className, glow, ...props }: DotBackgroundProps): import("react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=dot-background.d.ts.map