Docs
Dot Backgroud
Dot Backgroud
A dot Backgroud
Installation
Copy and paste the cn util code into your project.
import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the dot code into your project.
API Reference
Props
| Prop | Type | Description |
|---|---|---|
| color | string | Dot color. |
| size | number | Dot size. |
| spacing | number | Dot spacing |
| children | React.ReactNode | The content of the Dot. |
| className | string | Additional classes for the Dot. |
| style | React.CSSProperties | Additional style for the Dot. |
| gradient | boolean | Whether to show the gradient or not |
| gradientWidth | number | string | The width of the gradient on either side |
| gradientHeight | number | string | The height of the gradient on either side |
Usage
export function DotDemo() {
return (
<div className="size-full">
<Dot gradient={false} />
</div>
)
}