← All blocks

Capabilities in tabs with a product visual

feature-tabs · tabbed-screen · feature-tabs-screen

npx shadcn@latest add @plus-ui/feature-tabs-screen

Default content

{
  "eyebrow": "Inside Tessaly",
  "title": "Four views that answer most product questions",
  "description": "Each one is a click away from the same events, so a dip in revenue leads straight to the funnel step and the cohort behind it.",
  "items": [
    {
      "label": "Overview",
      "icon": "activity",
      "title": "The week's numbers, before the standup",
      "text": "Active users, retention and revenue on one screen, refreshed every five minutes, with the accounts that moved most listed underneath.",
      "points": [
        "Updated every five minutes",
        "Annotations for releases",
        "Shareable read-only links"
      ],
      "link": {
        "label": "Tour the overview",
        "href": "#",
        "variant": "secondary"
      },
      "visual": {
        "kind": "screen",
        "screen": {
          "product": "Tessaly",
          "nav": [
            "Overview",
            "Funnels",
            "Retention",
            "Revenue",
            "Cohorts"
          ],
          "activeNav": 0,
          "title": "This week",
          "kpis": [
            {
              "label": "Weekly active",
              "value": "18,240",
              "delta": "+6.2%"
            },
            {
              "label": "Week-4 retention",
              "value": "41%",
              "delta": "+3 pts"
            },
            {
              "label": "Net revenue",
              "value": "$212k",
              "delta": "+9.4%"
            }
          ],
          "chart": {
            "title": "Weekly active users",
            "points": [
              42,
              48,
              46,
              55,
              58,
              54,
              63,
              67,
              70,
              74,
              79,
              86
            ],
            "labels": [
              "Jul",
              "Aug",
              "Sep",
              "Oct"
            ]
          },
          "rows": [
            {
              "name": "Ostrelo",
              "detail": "Upgraded to Growth",
              "value": "+$1,840",
              "status": "positive"
            },
            {
              "name": "Brindlebay",
              "detail": "Added 40 seats",
              "value": "+$960",
              "status": "positive"
            },
            {
              "name": "Talvik",
              "detail": "Usage down 32%",
              "value": "-$410",
              "status": "negative"
            }
          ]
        }
      }
    },
    {
      "label": "Funnels",
      "icon": "workflow",
      "title": "See the exact step where trials stall",
      "text": "Build a funnel from any events in seconds. The step losing the most people is flagged, with the sessions behind it one click away.",
      "points": [
        "Any event, any order",
        "Conversion windows per step",
        "Break down by plan or source"
      ],
      "link": {
        "label": "Explore funnels",
        "href": "#",
        "variant": "secondary"
      },
      "visual": {
        "kind": "funnel",
        "title": "Trial to paid",
        "caption": "Last 30 days",
        "funnel": {
          "steps": [
            {
              "label": "Signed up",
              "value": 100
            },
            {
              "label": "Created project",
              "value": 72
            },
            {
              "label": "Invited teammate",
              "value": 38
            },
            {
              "label": "Connected source",
              "value": 31
            },
            {
              "label": "Started paid plan",
              "value": 19
            }
          ]
        }
      }
    },
    {
      "label": "Retention",
      "icon": "users",
      "title": "Know which signups are still here in week eight",
      "text": "Weekly cohorts show retention as it settles, so you can tell a better onboarding from a lucky month.",
      "points": [
        "Weekly or monthly cohorts",
        "Compare any two segments",
        "Export to your warehouse"
      ],
      "link": {
        "label": "Read about cohorts",
        "href": "#",
        "variant": "secondary"
      },
      "visual": {
        "kind": "cohort",
        "title": "Retention by signup week",
        "caption": "% still active",
        "cohort": {
          "columns": [
            "W0",
            "W1",
            "W2",
            "W3",
            "W4",
            "W5",
            "W6"
          ],
          "rows": [
            {
              "label": "Aug 4",
              "values": [
                100,
                64,
                52,
                47,
                44,
                42,
                41
              ]
            },
            {
              "label": "Aug 11",
              "values": [
                100,
                66,
                55,
                49,
                46,
                44
              ]
            },
            {
              "label": "Aug 18",
              "values": [
                100,
                69,
                58,
                52,
                49
              ]
            },
            {
              "label": "Aug 25",
              "values": [
                100,
                71,
                61,
                55
              ]
            },
            {
              "label": "Sep 1",
              "values": [
                100,
                74,
                63
              ]
            }
          ]
        }
      }
    },
    {
      "label": "Revenue",
      "icon": "chart",
      "title": "Revenue tied to the product behaviour behind it",
      "text": "Connect billing once and see expansion, contraction and churn next to the features each account actually uses.",
      "points": [
        "Stripe and Tallybird sync",
        "MRR movements by cause",
        "Accounts at risk, ranked"
      ],
      "link": {
        "label": "See revenue views",
        "href": "#",
        "variant": "secondary"
      },
      "visual": {
        "kind": "chart",
        "title": "Revenue health",
        "caption": "Trailing 12 months",
        "chart": {
          "title": "Net revenue retention",
          "value": "118%",
          "delta": "+7 pts year over year",
          "points": [
            38,
            41,
            40,
            46,
            49,
            52,
            50,
            57,
            61,
            64,
            68,
            74
          ],
          "labels": [
            "Oct",
            "Jan",
            "Apr",
            "Jul",
            "Oct"
          ]
        }
      }
    }
  ]
}