Example 2: Data and Media
Stable TSX example page for tables, charts, and media blocks.
Regional Performance
| Region | Revenue | Growth | Net Margin |
|---|---|---|---|
| North America | $1.2B | +8% | 29% |
| EMEA | $0.8B | +11% | 25% |
| APAC | $0.65B | +22% | 21% |
Usage Snippet
<DataTableCard
columns={['Region','Revenue']}
data={[['NA','$1.2B']]}
/>Monthly Active Users
Usage Snippet
<LineChartCard xAxisKey="month" lines={[{ key: 'users', color: '...' }]} data={[...]} />Pipeline by Segment
Usage Snippet
<BarChartCard xAxisKey="segment" bars={[...]} data={[...]} />Revenue Mix
Usage Snippet
<PieChartCard data={[{ name: 'Enterprise', value: 58, color: '...' }]} />Capability Benchmark
Usage Snippet
<RadarChartCard radarAxisKey="metric" radars={[...]} data={[...]} />Usage Snippet
<ImageGrid images={[{ src: 'https://...', alt: '...' }]} />Product Walkthrough
Hero embed for a full-context demo.
Usage Snippet
<YouTubeHero videoId="M7lc1UVf-VE" title="Product Walkthrough" />