Skip to main content
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
    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

Help readers understand what they’re looking at:
// ✅ Clear and descriptive
<Preview title="Required vs Optional Fields">
  <TypeTree ... />
</Preview>

// ❌ Too generic
<Preview title="Example">
  <TypeTree ... />
</Preview>
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 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

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