Preview

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>

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":

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

Styling looks wrong

The Preview component relies on Tailwind CSS classes:

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

Get Started

Usage

Components & Snippets

AI Tools

Basic Usage

Properties

With Custom Title

Features

Consistent Styling

Dark Mode

Use Cases

Component Demonstrations

Type Documentation

Configuration Examples

Integration with MDX

Best Practices

TypeTree

RefLink

PageLink

Troubleshooting

​Basic Usage

​Properties

​With Custom Title

​Features

​Consistent Styling

​Dark Mode

​Use Cases

​Component Demonstrations

​Type Documentation

​Configuration Examples

​Integration with MDX

​Best Practices

​Related Components

TypeTree

RefLink

PageLink

​Troubleshooting

Basic Usage

Properties

With Custom Title

Features

Consistent Styling

Dark Mode

Use Cases

Component Demonstrations

Type Documentation

Configuration Examples

Integration with MDX

Best Practices

Related Components

Troubleshooting