{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "example-with-css",
  "title": "Example with CSS",
  "description": "A login form with a CSS file.",
  "files": [
    {
      "path": "registry/new-york/blocks/example-with-css/example-card.tsx",
      "content": "import Link from \"next/link\";\nimport \"./example-card.css\";\n\nexport function ExampleCard() {\n\treturn (\n\t\t<div className=\"login-container\">\n\t\t\t<div className=\"login-card\">\n\t\t\t\t<h1 className=\"login-title\">Login</h1>\n\t\t\t\t<p className=\"login-subtitle\">\n\t\t\t\t\tPlease enter your credentials to continue\n\t\t\t\t</p>\n\t\t\t\t<form className=\"login-form\">\n\t\t\t\t\t<div className=\"form-group\">\n\t\t\t\t\t\t<label htmlFor=\"field-email\">Email</label>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid=\"field-email\"\n\t\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\t\tplaceholder=\"Enter your email\"\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"form-group\">\n\t\t\t\t\t\t<label htmlFor=\"field-password\">Password</label>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid=\"field-password\"\n\t\t\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t\t\tplaceholder=\"Enter your password\"\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"form-actions\">\n\t\t\t\t\t\t<button type=\"submit\" className=\"login-button\">\n\t\t\t\t\t\t\tSign In\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"form-footer\">\n\t\t\t\t\t\t<Link href=\"#\" className=\"forgot-password\">\n\t\t\t\t\t\t\tForgot password?\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/blocks/example-with-css/example-card.css",
      "content": ".login-container {\n\t--primary-color: #111111;\n\t--primary-hover: #484747;\n\t--error-color: #ef4444;\n\t--text-color: #1f2937;\n\t--text-light: #6b7280;\n\t--border-color: #e5e7eb;\n\t--background-light: #f9fafb;\n\t--card-shadow:\n\t\t0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tpadding: 1rem;\n\tbackground-color: var(--background-light);\n\twidth: 100%;\n}\n\n.login-card {\n\twidth: 100%;\n\tmax-width: 400px;\n\tpadding: 2rem;\n\tbackground-color: white;\n\tborder-radius: 8px;\n\tbox-shadow: var(--card-shadow);\n}\n\n.login-title {\n\tmargin: 0 0 0.5rem 0;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n\tcolor: var(--text-color);\n}\n\n.login-subtitle {\n\tmargin: 0 0 1.5rem 0;\n\tfont-size: 0.875rem;\n\tcolor: var(--text-light);\n}\n\n.login-form {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1.25rem;\n}\n\n.login-error {\n\tpadding: 0.75rem;\n\tmargin-bottom: 0.5rem;\n\tbackground-color: rgba(239, 68, 68, 0.1);\n\tborder-left: 3px solid var(--error-color);\n\tcolor: var(--error-color);\n\tfont-size: 0.875rem;\n\tborder-radius: 4px;\n}\n\n.form-group {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 0.5rem;\n}\n\n.form-group label {\n\tfont-size: 0.875rem;\n\tfont-weight: 500;\n\tcolor: var(--text-color);\n}\n\n.form-group input {\n\tpadding: 0.75rem;\n\tborder: 1px solid var(--border-color);\n\tborder-radius: 4px;\n\tfont-size: 1rem;\n\ttransition: border-color 0.15s ease;\n}\n\n.form-group input:focus {\n\toutline: none;\n\tborder-color: var(--primary-color);\n\tbox-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.form-group input::placeholder {\n\tcolor: var(--text-light);\n}\n\n.form-actions {\n\tmargin-top: 0.5rem;\n}\n\n.login-button {\n\twidth: 100%;\n\tpadding: 0.75rem;\n\tbackground-color: var(--primary-color);\n\tcolor: white;\n\tborder: none;\n\tborder-radius: 4px;\n\tfont-size: 1rem;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: background-color 0.15s ease;\n}\n\n.login-button:hover {\n\tbackground-color: var(--primary-hover);\n}\n\n.login-button:focus {\n\toutline: none;\n\tbox-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);\n}\n\n.form-footer {\n\tdisplay: flex;\n\tjustify-content: center;\n\tmargin-top: 1rem;\n}\n\n.forgot-password {\n\tfont-size: 0.875rem;\n\tcolor: var(--primary-color);\n\ttext-decoration: none;\n}\n\n.forgot-password:hover {\n\ttext-decoration: underline;\n}\n\n@media (max-width: 480px) {\n\t.login-card {\n\t\tpadding: 1.5rem;\n\t}\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}