MDX Component Guide

This guide covers the custom MDX components available for Synth Studio documentation. These components ensure consistent styling and functionality across all documentation pages.

---

IconFeature

Display feature cards with icons in grid layouts.

Props

Prop	Type	Required	Description
iconstring	string	Yes	Icon name (e.g., "ShieldCheck", "Lock", "Bot")
titlestring	string	Yes	Feature title
childrenReactNode	node	Yes	Description content

Available Icons

ShieldCheck · Lock · Bot · BarChart · Sparkles · Building · BookOpen · Code · Shield · Database · Rocket · Settings · FileText · Users · CheckCircle

Usage

import { IconFeature, FeatureGrid } from "@site/src/components";

<FeatureGrid>
  <IconFeature icon="ShieldCheck" title="Privacy First">
    Mathematical privacy guarantees with differential privacy.
  </IconFeature>
  <IconFeature icon="Bot" title="AI-Powered">
    Smart suggestions and automated documentation.
  </IconFeature>
  <IconFeature icon="BarChart" title="Quality Metrics">
    Comprehensive statistical evaluation.
  </IconFeature>
</FeatureGrid>

Live Example

Privacy First

Mathematical privacy guarantees with differential privacy.

AI-Powered

Smart suggestions and automated documentation.

Quality Metrics

Comprehensive statistical evaluation.

---

Param

Display inline code-styled parameters with optional copy button.

Props

Prop	Type	Required	Default	Description
namestring	string	Yes	-	Parameter name
typestring	string	No	-	Type annotation
copyableboolean	boolean	No	true	Show copy button

Usage

import { Param } from "@site/src/components";

Set <Param name="epsilon" type="float" /> to configure the privacy budget.

The <Param name="SYNTH_STUDIO_SECRET_KEY" /> environment variable is required.

Live Example

Set epsilonfloat to configure the privacy budget (typically between 0.1 and 10.0).

The SYNTH_STUDIO_SECRET_KEY environment variable is required for authentication.

---

Badge

Display compliance badges for regulatory frameworks.

Props

Prop	Type	Required	Description
typestring	'HIPAA' | 'GDPR' | 'CCPA' | 'SOC2'	Yes	Badge type
hrefstring	string	No	Link to audit documentation

Usage

import { Badge, BadgeGroup } from "@site/src/components";

<BadgeGroup>
  <Badge type="HIPAA" />
  <Badge type="GDPR" />
  <Badge type="CCPA" />
  <Badge type="SOC2" />
</BadgeGroup>

Live Example

HIPAAGDPRCCPASOC 2

---

Page Template

Every documentation page should follow this template:

---
id: unique-doc-id
title: "Page Title"
sidebar_label: "Sidebar Label"
sidebar_position: 1
slug: /path/to/page
description: "SEO meta description (150-160 characters recommended)."
keywords: [keyword1, keyword2, keyword3]
tags: [category, feature]
---

import {
  IconFeature,
  FeatureGrid,
  Param,
  Badge,
  BadgeGroup,
} from "@site/src/components";

# Page Title

Brief introduction paragraph explaining what this page covers.

## Section Heading

Content with proper formatting...

### Subsection

More detailed content...

---

## Next Steps

- [Related Page 1](./related-page-1.md)
- [Related Page 2](./related-page-2.md)

Frontmatter Fields

Field	Required	Description
id	Yes	Unique identifier for sidebar linking
title	Yes	Page title (used in metadata and heading)
sidebar_label	Yes	Short label for sidebar navigation
sidebar_position	Yes	Ordering in sidebar (lower = higher)
slug	Yes	URL path for the page
description	Yes	SEO meta description
keywords	Recommended	SEO keywords array
tags	Recommended	Tags for categorization

---

Best Practices

1. Use FeatureGrid for features: Always wrap IconFeature components in FeatureGrid for proper layout.

2. Use Param for code references: Any configuration option, environment variable, or API parameter should use Param.

3. Group badges together: Use BadgeGroup to wrap multiple Badge components.

4. Keep descriptions concise: IconFeature descriptions should be 1-2 sentences maximum.

5. Use consistent icons: Refer to the available icons list above to maintain visual consistency.