MDX Elements Showcase: A Complete Guide

This article showcases all the MDX elements you can use in your notes posts. Use this as a reference when writing your own content.

Typography Basics

Paragraphs and Inline Elements

Regular paragraphs are the foundation of any article. You can use bold text for emphasis, italic text for subtle emphasis, or bold and italic together. You can also use strikethrough for corrections.

Here's some inline code that stands out from regular text. It's perfect for mentioning variable names like useState or file names like package.json.

Links are styled beautifully: check out Tailwind CSS or Next.js documentation.

Headings Hierarchy

We support multiple heading levels. H2 gets a nice border underneath, while H3 and H4 are more subtle:

This is an H4 Heading

Use H4 for smaller subsections within your content.

Code Blocks

JavaScript Example

// A simple React component with hooks
import { useState, useEffect } from 'react'

export function Counter({ initialCount = 0 }) {
  const [count, setCount] = useState(initialCount)

  useEffect(() => {
    document.title = `Count: ${count}`
  }, [count])

  return (
    <div className="flex items-center gap-4">
      <button onClick={() => setCount(c => c - 1)}>-</button>
      <span className="text-2xl font-bold">{count}</span>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  )
}

TypeScript with Types

interface User {
  id: string
  name: string
  email: string
  role: 'admin' | 'user' | 'guest'
  createdAt: Date
}

async function fetchUser(id: string): Promise<User | null> {
  const response = await fetch(`/api/users/${id}`)
  
  if (!response.ok) {
    return null
  }
  
  return response.json()
}

Shell Commands

# Install dependencies
pnpm add tailwindcss @tailwindcss/typography

# Run development server
pnpm dev

# Build for production
pnpm build

JSON Configuration

{
  "name": "my-notes",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^16.0.0",
    "react": "^19.0.0"
  }
}

Lists

Unordered Lists

Here are some key features of our notes:

• Beautiful typography with Tailwind CSS
• Full dark mode support
• Syntax highlighting for code blocks
• Auto-generated table of contents
• Responsive design for all devices

Nested lists work too:

• Frontend Technologies
  • React and Next.js
  • Tailwind CSS
  • TypeScript
• Backend Technologies
  • Node.js
  • PostgreSQL
  • Redis

Ordered Lists

Follow these steps to set up your project:

1. Clone the repository
2. Install dependencies with pnpm install
3. Copy .env.example to .env.local
4. Configure your environment variables
5. Run pnpm dev to start developing

Blockquotes

"Any fool can write code that a computer can understand. Good programmers write code that humans can understand."

— Martin Fowler

Blockquotes are perfect for highlighting important information or citations from other sources.

Tables

Tables are great for comparing data or presenting structured information:

Another example with different data:

Horizontal Rules

Use horizontal rules to separate major sections:

Advanced Elements

Keyboard Shortcuts

Press Cmd + K to open the command palette, or Ctrl + S to save.

Highlighted Text

You can use highlighted text to draw attention to specific words or phrases in your content.

Abbreviations

The W3C maintains standards for the web, including HTML and CSS.

Images

Images are displayed with rounded corners and a subtle shadow:

Conclusion

This showcase demonstrates all the MDX elements available for your notes posts. Mix and match these elements to create engaging, well-structured content that's easy to read and navigate.

Remember:

• Use headings to create a clear hierarchy
• Break up long text with lists and code examples
• Use tables for structured data
• Add images to illustrate concepts
• Keep paragraphs focused and concise

Happy writing! 🚀