{
    "id": "bhaskar/dot-grid-pattern",
    "kind": "component",
    "title": "Dot Grid Pattern",
    "summary": "A white surface with a very faint dot grid, ideal for canvases and editors.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/dot-grid-pattern/",
    "stack": [],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "mit",
    "version": "1.0",
    "overview": "Tiny radial-gradient dots on a 22px grid. Low contrast so content stays readable.",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Backgrounds",
        "html": "<div class='bg'><span>Your content</span></div>",
        "css": ".bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;font:400 20px Georgia,serif;color:#1c1c1c;background:radial-gradient(rgba(0,0,0,.16) 1px,transparent 1.4px) 0 0/22px 22px,#fff}.bg span{position:relative}",
        "js": "",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}