Skip to main content

​
Overview

All Mint TSDocs components come with default styling that integrates seamlessly with Mintlify’s design system. You can easily customize these styles to match your documentation’s look and feel.
Mint TSDocs provides default styles that can be customized in your style.css file.

​
Available Components

Mint TSDocs provides the following components with customizable styles:

RefLink

Type-safe links to API reference pages

PageLink

Type-safe links to documentation pages

TypeTree

Recursive type structure visualization

Preview

Styled wrapper for code examples

​
Component Selectors

Each Mint TSDocs component can be targeted using both class names and data attributes, following Mintlify’s conventions. 
/* Class selector */
.tsdocs-reflink {
  /* All RefLink components */
}

.tsdocs-reflink.broken-link {
  /* Broken reference links */
}

/* Data attribute selector */
[data-component="tsdocs-reflink"] {
  /* All RefLink components */
}

[data-component="tsdocs-reflink"].broken-link {
  /* Broken reference links */
}

/* Class selector */
.tsdocs-pagelink {
  /* All PageLink components */
}

.tsdocs-pagelink.broken-link {
  /* Broken page links */
}

/* Data attribute selector */
[data-component="tsdocs-pagelink"] {
  /* All PageLink components */
}

​
TypeTree Component

/* Data attribute selector */
[data-component="tsdocs-typetree"] {
  /* All TypeTree components */
}
TypeTree uses Mintlify’s native ResponseField and Expandable components internally, so you can also style those using Mintlify’s selectors.

​
Preview Component

/* Data attribute selector */
[data-component="tsdocs-preview"] {
  /* All Preview components */
}

​
Customizing Component Styles

Mint TSDocs includes a tsdocs-styles.css file that is automatically imported via docs/style.css. You can override these defaults by adding more specific selectors or using !important.
1

Locate your style.css file

Your docs/style.css file already imports the tsdocs styles:
docs/style.css
@import url('./snippets/tsdocs/tsdocs-styles.css');
Mintlify automatically loads style.css from your docs directory - no configuration needed!
2

Add your custom styles

Add your overrides below the import statement. Use !important to ensure they take precedence:
docs/style.css
@import url('./snippets/tsdocs/tsdocs-styles.css');

/* Override broken link styling */
.prose .tsdocs-reflink.broken-link {
  border-bottom: 3px solid orange !important;
  background-color: rgba(255, 165, 0, 0.1);
}

/* Customize PageLink hover effect */
.prose .tsdocs-pagelink:hover {
  text-decoration: underline;
}

/* Style TypeTree containers */
[data-component="tsdocs-typetree"] {
  margin-bottom: 1rem;
}
3

Preview your changes

Start the Mintlify dev server to see your changes:
mint dev

​
Default Styles

Mint TSDocs includes default styles for broken links that help you identify documentation issues during development. By default, broken reference and page links are styled with:
  • Red dotted border underneath
  • Red wavy underline
  • Red text color
  • Hover tooltip showing the error
/* Default broken link styles */
.prose .tsdocs-reflink.broken-link,
.prose .tsdocs-pagelink.broken-link {
  border-bottom: 2px dotted #ef4444 !important;
  color: #ef4444 !important;
  text-decoration: wavy underline !important;
}

/* Dark mode variant */
.dark .prose .tsdocs-reflink.broken-link,
.dark .prose .tsdocs-pagelink.broken-link {
  border-bottom-color: #f87171 !important;
  color: #f87171 !important;
}

​
Common Customization Examples

Add hover effects to all Mint TSDocs links:
.prose .tsdocs-reflink:hover,
.prose .tsdocs-pagelink:hover {
  text-decoration: underline;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
Adjust spacing between TypeTree items:
[data-component="tsdocs-typetree"] {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Target nested TypeTree items */
[data-component="tsdocs-typetree"] [data-component="tsdocs-typetree"] {
  margin-left: 1rem;
}
Customize the Preview component border and background:
[data-component="tsdocs-preview"] {
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dark [data-component="tsdocs-preview"] {
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

​
Inspecting Components

To find which selectors to use for deeper customization:
  1. Open browser DevTools (F12 or right-click → Inspect)
  2. Use the element picker to select a Mint TSDocs component
  3. Look for:
    • data-component="tsdocs-*" attributes
    • Class names starting with tsdocs-
    • Mintlify’s built-in selectors (for TypeTree)
Check Mintlify’s complete list of selectors for styling native components.

​
Advanced: Using CSS Variables

Mintlify supports CSS variables for consistent theming. You can reference these in your Mint TSDocs customizations: 
/* Use Mintlify's color variables */
.tsdocs-reflink {
  color: var(--primary-color);
}

.tsdocs-reflink.broken-link {
  color: var(--error-color, #ef4444);
}

/* Custom CSS variables for consistency */
:root {
  --tsdocs-link-hover-opacity: 0.8;
  --tsdocs-broken-link-color: #f97316; /* orange */
}

.dark {
  --tsdocs-broken-link-color: #fb923c; /* lighter orange */
}

.tsdocs-reflink:hover {
  opacity: var(--tsdocs-link-hover-opacity);
}

.tsdocs-reflink.broken-link {
  color: var(--tsdocs-broken-link-color);
}

​
Best Practices

Test in both light and dark modes - Always check your customizations work with Mintlify’s dark mode
Use semantic selectors - Prefer data-component attributes for future-proof styling
Keep styles minimal - Only override what you need to change
Maintain accessibility - Ensure sufficient color contrast (use browser DevTools to check)
Use !important when overriding broken link styles to ensure your customizations take precedence

​
Next Steps

RefLink

Type-safe API reference links

PageLink

Type-safe documentation page links

TypeInfo

Auto-generated type information components

TypeTree

Recursive type structure visualization

Mintlify Custom CSS

Complete Mintlify CSS customization guide