← All blocks
Hero with product screen
hero · split-screen · hero-product-screen
npx shadcn@latest add @plus-ui/hero-product-screenDefault content
{
"eyebrow": {
"label": "New: retention cohorts in real time",
"href": "#"
},
"title": "See which features keep customers coming back",
"description": "Tessaly turns raw product events into retention, activation and revenue views your whole team can read — no SQL, no spreadsheets, no waiting on the data team.",
"actions": [
{
"label": "Start a 14-day trial",
"href": "#",
"variant": "primary"
},
{
"label": "Book a walkthrough",
"href": "#",
"variant": "secondary"
}
],
"proof": {
"label": "Trusted by product teams at",
"brands": [
"ostrelo",
"pellora",
"brindlebay",
"mosswell"
]
},
"media": {
"kind": "screen",
"screen": {
"product": "Tessaly",
"nav": [
"Overview",
"Retention",
"Funnels",
"Revenue",
"Segments"
],
"activeNav": 1,
"title": "Retention · last 12 weeks",
"kpis": [
{
"label": "Week-4 retention",
"value": "46.2%",
"delta": "+3.8 pts"
},
{
"label": "Active accounts",
"value": "12,480",
"delta": "+9.1%"
},
{
"label": "Expansion MRR",
"value": "$48.2k",
"delta": "+12.4%"
}
],
"chart": {
"title": "Weekly active accounts",
"points": [
38,
42,
40,
47,
51,
49,
56,
60,
58,
66,
71,
78
],
"labels": [
"Jul",
"Aug",
"Sep",
"Oct"
]
},
"rows": [
{
"name": "Shared dashboards",
"detail": "Used by 68% of retained accounts",
"value": "+18%",
"status": "positive"
},
{
"name": "Slack digests",
"detail": "Opened weekly by 4,210 users",
"value": "+11%",
"status": "positive"
},
{
"name": "CSV exports",
"detail": "Flat since the API launch",
"value": "0%",
"status": "neutral"
}
]
}
}
}