Component Reference
This page lists every custom component available in MDX pages. Components marked Global work in any .mdx file without an import. Components marked Import required need an explicit import statement at the top of your file.
Global Components (no import needed)
These are injected for all MDX pages via pages/_app.tsx.
Cards / Card
Use for navigation grids linking to other pages.
<Cards columns={2}>
<Card title="Getting Started" href="/mkio/getting-started" icon="fa-rocket">
Start here for first-time setup.
</Card>
<Card title="API Reference" href="/api-reference/media-api" icon="code" target="_blank" />
</Cards>Live example:
| Prop (Cards) | Description |
|---|---|
columns | Number of columns (1–4) |
| Prop (Card) | Description |
|---|---|
title | Card heading |
href | Link destination |
icon | Icon name (FontAwesome or Lucide) |
target | e.g. "_blank" |
children | Optional body text |
Callout
Use for tips, warnings, and important notes.
<Callout type="warning" title="Before you continue">
Verify your credentials before running this step.
</Callout>Live example:
Verify your credentials before running this step.
This is an info callout. Use it for general notes.
This is a success callout.
This is an error callout.
| Prop | Values |
|---|---|
type | info, warning, success, error (defaults to info) |
title | Heading text |
Accordion
Use for collapsible detail sections.
<Accordion title="What does this do?" defaultOpen={false}>
This explains the behavior in more detail.
</Accordion>Live example:
What does this do?
This explains the behavior in more detail. You can put any markdown content inside an accordion, including lists, code blocks, and other components.
| Prop | Description |
|---|---|
title | Heading |
defaultOpen | true or false |
icon / iconColor | Optional icon |
QuickLinks / QuickLink
Use for compact link lists with icons and optional badges.
<QuickLinks columns={2}>
<QuickLink title="Create asset filters" href="/mkio/how-to/content-management/create-an-asset-filter" icon="fa-filter" badge="Popular" />
<QuickLink title="Stream content" href="/mkio/how-to/content-delivery-publishing/stream-content" icon="tower-broadcast" />
</QuickLinks>Live example:
| Prop (QuickLink) | Description |
|---|---|
title | Link text |
href | Destination URL |
icon / iconColor | Icon |
badge | Optional label (e.g. "Popular") |
DecisionTree / DecisionOption
Use to guide readers to the right page based on intent.
<DecisionTree question="What do you want to do?">
<DecisionOption
title="Upload new content"
description="I want to upload local files."
href="/mkio/how-to/content-management/add-an-asset-in-mkio/import-files-from-your-device"
icon="fa-upload"
iconColor="blue-900"
/>
<DecisionOption
title="Stream existing content"
description="I already have assets and want to publish them."
href="/mkio/how-to/content-delivery-publishing/stream-content"
icon="tower-broadcast"
iconColor="green-700"
/>
</DecisionTree>Live example:
WorkflowCards / WorkflowCard
Use to visualize multi-step workflows.
<WorkflowCards columns={1}>
<WorkflowCard
title="VOD workflow"
icon="fa-film"
steps={[
{ title: "Upload", href: "/mkio/how-to/content-management/add-an-asset-in-mkio/import-files-from-your-device" },
{ title: "Encode", href: "/mkio/how-to/video-processing-encoding/configure-transformations" },
{ title: "Publish", href: "/mkio/how-to/content-delivery-publishing/stream-content" }
]}
/>
</WorkflowCards>Live example:
FeatureGrid / Feature
Use for feature highlights on overview pages.
<FeatureGrid columns={2}>
<Feature title="API-first" description="Everything is scriptable." icon="code" />
<Feature title="Multi-cloud" description="Run in your chosen cloud." icon="cloud" />
</FeatureGrid>Live example:
RelatedTopics / RelatedTopic
Use at the bottom of a page to suggest next reading.
<RelatedTopics title="Next steps">
<RelatedTopic category="How-To" title="Run VOD jobs" href="/mkio/how-to/video-processing-encoding/run-vod-transcode-jobs" icon="fa-clapperboard" />
<RelatedTopic category="Reference" title="Transform presets" href="/mkio/reference/encoding-transform-presets/encoding-transform" icon="fa-sliders" />
</RelatedTopics>Live example:
ApiEndpoint
Use to display a single API endpoint with parameters and body.
<ApiEndpoint
method="POST"
baseUrl="https://api.mk.io"
path="/v1/assets"
description="Create a new asset."
parameters={[{ name: "tenantId", description: "Your tenant ID" }]}
headers={[{ name: "Authorization", value: "Bearer <token>" }]}
body={{ name: "demo-asset", input: "https://example.com/video.mp4" }}
/>Live example:
https://api.mk.io/v1/assets<tenantId>Your tenant IDAuthorizationBearer token{
"name": "demo-asset",
"input": "https://example.com/video.mp4"
}Fa (Icon)
Inline icon component. Works with Lucide and FontAwesome names.
<Fa name="rocket" /> <Fa name="fa-cloud-arrow-down" /> <Fa name="code" />Live example:
Icon mapping lives in components/Fa.tsx.
Import-Required Components
Nextra Built-ins
Add this import at the top of your .mdx file:
import { Tabs, Steps } from 'nextra/components'Tabs
<Tabs items={['Option A', 'Option B']}>
<Tabs.Tab>Content for Option A</Tabs.Tab>
<Tabs.Tab>Content for Option B</Tabs.Tab>
</Tabs>Live example:
Steps
<Steps>
### First step
Do this first.
### Second step
Then do this.
</Steps>Live example:
Note: If you import
Calloutfromnextra/components, that page uses Nextra's version instead of the custom global Callout.
SVG Icons (@components/icons)
import { GearIcon, PlayIcon, WarningIcon } from '@components/icons'See components/icons/index.ts for the full list of available icons.
Import Path Rules
- Alias:
@components/*→components/*(configured intsconfig.json). - Relative imports also work:
../../components/api/ApiPage. - Always place imports at the top of the file, after frontmatter.