component / backgrounds

Grid Background

The signature 48-pixel technical grid with an adjustable scale and soft fade.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

grid background

INSTALL / SOURCE REGISTRY

Add Grid Background to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/grid-background.json

registry/default/recipes/grid-background.tsx

import * as React from "react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"

export function GridBackground({ children, className, size = 48, ...props }: React.HTMLAttributes<HTMLDivElement> & { size?: number }) {
  return <div className={cn("dos-background dos-bg-grid", className)} style={{ "--dos-grid-size": `${size}px`, ...props.style } as React.CSSProperties} {...props}>{children}</div>
}

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy