{
    "id": "bhaskar/prefix-input-group",
    "kind": "component",
    "title": "Prefix Input Group",
    "summary": "A website input with a monospace https:// prefix attached to the field.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/prefix-input-group/",
    "stack": [],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "mit",
    "version": "1.0",
    "overview": "An input group joining a muted prefix addon to a text field inside one rounded border, with a focus ring around the whole group.",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Other",
        "html": "<div class='ig'><label for='ig1'>Website</label><div class='ig-g'><span>https://</span><input id='ig1' type='text' placeholder='yourdomain.com'></div><p>Include the path after your domain.</p></div>",
        "css": ".ig{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.ig label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.ig-g{display:flex;height:40px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.ig-g:focus-within{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.ig-g span{display:grid;place-items:center;padding:0 12px;background:#fafafa;border-right:1px solid #e5e5e5;font:13.5px ui-monospace,Menlo,monospace;color:#404040}.ig-g input{flex:1;min-width:0;border:0;outline:0;padding:0 12px;font:inherit;font-size:14px;background:transparent}.ig-g input::placeholder{color:#a3a3a3}.ig p{margin:8px 0 0;font-size:12.5px;color:#737373}",
        "js": "",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}