MDX Components Demo

A demonstration of the custom MDX components available in Sundream Blog: Callout boxes and CodeFile blocks.

#meta #astro

This post demonstrates the custom MDX components available in this blog.

Callout Boxes

Use <Callout> to highlight important information:

Code Files

Use <CodeFile> to show code with a filename header:

playwright.config.ts typescript 
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  use: {
    baseURL: 'http://localhost:3000',
    screenshot: 'only-on-failure',
  },
});

Regular Code Blocks

You can also use regular fenced code blocks with syntax highlighting:

# Install Playwright
npm init playwright@latest

That’s it! These components are available in any .mdx file.