{"success":true,"data":{"block":{"id":"stats-bar-comparison","name":"Stats Bar Comparison","title":"Stats Bar Comparison","category":"Stats","categorySlug":"stats","description":"A visual comparison section featuring animated horizontal bar charts that compare platform metrics against industry averages. Each group displays a title and two bars with labels and values. Bars animate from 0 to their target width when scrolled into view. Ideal for competitive analysis, benchmark comparisons, or showcasing platform advantages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288930/pxzc1pdqynjduhm6z3j8eb6irlvg/stats-bar-comparison-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288931/c05qqffxc9bnl0f5tarsidnvpiey/stats-bar-comparison-mobile.jpg"},"componentPath":"blocks/stats/stats-bar-comparison.tsx","code":"import { StatsBarComparison } from \"@opensite/ui/blocks/stats/stats-bar-comparison\";\n\nexport default function Demo() {\n  return (\n    <StatsBarComparison\n      badge=\"Competitive Edge\"\n      heading=\"How We Compare\"\n      description=\"See how our platform outperforms industry benchmarks across key metrics\"\n      comparisons={[\n        {\n          title: \"Revenue Growth\",\n          bars: [\n            {\n              label: \"Our Platform\",\n              value: 89,\n              displayValue: \"$2.4M\",\n              color: \"bg-primary\",\n            },\n            {\n              label: \"Industry Average\",\n              value: 34,\n              displayValue: \"$920K\",\n            },\n          ],\n        },\n        {\n          title: \"Customer Retention\",\n          bars: [\n            {\n              label: \"Our Platform\",\n              value: 94,\n              displayValue: \"94%\",\n              color: \"bg-primary\",\n            },\n            {\n              label: \"Industry Average\",\n              value: 67,\n              displayValue: \"67%\",\n            },\n          ],\n        },\n        {\n          title: \"Time to Value\",\n          bars: [\n            {\n              label: \"Our Platform\",\n              value: 85,\n              displayValue: \"2 weeks\",\n              color: \"bg-primary\",\n            },\n            {\n              label: \"Industry Average\",\n              value: 35,\n              displayValue: \"6 weeks\",\n            },\n          ],\n        },\n        {\n          title: \"Support Response\",\n          bars: [\n            {\n              label: \"Our Platform\",\n              value: 92,\n              displayValue: \"< 1 hour\",\n              color: \"bg-primary\",\n            },\n            {\n              label: \"Industry Average\",\n              value: 45,\n              displayValue: \"24 hours\",\n            },\n          ],\n        },\n      ]}\n      animate={true}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content above the heading","typeLabel":"React.ReactNode","required":false},"badgeSlot":{"type":"object","description":"Custom badge slot (overrides badge)","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description content below the heading","typeLabel":"React.ReactNode","required":false},"comparisons":{"type":"array","description":"Array of comparison groups","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Title for the comparison group","typeLabel":"React.ReactNode","required":true},"bars":{"type":"array","description":"Bars to compare","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"The label for the bar","typeLabel":"React.ReactNode","required":true},"value":{"type":"number","description":"The value (0-100 for percentage width)","required":true},"displayValue":{"type":"object","description":"Display value text (e.g., \"$2.4M\", \"89%\")","typeLabel":"React.ReactNode","required":true},"color":{"type":"string","description":"Color class for the bar (e.g., \"bg-primary\", \"bg-emerald-500\")","required":false},"className":{"type":"string","description":"Additional CSS classes for the bar","required":false}},"typeLabel":"ComparisonBar"},"typeLabel":"ComparisonBar[]","required":true},"className":{"type":"string","description":"Additional CSS classes for the group","required":false}},"typeLabel":"ComparisonGroup"},"typeLabel":"ComparisonGroup[]","required":true,"minItems":2,"maxItems":6},"comparisonsSlot":{"type":"object","description":"Custom slot for rendering comparisons (overrides comparisons array)","typeLabel":"React.ReactNode","required":false},"animate":{"type":"boolean","description":"Whether to animate bars on scroll","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"comparisonsClassName":{"type":"string","description":"Additional CSS classes for the comparisons container","required":false},"groupCardClassName":{"type":"string","description":"Additional CSS classes for comparison group cards","required":false},"groupTitleClassName":{"type":"string","description":"Additional CSS classes for group titles","required":false},"barLabelClassName":{"type":"string","description":"Additional CSS classes for bar labels","required":false},"barValueClassName":{"type":"string","description":"Additional CSS classes for bar values","required":false},"barTrackClassName":{"type":"string","description":"Additional CSS classes for bar tracks","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"comparisons[].title":{"type":"object","description":"","required":true},"comparisons[].bars":{"type":"object","description":"","required":true,"count":2},"comparisons[].bars[].label":{"type":"object","description":"","required":true},"comparisons[].bars[].value":{"type":"object","description":"","required":true},"comparisons[].bars[].displayValue":{"type":"object","description":"","required":true},"comparisons[].bars[0].color":{"type":"object","description":"","pinnedValues":{"color":"bg-primary"}}},"exampleProps":{"badge":"Competitive Edge","heading":"How We Compare","description":"See how our platform outperforms industry benchmarks across key metrics","comparisons":[{"title":"Revenue Growth","bars":[{"label":"Our Platform","value":89,"displayValue":"$2.4M","color":"bg-primary"},{"label":"Industry Average","value":34,"displayValue":"$920K"}]},{"title":"Customer Retention","bars":[{"label":"Our Platform","value":94,"displayValue":"94%","color":"bg-primary"},{"label":"Industry Average","value":67,"displayValue":"67%"}]},{"title":"Time to Value","bars":[{"label":"Our Platform","value":85,"displayValue":"2 weeks","color":"bg-primary"},{"label":"Industry Average","value":35,"displayValue":"6 weeks"}]}],"animate":true},"dependencies":["@opensite/ui"],"tags":["stats","comparison","bars","charts","animated","benchmark","competitive","industry"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics or benchmark comparisons. Each comparison group requires a 'title' and exactly 2 bars. The bar 'value' is a NUMBER (0–100) controlling the animated bar width — it is NOT the displayed value (use 'displayValue' for the label shown to users). Use 'color: \"bg-primary\"' on the first bar to highlight your platform. Provide 2–6 comparison groups.","usageRequirements":{"requiredProps":["comparisons"],"propConstraints":{"comparisons":{"required":true,"minItems":2,"maxItems":6},"comparisons[].title":{"required":true,"note":"Metric category title."},"comparisons[].bars":{"required":true,"count":2,"note":"Exactly 2 bars per group."},"comparisons[].bars[].label":{"required":true,"note":"Bar label (e.g. 'Our Platform', 'Industry Average')."},"comparisons[].bars[].value":{"required":true,"note":"Integer 0–100 controlling bar width. Not the display value."},"comparisons[].bars[].displayValue":{"required":true,"note":"Human-readable metric value shown next to the bar."},"comparisons[].bars[0].color":{"pinnedValues":{"color":"bg-primary"},"note":"First bar should use bg-primary to highlight your platform."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}}},"timestamp":"2026-06-27T20:07:00.691Z"}