Skip to main content

​
Mintlify Component Gallery

Component Gallery

​
Overview

This page showcases all the Mintlify components available for MNKY MIND documentation. Use this as a reference when creating or updating documentation pages.
Copy and paste the examples from this gallery to use them in your own documentation.

​
Basic Components

​
Cards

Cards are used to highlight key information or group related content.

Single Card Example

This is a single card that can contain any content, including text, lists, and even code blocks.

​
Card Groups

First Card

Use cards in groups to organize content

Second Card

Each card can have its own icon

Third Card

And they can be arranged in columns

​
Linked Cards

Documentation Guide

Internal link to another documentation page

External Resource

External link that opens in a new tab

​
Tabs

Tabs are useful for presenting alternative content or different variations of the same concept.
  • TypeScript
  • JavaScript
  • Python
function greet(name: string): string {
  return `Hello, ${name}!`;
}

​
Steps

Steps are used for sequential processes or instructions.
1

First Step

This is the first step in the process. You can include any content here.
npm install @moodmnky/ui-components
2

Second Step

After completing the first step, move on to this one.
  • You can include lists
  • And other formatted content
3

Final Step

Complete the process with this last step.
You can even nest other components inside steps.

​
Accordions

Accordions are useful for hiding lengthy content that not all users need to see.
Basic information that expands when clicked.
  • You can include any content inside
  • Including lists, code, and other elements
More detailed information for advanced users.
// Advanced code example
const advancedOptions: AdvancedOptions = {
  enableFeature: true,
  logLevel: "debug",
  customHandlers: [
    new EventHandler("event", async (evt) => {
      await processEvent(evt);
    })
  ]
};

​
Callouts

Various callout styles to highlight different types of information.
This is a standard note for general information and tips.
This is a warning to alert users about potential issues or important considerations.
This is an info box for additional context that might be helpful.
This is a tip to provide best practices or shortcuts.
This is a success message to confirm that something works correctly.
This highlights critical information that could cause serious problems if ignored.

​
Code Components

​
Code Blocks

Standard code blocks with syntax highlighting. 
// TypeScript example
interface User {
  id: string;
  name: string;
  email: string;
  preferences: {
    theme: 'light' | 'dark' | 'system';
    notifications: boolean;
  };
}

function updateUserTheme(userId: string, theme: 'light' | 'dark' | 'system'): Promise<User> {
  return api.users.update(userId, {
    preferences: {
      theme
    }
  });
}

​
Code Block with Title

src/api/users.ts
// Code with a filename title
export async function getUser(userId: string): Promise<User> {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.statusText}`);
  }
  return response.json();
}

​
Code Block with Line Highlighting

src/components/UserProfile.tsx
import { useState, useEffect } from 'react';

// These highlighted lines show the important part
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    // Rest of the component
  }, [userId]);
  
  // Component rendering logic
}

​
Diagrams

​
Mermaid Diagrams

Mermaid can be used to create various types of diagrams.

​
Sequence Diagram

​
Flowchart

​
Images and Media

​
Standard Image

Example image

​
Styled Image

Example image with styling

​
Image with Caption

​
Layout Components

​
Two-Column Layout

This is the left column. You can put any content here.
  • List item 1
  • List item 2
  • List item 3
This is the right column. You can put different content here.
const rightColumnExample = "Code in right column";

​
Frame

Framed screenshot

​
Frame with Caption

Framed screenshot with caption

Figure 2: Screenshot of the application interface

​
Interactive Components

​
API Reference

​
user
object
User object containing all user data

​
Parameters

​
filter
string
Filter results by specific criteria
​
limit
number
default:"10"
Maximum number of results to return
​
Authorization
string
required
Bearer token for authentication

​
Expandable Section

​
Tables

​
Standard Table

NameTypeDescription
idstringUnique identifier
namestringDisplay name
created_attimestampCreation date and time
statusenumStatus (active, inactive, pending)
PropertyTypeDefaultDescription
enableFeaturebooleanfalseWhether to enable the feature
maxItemsnumber10Maximum number of items to display
itemTypestring”default”Type of items to display (default, compact, detailed)
onSelectfunctionundefinedCallback function invoked when an item is selected

​
Advanced Components

​
Math Equations

Math can be written in LaTeX format: 
$$
f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi) e^{2\pi i \xi x} d\xi
$$

​
Code File

import React, { useState, useEffect } from 'react';
import { fetchUserData } from '../api/users';
import { ProfileHeader } from './ProfileHeader';
import { ProfileDetails } from './ProfileDetails';

interface UserProfileProps {
  userId: string;
}

export function UserProfile({ userId }: UserProfileProps) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    async function loadUser() {
      try {
        setLoading(true);
        const userData = await fetchUserData(userId);
        setUser(userData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    
    loadUser();
  }, [userId]);
  
  if (loading) return <div>Loading user data...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!user) return <div>User not found</div>;
  
  return (
    <div className="user-profile">
      <ProfileHeader
        name={user.name}
        avatar={user.avatar}
        role={user.role}
      />
      <ProfileDetails user={user} />
    </div>
  );
}

​
Tooltip

This text has a that provides more information.
  1. Browse through the components to find what you need
  2. Click on the “Copy” button in the code blocks to copy the example
  3. Paste into your documentation and customize
  4. Refer to the Documentation Guide for best practices
This gallery is a living document and will be updated as new components become available or best practices evolve.
For questions about Mintlify components, please refer to the official Mintlify documentation or contact the MOOD MNKY documentation team.