Local Imports

You can import .tsx, .ts, .jsx, .js, .mdx, or .md files directly in your MDX pages. This lets you use custom React components and shared Markdown snippets alongside the built-in MDX components.

Basic usage

12345import { PricingTable } from '/components/pricing-table'

# Pricing

<PricingTable />

Import resolution

Holocron resolves imports using two rules:

Absolute imports (starting with `/`)

/ means the project root. Holocron probes the pages directory first, then the project root:

1import { Chart } from '/components/chart'

If your pagesDir is ./pages, this looks for:

./pages/components/chart.tsx (pages dir first)
./components/chart.tsx (project root fallback)

Relative imports

Relative paths resolve from the MDX file's directory:

1import { Badge } from '../components/badge'

How it works

Import detection is MDX-driven, not folder-based. There are no magic snippets/ or components/ directories. Any local file can be imported from any location.

At build time, Holocron:

Parses each MDX file to extract import statements
Resolves the imports against the filesystem
Generates a virtual module map so the imports work at render time

At dev time, adding or removing JS/TS importable files triggers HMR automatically. Markdown imports are resolved too, but edits to an MDX page are the most reliable way to refresh newly added Markdown snippets.

Supported extensions

The following extensions are tried in order: .tsx, .ts, .jsx, .js, .mdx, .md. You do not need to include the extension in the import path.

Example: shared snippets

A common pattern is a snippets/ directory for reusable content:

12345my-docs/
├── snippets/
│   └── install-command.tsx
├── getting-started.mdx
└── docs.json

123456789// snippets/install-command.tsx
export function InstallCommand() {
  return (
    <div>
      <div>npm install @holocron.so/vite</div>
      <div>pnpm add @holocron.so/vite</div>
    </div>
  )
}

12345import { InstallCommand } from '/snippets/install-command'

# Getting Started

<InstallCommand />