Background Pattern

Grid, dot, line, cross or diagonal background in pure CSS, colored from theme tokens, with edge fades and an optional highlight glow.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/background-pattern

First time? Add the @portfolio-kit registry to components.json

components.json

{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

Grid, dots, lines, cross and diagonal. Sparse patterns get stronger ink so every variant reads at the same weight.

Move the glow off-center with a CSS position to pull the eye toward a section title; the pattern takes on the accent around it.

Texture a single card, like a newsletter tile, with dots that fade out before the copy.