MDX Component Gallery

Welcome to our component gallery! This page demonstrates all available MDX components and how to use them in your content.

#Text Styling Components

#Emphasis

Here's how to use emphasis in your content.

_This text will be emphasized_

#Strong Text

You can make text bold and important like this:

**This text will be bold**

#Blockquotes

You can create beautiful blockquotes like this:

This is a blockquote. It's perfect for highlighting important information or displaying quotes from other sources.

You can have multiple paragraphs too!

> Your quote text goes here

#Lists

Here's how our custom lists look:

First item with custom bullet
Second item that shows animation
Third item with hover effect
- Nested items work too
- With consistent styling

#Info Boxes

This is a standard info box. Use it for general information.

This is a warning box. Use it for important cautions.

This is an error box. Use it for critical information.

This is a success box. Use it for positive outcomes.

jsx

<InfoBox type="info">Your message here</InfoBox>
<InfoBox type="warning">Warning message</InfoBox>
<InfoBox type="error">Error message</InfoBox>
<InfoBox type="success">Success message</InfoBox>

#Callouts

💡

This is a callout with a lightbulb emoji. Perfect for tips and ideas!

⚠️

This is a warning callout. Use it when you need to catch the reader's attention.

jsx

<Callout emoji="💡">Your callout text here</Callout>

#Code Examples

You can use inline code like this.

Or create code blocks:

tsx

function Example() {
	return (
		<div>
			<h1>Hello World</h1>
		</div>
	)
}

#Keyboard Shortcuts

You can show keyboard combinations like this: ⌘ + S to save.

jsx

;<Kbd>⌘</Kbd> + <Kbd>S</Kbd>

#Demo Containers

Demo

This is a demo container. Use it to showcase examples or interactive components.

You can put any content here!

jsx

<Demo>Your demo content here</Demo>

#Tables

Tables are styled automatically:

Component	Usage	Example
InfoBox	Information display	Info, Warning, Error
Callout	Attention-grabbing notes	Tips, Warnings
Kbd	Keyboard shortcuts	⌘ + S

#Horizontal Rules

Here's a fancy gradient horizontal rule:

#Images

Images get special treatment with rounded corners and hover effects:

Footprints Camp Recap: A Running + Climate Camp

#Combining Components

You can combine components for rich content:

Here's how to combine components: - Use emphasized text - Add inline code - Include shortcuts

#Details Component

The Details component creates an expandable/collapsible section with a smooth animation. It's perfect for FAQs, additional information, or any content that should be hidden by default.

Prop	Type	Description
title	string	The text shown in the expandable header
children	ReactNode	The content revealed when expanded

#Examples

Basic Example

This content is hidden by default and will be revealed when clicked.

With Multiple Elements

💡

You can nest other MDX components inside Details!

Here's a list:

Item one
Item two

#StackBlitz Component

The StackBlitz component allows you to embed interactive code examples directly in your MDX content.

#Basic Example

StackBlitz Example

#Component Props

Prop	Type	Default	Description
id	string	required	The StackBlitz project ID
height	string	500px	Height of the embed
file	string	src/App.tsx	Initial file to open
view	"preview" \| "editor" \| "both"	both	Layout view mode
hideNavigation	boolean	true	Hide the top navigation bar
hideDevTools	boolean	false	Hide the bottom dev tools
hideExplorer	boolean	false	Hide the file explorer
hideTerminal	boolean	false	Hide the terminal
terminalHeight	number	undefined	Terminal height in pixels
devToolsHeight	number	undefined	DevTools height in pixels
theme	"dark" \| "light"	dark	Editor theme
clickToLoad	boolean	false	Load on click instead of immediately

#Configuration Examples

#Editor View

StackBlitz Example

#Preview Only View

StackBlitz Example

#Custom Layout Example

StackBlitz Example

#Implementation

mdx

// Basic usage

<StackBlitz id="vitejs-vite-ym2hon" />

// Custom configuration

<StackBlitz
	id="vitejs-vite-ym2hon"
	height="600px"
	file="src/main.tsx"
	view="editor"
	hideExplorer={true}
	theme="dark"
/>

// Preview focused

<StackBlitz
	id="vitejs-vite-ym2hon"
	view="preview"
	hideDevTools={true}
	hideTerminal={true}
/>

#Note

Performance: Use clickToLoad={true} for pages with multiple embeds
Height: Adjust height based on your content needs
View Mode: Choose appropriate view mode for your use case:
- editor: For code-focused examples
- preview: For result-focused examples
- both: For interactive tutorials
Initial File: Set file prop to focus on specific code
Theme: Match your site's theme using the theme prop

That's our complete component gallery! Check the source of this page to see exactly how each component is used.

#Best Practices

Use appropriate components for their intended purpose
Combine components thoughtfully
Keep accessibility in mind
Test your content in both light and dark modes