import { GridPattern } from "@/registry/aliimam/components/grid-pattern"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<GridPattern />
</div>
)
}
import { GridPattern } from "@/registry/aliimam/components/grid-pattern"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<GridPattern variant="large" />
</div>
)
}
import { GridPattern } from "@/registry/aliimam/components/grid-pattern"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<GridPattern variant="small" />
</div>
)
}
import { GridPattern } from "@/registry/aliimam/components/grid-pattern"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<GridPattern width={100} height={10} />
</div>
)
}
import { GridPattern } from "@/registry/aliimam/components/grid-pattern"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<GridPattern width={5} height={30} />
</div>
)
}
Installation
pnpm dlx shadcn@latest add https://aliimam.in/r/grid-pattern.json
Usage
import { GridPattern } from "@/components/ui/grid-pattern"<GridPattern />Props
| Prop | Type | Default |
|---|---|---|
| width | number | variant-based |
| height | number | variant-based |
| x | number | -1 |
| y | number | -1 |
| squares | Array<[number, number]> | — |
| strokeDasharray | string | "0" |
| variant | "default" | "small" | "large" | "default" |
| className | string | — |
| ...props | Record<string, unknown> | — |
savd