Component Catalog

A comprehensive list of approved UI blocks for X-Files research entries. AI agents must strictly use these components to assemble MDX pages without writing custom CSS.

Layout Primitives

Basic containers and wrappers for constructing page layouts.

<Section>

A standard wide container with an optional title and description.

Section Content Simulated

Usage Snippet

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

<Card>

A styled container with borders, background, and optional hover effects.

Card Title

Card description

Usage Snippet

<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>

A responsive grid wrapper supporting 1 to 4 columns.

Col 1

Col 2

Col 3

Usage Snippet

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

Research Blocks

Pre-configured content patterns to highlight insights and analysis.

<KpiGrid>

Display a row of key performance indicators with optional trend indicators.

Total Revenue

$4.2M↑12%

Active Users

14,200−0%

Churn Rate

2.4%↓0.3%

Acquisition Cost

$42

Usage Snippet

<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>

A highlighted box with bullet points to draw attention to key takeaways.

Key Insights

Market growth is projected at 14% year-over-year globally.
Competitor expansion into APAC is accelerating.
Adoption among enterprise clients remains the strongest segment.

Usage Snippet

<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>

A standard 2x2 grid for Strengths, Weaknesses, Opportunities, and Threats.

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

Usage Snippet

<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']}
/>

Interactive Containers

Containers that hide or organize content into tabs or expandable drawers.

<Tabs> & <TabPane>

Clickable tabs to organize content horizontally without leaving the page.

Overview

General overview content.

Usage Snippet

<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>

Expandable native sections for FAQs or deep dives.

What are the regulatory risks?

Data residency laws mandate strict adherence to GDPR, limiting our current cloud deployment model across borders.

How does the new billing affect churn?

Early data suggests a 0.5% drop in structural churn due to more flexible payment methodologies introduced in Q4.

Usage Snippet

<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>

AstroWind UI Elements

Stylized lists, steps, and buttons matching the AstroWind aesthetic.

<Button>

A standard action button with primary, secondary, and ghost variants.

Usage Snippet

<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>

An unordered list featuring a blue checkmark SVG inline.

Seamless authentication integration without a database.
MDX processing allowing rich, interactive components natively.
Highly responsive and lightweight CSS grid methodologies.

Usage Snippet

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

<NumberedBoxes>

A step-by-step layout with stylized numerals connecting each block.

Step 1: Ingestion

Data fed into ETL.

Step 2: Processing

Models apply tagging.

Step 3: Verification

Analysts review.

Usage Snippet

<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> }
]} />

Timelines

Roadmap and progress visualization.

<RoadmapTimeline>

A vertical timeline to show strategic initiatives or product roadmap milestones.

Beta Launch

Q1 2026completed

Initial rollout.

Global Availability

Q2 2026in progress

Opening platform globally.

AI Module

Q3 2026planned

Integrate LLM workflows.

Usage Snippet

<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.' }
]} />

Data & Charts

Tables and recharts-based charting components.

<DataTableCard>

Q2 Financial Overview

Region	Revenue	Growth	Market Share
North America	$1.2B	+8%	42%
EMEA	$800M	+12%	28%
APAC	$650M	+24%	15%

Usage Snippet

<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>

User Growth Trend

Usage Snippet

<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> (Standard)

Revenue by Region

Usage Snippet

<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> (Stacked)

Cost Breakdown per Region

Usage Snippet

<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 }
  ]}
/>