{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"surface-web","type":"registry:item","title":"Surface","description":"A foundational container that groups content on a distinct visual layer with shared background and elevation treatment.","files":[{"path":"snippets/web/surface.tsx","content":"import { Input, Label, Surface, TextField } from \"@heroui/react\";\n\nexport function SurfaceExample() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex flex-col gap-2\">\n        <p className=\"text-sm font-medium text-muted\">Transparent</p>\n        <Surface\n          className=\"flex min-w-[320px] flex-col gap-3 rounded-3xl border p-6\"\n          variant=\"transparent\"\n        >\n          <h3 className=\"text-base font-semibold text-foreground\">Surface Content</h3>\n          <TextField isRequired name=\"email\" type=\"email\">\n            <Label>Email</Label>\n            <Input className=\"w-[280px]\" placeholder=\"john@example.com\" />\n          </TextField>\n          <p className=\"text-sm text-muted\">\n            This is a default surface variant. It uses bg-surface styling.\n          </p>\n        </Surface>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <p className=\"text-sm font-medium text-muted\">Default</p>\n        <Surface className=\"flex min-w-[320px] flex-col gap-3 rounded-3xl p-6\" variant=\"default\">\n          <h3 className=\"text-base font-semibold text-foreground\">Surface Content</h3>\n          <TextField isRequired name=\"email\" type=\"email\" variant=\"secondary\">\n            <Label>Email</Label>\n            <Input className=\"w-[280px] border border-border/20\" placeholder=\"john@example.com\" />\n          </TextField>\n          <p className=\"text-sm text-muted\">\n            This is a default surface variant. It uses bg-surface styling.\n          </p>\n        </Surface>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <p className=\"text-sm font-medium text-muted\">Secondary</p>\n        <Surface className=\"flex min-w-[320px] flex-col gap-3 rounded-3xl p-6\" variant=\"secondary\">\n          <h3 className=\"text-base font-semibold text-foreground\">Surface Content</h3>\n          <TextField isRequired name=\"email\" type=\"email\">\n            <Label>Email</Label>\n            <Input className=\"w-[280px]\" placeholder=\"john@example.com\" />\n          </TextField>\n          <p className=\"text-sm text-muted\">\n            This is a secondary surface variant. It uses bg-surface-secondary styling.\n          </p>\n        </Surface>\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <p className=\"text-sm font-medium text-muted\">Tertiary</p>\n        <Surface className=\"flex min-w-[320px] flex-col gap-3 rounded-3xl p-6\" variant=\"tertiary\">\n          <h3 className=\"text-base font-semibold text-foreground\">Surface Content</h3>\n          <TextField isRequired name=\"email\" type=\"email\">\n            <Label>Email</Label>\n            <Input className=\"w-[280px]\" placeholder=\"john@example.com\" />\n          </TextField>\n          <p className=\"text-sm text-muted\">\n            This is a tertiary surface variant. It uses bg-surface-tertiary styling.\n          </p>\n        </Surface>\n      </div>\n    </div>\n  );\n}\n","type":"registry:file","target":"~/snippets/web/surface.tsx"}],"author":"heroui","dependencies":["@heroui/react"]}