MDX Components

All components exported by MdxComponents.tsx — used in MDX blog post rendering.

Headings

H1→h2, H2→h3, H3→h4, H4→h5 — intentional shift for blog post hierarchy.

Heading Level 1 (renders as h2)

Heading Level 2 (renders as h3)

Heading Level 3 (renders as h4)

Heading Level 4 (renders as h5)

Blockquote

Left-bordered italic blockquote, positioned in xl grid sidebar.

This is a blockquote with styled left border and italic text.

Strong & Del

Inline text emphasis — semibold and strikethrough.

This has bold text inline.

This has ~~deleted text~~ inline.

Lists

Unordered list with custom bullet styling, ordered list with decimals.

Unordered (Ul)

First item
Second item
Third item

Ordered (Ol)

First step
Second step
Third step

Links

Internal links use next/link, external links open in new tab.

Internal link → playground index

External link → github.com

Divider (Hr)

Styled horizontal rule with rose-tinted border.

Content above

Content below

Files

Nested file-tree renderer with folder/document icons.

personal-website

pages

index.tsx

playground

index.tsx

loading-states.tsx

MdxComponents.tsx

Layout.tsx

content

posts

hello-world.mdx

next.config.js

package.json

Img

Image with blur-to-sharp loading, optional bleed and caption.

Default with caption

Example image with blur loading and caption

Aside

Side annotation — positions left or right on xl screens, flows inline on smaller.

Left position, styled, with title

Note

This is an aside positioned to the left with styling enabled.

Right position, unstyled

Right-positioned aside without styling.

Code

Tabbed code block — scans children for rehype-pretty-code fragments, renders file-tab switcher.

Faked rehype structure (2 tabs)

Select a file

app/page.tsx

export default function Page() {
  return <h1>Hello</h1>
}

FauxTweet

Fake tweet skeleton UI — children render in the quoted tweet area.

This content renders inside the quoted tweet area. Use it for embedded references.

Playground

Centered bordered container for interactive demos in blog posts.

Content inside a Playground container.

This is the Playground wrapper — it centers and borders its children.

LoadingSkeleton

Shimmer skeleton card with animated gradient overlay. Also demo'd in loading-states.

StaticTweet

Placeholder — Twitter integration coming in Phase 4.

Tweet 1234567890 (Twitter integration coming in Phase 4)

LikeButton2

Placeholder — like button coming in Phase 6.

Like button for demo-post (coming in Phase 6)

LikeButtonDemo

Placeholder — like button demo coming in Phase 6.

Like button demo (coming in Phase 6)

Posts