Component Showcase

Explore the enhanced component library available in Luma Docs, featuring interactive components, beautiful typography, and developer-friendly tools.

Code Components

Code Fences

Standard fenced code blocks (```language) are automatically transformed into our enhanced CodeBlock component with syntax highlighting and copy support:

function HelloWorld() {
  const message = "Hello, Luma Docs!";
  return <h1>{message}</h1>;
}

// Invoke to avoid unused var lint complaint in MDX processing context
HelloWorld();

Inline Code

Use the InlineCode component for short code snippets within text. You can also use Ctrl + C to show keyboard shortcuts.

Code Tabs

The CodeTabs component is perfect for showing the same functionality in different languages:

import React from 'react';

export function Button({ children, onClick }) {
  return (
    <button
      onClick={onClick}
      className="px-4 py-2 bg-blue-500 text-white rounded"
    >
      {children}
    </button>
  );
}

Content Components

Callouts

Callouts help highlight important information with semantic colors and icons:

Information

This is an informational callout. Use it to provide additional context or helpful tips to your readers.

Warning

This is a warning callout. Use it to alert users about potential issues or important considerations.

Success

This is a success callout. Use it to confirm successful operations or highlight positive outcomes.

Important

This is a danger callout. Use it for critical information that users must not ignore.

Pro Tip

This is a tip callout. Use it to share helpful advice or best practices with your readers.

Note

This is a note callout without a custom title. It automatically uses the type as the title.

Collapsibles

Collapsible sections help organize content and improve page readability:

This collapsible is open by default. You can put any content here, including other components, code blocks, or formatted text.

List items work great
Multiple paragraphs are supported
You can even nest other components

Typography Components

Headings

The typography system provides consistent styling for all heading levels:

H1: Main Page Title

H2: Major Section Header

H3: Subsection Header

H4: Minor Section Header

H5: Small Section Header

H6: Smallest Header

Text Styles

Bold text and italic text are supported, along with inline code and links.

This is a blockquote. Use it for highlighting quotes, testimonials, or important excerpts from other sources.

Interactive Examples

Combining Components

You can combine multiple components to create rich, interactive documentation:

Best Practice

Always validate your API inputs and handle errors gracefully.

interface User {
  id: string;
  name: string;
  email: string;
}

async function fetchUser(id: string): Promise<User> {
  try {
    const response = await fetch('/api/users/' + id);
    if (!response.ok) {
      throw new Error('Failed to fetch user');
    }
    return await response.json();
  } catch (error) {
    console.error('Error fetching user:', error);
    throw error;
  }
}

Warning

Remember to handle network errors and validate the response data before using it in your application.

Usage

Import any of these components in your MDX files:

import {
  Callout,
  Collapsible,
  CodeTabs,
  PageTitle,
  PageSubtitle,
} from "@/components";

<Callout type="info" title="Hello">
  This is how you use a callout!
</Callout>

All components are fully typed with TypeScript and designed to work seamlessly together. They follow consistent design patterns and accessibility best practices.

Next: Architecture & Build Pipeline