Example 1: Foundations
Stable TSX example page for layout, insight, and interaction components.
Left Card
Use cards to group related insights.
Right Card
Cards work well inside responsive grids.
Usage Snippet
<Grid cols={2} gap="md">
<Card className="p-6">...</Card>
<Card className="p-6">...</Card>
</Grid>ARR
$4.2M↑12%
Churn
2.4%↓0.3%
NPS
56↑4pts
Payback
11 mo
Usage Snippet
<KpiGrid items={[...]} />Key Insights
- Enterprise expansion was the strongest growth driver in Q1.
- Retention gains were concentrated in self-serve to pro upgrades.
- Pricing simplification reduced onboarding drop-off.
Usage Snippet
<InsightBullets items={[
'Point one',
'Point two'
]} />Strengths
- Strong onboarding flow
- High product reliability
Weaknesses
- Limited integrations
- Regional support constraints
Opportunities
- Channel partnerships
- AI workflow automation
Threats
- Fast-moving competitors
- Pricing pressure
Usage Snippet
<SWOT strengths={[...]} weaknesses={[...]} opportunities={[...]} threats={[...]} />Use tabs for horizontal information segmentation.
Usage Snippet
<Tabs labels={['Overview', 'Risk']}>
<TabPane>...</TabPane>
</Tabs>What changed this quarter?
Retention improved after checkout simplification and revised trial messaging.
Where is execution risk highest?
Integration backlog remains the main dependency for enterprise expansion.
Usage Snippet
<Accordion> <AccordionItem title="...">...</AccordionItem> </Accordion>
1
Prioritize integration depth for enterprise deals.
2
Keep pricing architecture transparent across tiers.
3
Expand partner-led acquisition in APAC.
Usage Snippet
<Recommendations items={[
'Action 1',
'Action 2'
]} />