{
  "slug": "scales",
  "name": "Scales & Borders",
  "description": "Symmetric repeating linear gradient borders and geometric scale dividers.",
  "summary": "Technical boundary elements and scale dividers that replace generic horizontal rules with an architectural, developer-console look. Built with CSS repeating linear gradients (315deg, a 1px line every 10px inside 14px x 14px tiles) and theme CSS custom properties (--pattern-line, --pattern), with no JavaScript runtime.",
  "category": "display",
  "tags": [
    "borders",
    "scales",
    "divider",
    "linear-gradient",
    "geometric",
    "pattern"
  ],
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "cssVars": {
    "light": {
      "pattern-line": "rgba(0, 0, 0, 0.16)",
      "pattern": "rgba(0, 0, 0, 0.12)"
    },
    "dark": {
      "pattern-line": "rgba(255, 255, 255, 0.1)",
      "pattern": "rgba(255, 255, 255, 0.08)"
    }
  },
  "version": "1.0.0",
  "createdDate": "2026-09-10",
  "updatedDate": "2026-09-10",
  "interactive": true,
  "supportsColor": false,
  "highlights": [
    "Pure CSS repeating-linear-gradient shader rendering with zero JavaScript overhead",
    "Zero cumulative layout shift (CLS 0.0) with GPU-accelerated compositing",
    "Three specialized geometric layout variants: HorizontalScale, VerticalScale, and Lines",
    "Themeable token variables (--pattern-line, --pattern) for seamless light/dark adaptation",
    "14px background tile with a 1px line repeating every 10px"
  ],
  "anatomy": [
    "<HorizontalScale> (40px horizontal ribbon with diagonal 315° repeating hatch marks)",
    "<VerticalScale> (40px vertical divider with diagonal 315° repeating hatch marks)",
    "<Lines> (56px horizontal scanline guide with high-density repeating lines)"
  ],
  "physics": {
    "engine": "CSS Repeating Gradient Shader",
    "description": "Zero-runtime GPU rasterized gradient stripes calculated via repeating linear-gradient geometry without layout repaints.",
    "parameters": [
      {
        "label": "Shader Angle",
        "value": "315deg diagonal"
      },
      {
        "label": "Tile Pitch",
        "value": "14px x 14px tile, 1px line every 10px"
      },
      {
        "label": "Hairline Weight",
        "value": "1px stroke (var(--pattern-line))"
      },
      {
        "label": "Horizontal Height",
        "value": "40px (h-10)"
      },
      {
        "label": "Lines Height",
        "value": "56px (h-14)"
      },
      {
        "label": "Runtime Overhead",
        "value": "0ms / Pure CSS"
      }
    ]
  },
  "accessibility": {
    "aria": "Renders an empty div with no role or ARIA attributes. Only className is accepted, so wrap it in an element with role=\"separator\" or aria-hidden=\"true\" if needed.",
    "reducedMotion": "Static CSS background gradient pattern; completely unaffected by motion preferences."
  },
  "guidelines": {
    "recommended": [
      "Technical panel dividers in developer tools, IDE views, and engineering dashboards",
      "Header and footer section breaks in technical documentation sites",
      "Visual framing boundaries around code editors, telemetry viewers, and terminal displays"
    ],
    "bestPractices": [
      "Define --pattern-line and --pattern in your theme root for consistent contrast across light and dark modes",
      "Use VerticalScale inside flex containers with h-full for crisp column separation",
      "Override the default h-10 / h-14 height or w-10 width with className"
    ]
  },
  "props": [
    {
      "name": "className",
      "type": "string",
      "defaultValue": "undefined",
      "description": "Additional CSS classes to customize dimensions, border colors, or pattern line token overrides."
    }
  ],
  "usage": "import { HorizontalScale, VerticalScale, Lines } from \"@/components/ui/scales\";\n\nexport function ScalesDemo() {\n  return (\n    <div className=\"space-y-4\">\n      <HorizontalScale />\n      <Lines />\n      <div className=\"flex h-32\">\n        <VerticalScale />\n      </div>\n    </div>\n  );\n}",
  "files": [
    {
      "name": "scales.tsx",
      "path": "registry/ui/scales.tsx",
      "code": "import { cn } from \"@/lib/utils\";\n\nexport const HorizontalScale = ({ className }: { className?: string }) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"h-10 w-full bg-[repeating-linear-gradient(315deg,var(--pattern-line)_0px,var(--pattern-line)_1px,transparent_1px,transparent_10px)] bg-size-[14px_14px] border-y border-(--pattern)\",\n        className\n      )}\n    />\n  );\n};\n\nexport const VerticalScale = ({ className }: { className?: string }) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"w-10 h-full bg-[repeating-linear-gradient(315deg,var(--pattern-line)_0px,var(--pattern-line)_1px,transparent_1px,transparent_10px)] bg-size-[14px_14px] border-x border-(--pattern)\",\n        className\n      )}\n    />\n  );\n};\n\nexport const Lines = ({ className }: { className?: string }) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"h-14 w-full bg-[repeating-linear-gradient(to_bottom,var(--pattern-line)_0,var(--pattern-line)_1px,transparent_1px,transparent_0.5rem)] border-y border-(--pattern)\",\n        className\n      )}\n    />\n  );\n};\n",
      "content": "import { cn } from \"@/lib/utils\";\n\nexport const HorizontalScale = ({ className }: { className?: string }) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"h-10 w-full bg-[repeating-linear-gradient(315deg,var(--pattern-line)_0px,var(--pattern-line)_1px,transparent_1px,transparent_10px)] bg-size-[14px_14px] border-y border-(--pattern)\",\n        className\n      )}\n    />\n  );\n};\n\nexport const VerticalScale = ({ className }: { className?: string }) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"w-10 h-full bg-[repeating-linear-gradient(315deg,var(--pattern-line)_0px,var(--pattern-line)_1px,transparent_1px,transparent_10px)] bg-size-[14px_14px] border-x border-(--pattern)\",\n        className\n      )}\n    />\n  );\n};\n\nexport const Lines = ({ className }: { className?: string }) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"h-14 w-full bg-[repeating-linear-gradient(to_bottom,var(--pattern-line)_0,var(--pattern-line)_1px,transparent_1px,transparent_0.5rem)] border-y border-(--pattern)\",\n        className\n      )}\n    />\n  );\n};\n",
      "type": "registry:ui",
      "target": "@ui/scales.tsx"
    }
  ],
  "type": "registry:ui",
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "title": "Scales & Borders"
}