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 the Vite auto-import plugin configuration (no manual imports needed in .mdx files).

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:

Getting Started

Start here for first-time setup.

API Reference

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:

Before you continue

Verify your credentials before running this step.

Helpful tip

This is an info callout. Use it for general notes.

All done

This is a success callout.

Something went wrong

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:

Create asset filtersPopular

Stream content

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:

What do you want to do?

Upload new content

I want to upload local files.

Stream existing content

I already have assets and want to publish them.

---

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:

VOD workflow

1

Upload

2

Encode

3

Publish

---

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:

API-first

Everything is scriptable.

Multi-cloud

Run in your chosen cloud.

---

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:

Next steps

How-To

Run VOD jobs

Reference

Transform presets

---

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:

POSThttps://api.mk.io/v1/assets

Create a new asset.

Path Parameters

<tenantId>Your tenant ID

Headers

AuthorizationBearer token

Request Body

{
  "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.

---

Global Starlight Components (no import needed)

These standard Starlight components are also auto-imported for all .mdx content pages.

Tabs / TabItem

Use to present mutually exclusive alternatives (e.g. CLI vs API, or Bash vs PowerShell).

<Tabs>
  <TabItem label="Option A">Content for Option A</TabItem>
  <TabItem label="Option B">Content for Option B</TabItem>
</Tabs>

Live example:

Option A

Content for Option A — you can put any markdown here.

Option B

Content for Option B — this is the second tab.

---

Steps

Use to structure complex multi-step procedures where steps contain additional elements like code blocks or screenshots.

<Steps>
### First step
Do this first.

### Second step
Then do this.
</Steps>

Live example:

First step

Do this first.

Second step

Then do this.

---

Import-Required Assets

SVG Icons (@/components/icons or @components/icons)

If you need to render raw SVG icons explicitly, you can import them at the top of your .mdx file:

import { GearIcon, PlayIcon, WarningIcon } from '@/components/icons'

See src/components/icons/ for all available icons.

---

Import Path Rules

• Alias: @components/* points to src/components/*.
• Alias: @/* points to src/*.
• Always place manual import statements at the top of the file, after the frontmatter closing divider (---).