{"success":true,"data":{"block":{"id":"stats-timeline-tabs","name":"Stats Timeline Tabs","title":"Stats Timeline Tabs","category":"Stats","categorySlug":"stats","description":"A tabbed stats display showing metrics across different time periods (weekly, monthly, quarterly, yearly). Features a badge header, centered tab navigation, and a responsive grid of stat cards with color-coded trend indicators. Each stat shows the value, percentage change, and comparison period. Ideal for analytics dashboards, performance reports, or any time-series data visualization.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288950/qqma1bduvtkiw0emx54p8faznbq8/stats-timeline-tabs-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288951/0n55r6asbot6nldpwksguhmqa8e0/stats-timeline-tabs-mobile.jpg"},"componentPath":"blocks/stats/stats-timeline-tabs.tsx","code":"import { StatsTimelineTabs } from \"@opensite/ui/blocks/stats/stats-timeline-tabs\";\n\nexport default function Demo() {\n  return (\n    <StatsTimelineTabs\n      badge=\"Performance Timeline\"\n      heading=\"Growth Progression\"\n      description=\"Track our key metrics over different time periods\"\n      defaultPeriod=\"monthly\"\n      periods={[\n        {\n          id: \"weekly\",\n          label: \"Weekly\",\n          stats: [\n            {\n              label: \"New Signups\",\n              value: \"1,284\",\n              change: 12,\n              trend: \"up\",\n              previousLabel: \"last week\",\n            },\n            {\n              label: \"Active Sessions\",\n              value: \"32,891\",\n              change: 8,\n              trend: \"up\",\n              previousLabel: \"last week\",\n            },\n            {\n              label: \"Conversion Rate\",\n              value: \"5.2%\",\n              change: 3,\n              trend: \"up\",\n              previousLabel: \"last week\",\n            },\n            {\n              label: \"Support Tickets\",\n              value: \"89\",\n              change: 15,\n              trend: \"down\",\n              previousLabel: \"last week\",\n              inversePositive: true,\n            },\n          ],\n        },\n        {\n          id: \"monthly\",\n          label: \"Monthly\",\n          stats: [\n            {\n              label: \"New Signups\",\n              value: \"5,432\",\n              change: 24,\n              trend: \"up\",\n              previousLabel: \"last month\",\n            },\n            {\n              label: \"Active Sessions\",\n              value: \"142,567\",\n              change: 18,\n              trend: \"up\",\n              previousLabel: \"last month\",\n            },\n            {\n              label: \"Conversion Rate\",\n              value: \"6.1%\",\n              change: 7,\n              trend: \"up\",\n              previousLabel: \"last month\",\n            },\n            {\n              label: \"Support Tickets\",\n              value: \"312\",\n              change: 22,\n              trend: \"down\",\n              previousLabel: \"last month\",\n              inversePositive: true,\n            },\n          ],\n        },\n        {\n          id: \"quarterly\",\n          label: \"Quarterly\",\n          stats: [\n            {\n              label: \"New Signups\",\n              value: \"18,921\",\n              change: 45,\n              trend: \"up\",\n              previousLabel: \"last quarter\",\n            },\n            {\n              label: \"Active Sessions\",\n              value: \"456,234\",\n              change: 32,\n              trend: \"up\",\n              previousLabel: \"last quarter\",\n            },\n            {\n              label: \"Conversion Rate\",\n              value: \"7.3%\",\n              change: 12,\n              trend: \"up\",\n              previousLabel: \"last quarter\",\n            },\n            {\n              label: \"Support Tickets\",\n              value: \"876\",\n              change: 28,\n              trend: \"down\",\n              previousLabel: \"last quarter\",\n              inversePositive: true,\n            },\n          ],\n        },\n        {\n          id: \"yearly\",\n          label: \"Yearly\",\n          stats: [\n            {\n              label: \"New Signups\",\n              value: \"72,456\",\n              change: 89,\n              trend: \"up\",\n              previousLabel: \"last year\",\n            },\n            {\n              label: \"Active Sessions\",\n              value: \"1.8M\",\n              change: 67,\n              trend: \"up\",\n              previousLabel: \"last year\",\n            },\n            {\n              label: \"Conversion Rate\",\n              value: \"8.9%\",\n              change: 34,\n              trend: \"up\",\n              previousLabel: \"last year\",\n            },\n            {\n              label: \"Support Tickets\",\n              value: \"2,341\",\n              change: 41,\n              trend: \"down\",\n              previousLabel: \"last year\",\n              inversePositive: true,\n            },\n          ],\n        },\n      ]}\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 slot for badge (overrides badge prop)","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},"periods":{"type":"array","description":"Array of time periods with their stats","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the period","required":true},"label":{"type":"object","description":"Display label for the period","typeLabel":"React.ReactNode","required":true},"stats":{"type":"array","description":"Stats for this time period","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"The label for the stat","typeLabel":"React.ReactNode","required":true},"value":{"type":"object","description":"The stat value (e.g., \"1,284\", \"32,891\", \"5.2%\")","typeLabel":"React.ReactNode","required":true},"change":{"type":"number","description":"The percentage change","required":true},"trend":{"type":"string","description":"Whether the trend is up or down","typeLabel":"\"up\" | \"down\"","required":true},"previousLabel":{"type":"object","description":"Label for the comparison period","typeLabel":"React.ReactNode","required":true},"inversePositive":{"type":"boolean","description":"If true, a downward trend is considered positive (e.g., for support tickets)","required":false},"className":{"type":"string","description":"Additional CSS classes for the stat card","required":false}},"typeLabel":"TimelineStat"},"typeLabel":"TimelineStat[]","required":true},"className":{"type":"string","description":"Additional CSS classes for the period","required":false}},"typeLabel":"TimePeriod"},"typeLabel":"TimePeriod[]","required":false},"tabsSlot":{"type":"object","description":"Custom slot for tabs content (overrides periods array)","typeLabel":"React.ReactNode","required":false},"defaultPeriod":{"type":"string","description":"Default selected period ID","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},"tabsClassName":{"type":"string","description":"Additional CSS classes for the tabs container","required":false},"tabsListClassName":{"type":"string","description":"Additional CSS classes for the tabs list","required":false},"statsGridClassName":{"type":"string","description":"Additional CSS classes for the stats grid","required":false},"statCardClassName":{"type":"string","description":"Additional CSS classes for stat cards","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","metrics","tabs","timeline","periods","trends","analytics","dashboard","time-series"],"performance":{},"importantUsageNotes":"Use this block only when you have real, verifiable performance data across multiple distinct time periods (e.g., weekly, monthly, quarterly, yearly). Supply 2–4 'periods', each containing exactly 4 'stats' to match the 4-column grid layout per tab. All stat 'value', 'change', and 'trend' fields must reflect actual tracked metrics — do not invent figures or percentage changes. Only use real, verifiable stat values from the system. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:30.307Z"}