Grid Pattern Pattern <path d='M.5 H V.5'/>. Prop squares: [col, row][] tinge le celle scelte con currentColor opacity 0.12.
Background Pattern
Esempio 01 Anteprima Codice
grid-pattern.tsx 001 Default · simple grid 002 Highlighted · selected cells 003 Dashed stroke · sketch feel tsx src/components/grid-pattern.tsx
import { useId } from "react";
import { cn } from "@/lib/utils";
export type GridPatternProps = {
width?: number;
height?: number;
x?: number;
y?: number;
/** Stroke dash like `"4 2"`. */
strokeDasharray?: string;
/** Highlight individual cells: each `[col, row]` gets a soft tint. */
squares?: [number, number][];
className?: string;
};
/**
* <GridPattern/> — crisp SVG line-grid background. Optional `squares`
* highlights individual cells with a soft tint to draw the eye.
*/
export function GridPattern({
width = 40,
height = 40,
x = -1,
y = -1,
strokeDasharray,
squares,
className,
}: GridPatternProps) {
const id = useId();
return (
<svg
aria-hidden
className={cn(
"pointer-events-none absolute inset-0 h-full w-full text-border",
className,
)}
>
<defs>
<pattern id={id} width={width} height={height} x={x} y={y} patternUnits="userSpaceOnUse">
<path
d={`M.5 ${height}V.5H${width}`}
fill="none"
stroke="currentColor"
strokeDasharray={strokeDasharray}
/>
</pattern>
</defs>
<rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
{squares?.map(([col, row], i) => (
<rect
key={`${col}-${row}-${i}`}
width={width - 1}
height={height - 1}
x={col * width + 1}
y={row * height + 1}
fill="currentColor"
opacity={0.12}
strokeWidth={0}
/>
))}
</svg>
);
}
Note — Le celle highlightate sono rect renderizzati DOPO il pattern, quindi sopra la griglia ma sotto il content. strokeDasharray utile per pattern punteggiati.
Prompt LLM 02 Incolla in Claude o ChatGPT per generare la tua variante. Include il contesto del brand, i token e i vincoli del progetto.
Sei un senior frontend engineer. Stai lavorando su un sito Next.js 16 + React 19 + Tailwind v4 in italiano, look chanhdai-inspired: colonna stretta 672px, Geist Sans + Geist Mono, hairline 1px, divisori a stripe diagonale, palette zinc.
Token CSS disponibili: --bg, --bg-alt, --fg, --fg-muted, --fg-soft, --border, --border-strong, --accent. Usa SEMPRE queste variabili tramite le utility tailwind generate (bg-bg, text-fg-muted, border-border, ecc.). Helper "cn" da "@/lib/utils". Niente librerie UI extra: solo lucide-react e tailwind-merge.
Genera un componente <GridPattern> SVG line-grid.
Props:
- width?: number, height?: number, x?, y?.
- strokeDasharray?: string.
- squares?: [number, number][] (cells da accendere).
- className?: string.
Implementazione:
- Server component, useId().
- <svg absolute inset-0 text-border> con <pattern id={id}><path d="M.5 {height}V.5H{width}" stroke="currentColor" fill="none" strokeDasharray={strokeDasharray}/></pattern> + <rect fill="url(#id)"/>.
- squares?.map(([col, row], i) → <rect x={col*width+1} y={row*height+1} width={width-1} height={height-1} fill="currentColor" opacity={0.12}/>).
Output: file completo src/components/grid-pattern.tsx.
Uso tipico 03 <GridPattern squares={[[1,2],[3,4]]} strokeDasharray="4 2" />
Dipendenze 04
Ti è servito? Dimmelo, oppure proponi il prossimo componente.
