Loading...
import { DotPattern } from "@/registry/aliimam/components/dot-pattern"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<DotPattern />
</div>
)
}
Loading...
import { DotPattern } from "@/registry/aliimam/components/dot-pattern"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<DotPattern dotSize={0.5} width={5} height={5} />
</div>
)
}
Loading...
import { DotPattern } from "@/registry/aliimam/components/dot-pattern"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<DotPattern cy={10} cx={10} height={100} width={100} dotSize={5} />
</div>
)
}
Loading...
import { DotPattern } from "@/registry/aliimam/components/dot-pattern"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<DotPattern height={50} width={50} dotSize={1} />
</div>
)
}
Loading...
import { DotPattern } from "@/registry/aliimam/components/dot-pattern"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<DotPattern dotSize={0.2} width={4} height={4} />
</div>
)
}
Installation
pnpm dlx shadcn@latest add https://aliimam.in/r/dot-pattern.json
Usage
import { DotPattern } from "@/components/ui/dot-pattern"<DotPattern />Props
| Prop | Type | Default |
|---|---|---|
| width | number | 20 |
| height | number | 20 |
| x | number | 0 |
| y | number | 0 |
| cx | number | 1 |
| cy | number | 1 |
| dotSize | number | 0.7 |
| className | string | — |
| fill | string | — |
| stroke | string | — |
| opacity | number | string | — |
| style | React.CSSProperties | — |
| id | string | — |
| onClick | (event: React.MouseEvent<SVGSVGElement>) => void | — |
| ...props | React.SVGProps<SVGSVGElement> | — |
savd