Preview

Display content with a labeled border, similar to code blocks

The Preview component wraps content with a title and border, using the same visual style as code blocks. It’s perfect for highlighting examples or demonstrations in your documentation.

Basic Usage

Wrap any content with the Preview component:

Preview

This content is wrapped in a Preview component

<Preview>
  <div className="text-center p-4">
    <p className="text-lg font-medium">This content is wrapped in a Preview component</p>
  </div>
</Preview>

Properties

children · ReactNode · required

The content to display in the preview area. Can be any valid React node.

title · string · default: "Preview"

Title displayed in the header. Defaults to “Preview” if not specified.

className · string

Additional CSS classes to apply to the container element.

With Custom Title

Add a custom title to provide context:

Component Example

config · object · required

Application configuration

<Preview title="Component Example">
  <TypeTree open
    name="config"
    type="object"
    description="Application configuration"
    required={true}
    properties={[
      { name: "apiKey", type: "string", required: true },
      { name: "timeout", type: "number", defaultValue: "5000" }
    ]}
  />
</Preview>

Features

Consistent Styling

The component uses the same visual design as Mintlify code blocks:

• Rounded corners and subtle border
• Title header with proper spacing
• Light/dark mode support
• Scrollable content area

Dark Mode

Automatically adapts to Mintlify’s theme:

• Light backgrounds in light mode
• Dark backgrounds in dark mode
• Proper contrast for all text and borders

Use Cases

Component Demonstrations

Show interactive components:

Alert Component

This is an informational alert

Type Documentation

Display type structures with TypeTree:

API Response Structure

response · object

Standard API response format

Configuration Examples

Document configuration objects:

Database Configuration

database · object · required

Integration with MDX

The Preview component works seamlessly in Mintlify MDX files:

---
title: My Component
description: Component documentation
---

import { Preview } from "/snippets/tsdocs/Preview.jsx"
import { MyComponent } from "/snippets/MyComponent.jsx"

## Example

<Preview title="Basic Example">
  <MyComponent prop="value" />
</Preview>

Best Practices

Use Descriptive Titles

Help readers understand what they’re looking at:

// ✅ Clear and descriptive
<Preview title="Required vs Optional Fields">
  <TypeTree open ... />
</Preview>

// ❌ Too generic
<Preview title="Example">
  <TypeTree open ... />
</Preview>

Pair with Code Blocks

Show the code alongside the preview:

Here's how to use the component:

```jsx
<MyComponent prop="value" />

Result

</Accordion>

<Accordion title="Keep Content Readable" icon="eye">
Don't overcrowd the preview area:

```jsx
// ✅ Focused example
<Preview title="Single Property">
  <TypeTree open name="id" type="string" required />
</Preview>

// ❌ Too much content
<Preview title="Everything">
  <div>50 lines of complex content...</div>
</Preview>

Related Components

TypeTree

Display type structures

RefLink

API reference links

PageLink

Documentation page links

Troubleshooting

Component not found

If you see Cannot find module "/snippets/tsdocs/Preview.jsx":

1. Ensure the component exists in your docs/snippets/tsdocs/ folder
2. Run mint-tsdocs to auto-copy the component
3. Check that the import path is correct

Styling looks wrong

The Preview component relies on Tailwind CSS classes:

1. Ensure Tailwind is configured in your Mintlify project
2. Check that dark mode is properly set up
3. Verify the scrollbar-* utility classes are available