Interactive MDX Components

This page demonstrates interactive MDX components in Quartz!

Counter Component

Here's an interactive counter - click the buttons to change the value:

Count: 5

-+

Alert Components

Different types of alerts:

ℹ️ Information

This is an informational alert. It's useful for tips and notes.

⚠️ Warning

Be careful! This is a warning message.

✅ Success

Great job! Something worked correctly.

Collapsible Section

Click to expand and collapse:

Click to reveal hidden content▼

Regular Markdown Still Works

• Bullet points
• Bold text
• Italic text
• Links

// Code blocks too!
const message = "Hello from MDX!"
console.log(message)

How It Works

These components are:

1. Server-rendered at build time for fast initial load
2. Hydrated on the client for interactivity
3. Fully typed with TypeScript

You can add your own components in quartz/mdx/components.tsx!