Component Catalog

<Section 
  title="Section Title" 
  description="Section description goes here."
>
  Content goes here
</Section>

<Card className="p-6">
  <h3 className="font-bold text-lg mb-2">Card Title</h3>
  <p className="text-sm text-surface-500">
    Card description
  </p>
</Card>

<Grid cols={3} gap="lg">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</Grid>

<KpiGrid items={[
  { label: 'Total Revenue', value: '$4.2M', trend: { direction: 'up', value: '12%' } },
  { label: 'Active Users', value: '14,200', trend: { direction: 'flat', value: '0%' } },
  { label: 'Churn Rate', value: '2.4%', trend: { direction: 'down', value: '0.3%' } },
  { label: 'Acquisition Cost', value: '$42' }
]} />

<InsightBullets items={[
  'Market growth is projected at 14% year-over-year globally.',
  'Competitor expansion into APAC is accelerating.',
  'Adoption among enterprise clients remains the strongest segment.'
]} />

<SWOT
  strengths={['Strong brand recognition', 'Proprietary technology stack']}
  weaknesses={['High operational costs', 'Limited geographic reach']}
  opportunities={['Emerging markets expansion', 'Strategic partnerships']}
  threats={['New nimble competitors', 'Changing regulatory']}
/>

<CompanyCompareTable
  featuresList={['Public API', 'SSO', 'Custom Workflows', 'On-Prem Option']}
  companies={[
    { name: 'X-Files', hasFeature: [true, true, true, false] },
    { name: 'Competitor A', hasFeature: [true, false, true, true] },
    { name: 'Competitor B', hasFeature: [false, true, false, false] }
  ]}
/>

<Recommendations items={[
  'Roll out research publishing workflow for all teams.',
  'Set SLA alerts for failed external sync jobs.',
  'Introduce weekly audit review for security events.'
]} />

<Callout tone="warning" title="Compliance Reminder">
  Public links should be created only after legal approval for external sharing.
</Callout>

<References items={[
  { text: 'Q1 2026 Product Spec', url: 'https://example.com/spec' },
  { text: 'Security Incident Review - Feb 2026' }
]} />

<Tabs labels={['Overview', 'Technical Details', 'Pricing']}>
  <TabPane>
    <h4>Overview</h4>
    <p>General overview content.</p>
  </TabPane>
  <TabPane>
    <h4>Technical Details</h4>
    <p>Deep dive into architecture.</p>
  </TabPane>
  <TabPane>
    <h4>Pricing</h4>
    <p>Pricing discussion.</p>
  </TabPane>
</Tabs>

<Accordion>
  <AccordionItem title="What are the regulatory risks?">
    <p>Data residency laws mandate strict adherence...</p>
  </AccordionItem>
  <AccordionItem title="How does the new billing affect churn?">
    <p>Early data suggests a 0.5% drop in structural churn...</p>
  </AccordionItem>
</Accordion>

<div className="flex gap-4">
  <Button variant="primary">Primary Call to Action</Button>
  <Button variant="secondary">Secondary Link</Button>
  <Button variant="ghost">Ghost Button</Button>
</div>

<CheckmarkList items={[
  'Seamless authentication integration without a database.',
  'MDX processing allowing rich, interactive components natively.',
  'Highly responsive and lightweight CSS grid methodologies.'
]} />

<NumberedBoxes items={[
  { title: 'Step 1: Ingestion', description: <p>Data fed into ETL.</p> },
  { title: 'Step 2: Processing', description: <p>Models apply tagging.</p> },
  { title: 'Step 3: Verification', description: <p>Analysts review.</p> }
]} />

<RoadmapTimeline items={[
  { quarter: 'Q1 2026', title: 'Beta Launch', status: 'completed', description: 'Initial rollout.' },
  { quarter: 'Q2 2026', title: 'Global Availability', status: 'in-progress', description: 'Opening platform globally.' },
  { quarter: 'Q3 2026', title: 'AI Module', status: 'planned', description: 'Integrate LLM workflows.' }
]} />

<FeatureGrid>
  <Feature title="Role-Based Access" icon="🔐">Granular permission policies for research entries.</Feature>
  <Feature title="Audit Coverage" icon="🧾">Tracks public-sharing and external API activity.</Feature>
</FeatureGrid>

<FeatureList>
  <Feature>**Real-Time Processing**: Instant budget updates and claim processing</Feature>
  <Feature>**Automated Workflows**: Reduced manual intervention for common processes</Feature>
</FeatureList>

<ComparisonTable>
  <tbody>
    <Row><Cell><strong>Metric</strong></Cell><Cell><strong>Value</strong></Cell></Row>
    <Row><Cell>Average response time</Cell><Cell>320ms</Cell></Row>
    <Row><Cell>Monthly active teams</Cell><Cell>184</Cell></Row>
  </tbody>
</ComparisonTable>

<ImageGrid images={[
  {
    src: 'https://picsum.photos/id/1041/1200/700',
    alt: 'Single hero visual',
    caption: 'Single-image horizontal arrangement'
  }
]} />

<ImageGrid images={[
  { src: 'https://picsum.photos/id/1025/1200/700', alt: 'Two-image layout left' },
  { src: 'https://picsum.photos/id/1035/1200/700', alt: 'Two-image layout right' }
]} />

<ImageGrid images={[
  { src: 'https://picsum.photos/id/1011/1200/700', alt: 'Three-image layout one' },
  { src: 'https://picsum.photos/id/1018/1200/700', alt: 'Three-image layout two' },
  { src: 'https://picsum.photos/id/1021/1200/700', alt: 'Three-image layout three' }
]} />

<YouTubeHero
  videoId="dQw4w9WgXcQ"
  title="Platform Walkthrough"
  description="Hero-style embedded YouTube video with optional heading copy."
/>

<YouTubeSplit videoId="M7lc1UVf-VE" title="Demo + Notes">
  <Recommendations items={[
    'Show key feature outcomes while the demo plays.',
    'Add concise implementation notes beside the video.',
    'Keep side content scannable for mobile users.'
  ]} />
</YouTubeSplit>

<DataTableCard
  title="Q2 Financial Overview"
  columns={['Region', 'Revenue', 'Growth', 'Market Share']}
  data={[
    ['North America', '$1.2B', '+8%', '42%'],
    ['EMEA', '$800M', '+12%', '28%'],
    ['APAC', '$650M', '+24%', '15%']
  ]}
/>

<LineChartCard
  title="User Growth Trend"
  xAxisKey="month"
  lines={[{ key: 'users', color: 'var(--color-primary-500)', name: 'Active Users' }]}
  data={[
    { month: 'Jan', users: 4000 },
    { month: 'Feb', users: 4500 },
    { month: 'Mar', users: 5100 },
    { month: 'Apr', users: 6200 },
    { month: 'May', users: 7000 }
  ]}
/>

<BarChartCard
  title="Revenue by Region"
  xAxisKey="region"
  bars={[{ key: 'revenue', color: 'var(--color-primary-500)', name: 'Revenue (M)' }]}
  data={[
    { region: 'NA', revenue: 120 },
    { region: 'EMEA', revenue: 80 },
    { region: 'APAC', revenue: 50 }
  ]}
/>

<BarChartCard
  title="Cost Breakdown per Region"
  xAxisKey="region"
  bars={[
    { key: 'infrastructure', color: 'var(--color-primary-600)', name: 'Infrastructure', stackId: 'a' },
    { key: 'marketing', color: 'var(--color-primary-300)', name: 'Marketing', stackId: 'a' }
  ]}
  data={[
    { region: 'NA', infrastructure: 40, marketing: 25 },
    { region: 'EMEA', infrastructure: 30, marketing: 15 },
    { region: 'APAC', infrastructure: 20, marketing: 10 }
  ]}
/>

<PieChartCard
  title="Revenue Mix"
  data={[
    { name: 'Enterprise', value: 55, color: 'var(--color-primary-600)' },
    { name: 'SMB', value: 30, color: 'var(--color-primary-400)' },
    { name: 'Starter', value: 15, color: 'var(--color-primary-200)' }
  ]}
/>

<RadarChartCard
  title="Capability Benchmark"
  radarAxisKey="metric"
  radars={[
    { key: 'xfiles', color: 'var(--color-primary-600)', name: 'X-Files' },
    { key: 'market', color: 'var(--color-primary-300)', name: 'Market Avg' }
  ]}
  data={[
    { metric: 'Speed', xfiles: 92, market: 75 },
    { metric: 'Security', xfiles: 88, market: 72 },
    { metric: 'Scalability', xfiles: 85, market: 70 },
    { metric: 'UX', xfiles: 80, market: 74 }
  ]}
/>

# MDX Components Example 1: Foundations

<Section title="Layout Primitives">
  <Grid cols={2}><Card>...</Card><Card>...</Card></Grid>
</Section>

<Section title="Core Insight Blocks">
  <KpiGrid ... />
  <InsightBullets ... />
  <SWOT ... />
  <CompanyCompareTable ... />
  <Recommendations ... />
</Section>

<Section title="Interactive Components">
  <Tabs labels={['Overview','Risk','Execution']}><TabPane>...</TabPane></Tabs>
  <Accordion><AccordionItem title="...">...</AccordionItem></Accordion>
</Section>

# MDX Components Example 2: Data and Media

<Section title="Data Tables and Charts">
  <DataTableCard ... />
  <LineChartCard ... />
  <BarChartCard ... />
  <PieChartCard ... />
  <RadarChartCard ... />
</Section>

<Section title="Image and Video Blocks">
  <ImageGrid images={[...]} />
  <YouTubeHero videoId="..." />
  <YouTubeSplit videoId="..."><Recommendations ... /></YouTubeSplit>
</Section>

# MDX Components Example 3: Complete Coverage

<Callout tone="success" title="Coverage">...</Callout>
<Section title="All Components in One Page">
  <Grid><Card>...</Card></Grid>
  <KpiGrid ... />
  <InsightBullets ... />
  <SWOT ... />
  <CompanyCompareTable ... />
  <Recommendations ... />
  <Tabs ... /><Accordion ... />
  <CheckmarkList ... /><NumberedBoxes ... />
  <FeatureGrid ... /><FeatureList ... />
  <ComparisonTable><Row><Cell>...</Cell></Row></ComparisonTable>
  <RoadmapTimeline ... />
  <DataTableCard ... /><LineChartCard ... /><BarChartCard ... />
  <PieChartCard ... /><RadarChartCard ... />
  <ImageGrid ... /><YouTubeHero ... /><YouTubeSplit ... />
  <References ... />
</Section>