{"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":true,"minItems":2,"maxItems":6},"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},"periods[].id":{"type":"object","description":"","required":true},"periods[].label":{"type":"object","description":"","required":true},"periods[].stats":{"type":"object","description":"","required":true,"minItems":2,"maxItems":6},"periods[].stats[].change":{"type":"object","description":"","required":true},"periods[].stats[].trend":{"type":"object","description":"","required":true},"periods[].stats[].previousLabel":{"type":"object","description":"","required":true}},"exampleProps":{"badge":"Performance Timeline","heading":"Growth Progression","description":"Track our key metrics over different time periods","defaultPeriod":"monthly","periods":[{"id":"weekly","label":"Weekly","stats":[{"label":"New Signups","value":"1,284","change":12,"trend":"up","previousLabel":"last week"},{"label":"Active Sessions","value":"32,891","change":8,"trend":"up","previousLabel":"last week"},{"label":"Conversion Rate","value":"5.2%","change":3,"trend":"up","previousLabel":"last week"},{"label":"Support Tickets","value":"89","change":15,"trend":"down","previousLabel":"last week","inversePositive":true}]},{"id":"monthly","label":"Monthly","stats":[{"label":"New Signups","value":"5,432","change":24,"trend":"up","previousLabel":"last month"},{"label":"Active Sessions","value":"142,567","change":18,"trend":"up","previousLabel":"last month"},{"label":"Conversion Rate","value":"6.1%","change":7,"trend":"up","previousLabel":"last month"},{"label":"Support Tickets","value":"312","change":22,"trend":"down","previousLabel":"last month","inversePositive":true}]}]},"dependencies":["@opensite/ui"],"tags":["stats","metrics","tabs","timeline","periods","trends","analytics","dashboard","time-series"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. Each period's stats must include a numeric 'change' (percentage), a 'trend' of 'up' or 'down', and a 'previousLabel' for comparison context. Use 'inversePositive: true' for metrics where decrease is good (e.g. support tickets, error rates). Provide at least 2 time periods. The defaultPeriod must match an existing period id.","usageRequirements":{"requiredProps":["periods"],"propConstraints":{"periods":{"required":true,"minItems":2,"maxItems":6},"periods[].id":{"required":true,"note":"Unique string identifier for the period."},"periods[].label":{"required":true,"note":"Display label shown in the tab (e.g. 'Weekly', 'Monthly')."},"periods[].stats":{"required":true,"minItems":2,"maxItems":6},"periods[].stats[].change":{"required":true,"note":"Numeric percentage change value."},"periods[].stats[].trend":{"required":true,"note":"'up' or 'down'."},"periods[].stats[].previousLabel":{"required":true,"note":"Context label like 'last week'."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}}},"timestamp":"2026-06-27T20:12:14.262Z"}