> ## Documentation Index
> Fetch the complete documentation index at: https://mint-tsdocs.saulo.engineer/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS

> Learn how to customize the appearance of Mint TSDocs components using CSS

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

<Tip>
  Mint TSDocs provides default styles that can be customized in your `style.css` file.
</Tip>

## Available Components

Mint TSDocs provides the following components with customizable styles:

<CardGroup cols={2}>
  <Card title="RefLink" icon="link" href="/components/reflink">
    Type-safe links to API reference pages
  </Card>

  <Card title="PageLink" icon="link" href="/components/pagelink">
    Type-safe links to documentation pages
  </Card>

  <Card title="TypeTree" icon="diagram-project" href="/components/type-tree">
    Recursive type structure visualization
  </Card>

  <Card title="Preview" icon="eye" href="/components/preview">
    Styled wrapper for code examples
  </Card>
</CardGroup>

## Component Selectors

Each Mint TSDocs component can be targeted using both **class names** and **data attributes**, following Mintlify's conventions.

### RefLink Component

```css theme={null}
/* 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 */
}
```

### PageLink Component

```css theme={null}
/* 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

```css theme={null}
/* Data attribute selector */
[data-component="tsdocs-typetree"] {
  /* All TypeTree components */
}
```

<Note>
  TypeTree uses Mintlify's native `ResponseField` and `Expandable` components internally, so you can also style those using [Mintlify's selectors](https://mintlify.com/docs/customize/custom-scripts#using-identifiers-and-selectors).
</Note>

### Preview Component

```css theme={null}
/* 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`.

<Steps>
  <Step title="Locate your style.css file">
    Your `docs/style.css` file already imports the tsdocs styles:

    ```css docs/style.css theme={null}
    @import url('./snippets/tsdocs/tsdocs-styles.css');
    ```

    <Note>
      Mintlify automatically loads `style.css` from your docs directory - no configuration needed!
    </Note>
  </Step>

  <Step title="Add your custom styles">
    Add your overrides below the import statement. Use `!important` to ensure they take precedence:

    ```css docs/style.css theme={null}
    @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;
    }
    ```
  </Step>

  <Step title="Preview your changes">
    Start the Mintlify dev server to see your changes:

    ```bash theme={null}
    mint dev
    ```
  </Step>
</Steps>

## Default Styles

Mint TSDocs includes default styles for broken links that help you identify documentation issues during development.

### Broken Link Indicators

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

```css theme={null}
/* 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

<AccordionGroup>
  <Accordion title="Subtle broken link indicators">
    Make broken links less prominent for production sites:

    ```css theme={null}
    .prose .tsdocs-reflink.broken-link,
    .prose .tsdocs-pagelink.broken-link {
      border-bottom: 1px dashed #94a3b8 !important;
      color: inherit !important;
      text-decoration: none !important;
    }
    ```
  </Accordion>

  <Accordion title="Custom hover effects">
    Add hover effects to all Mint TSDocs links:

    ```css theme={null}
    .prose .tsdocs-reflink:hover,
    .prose .tsdocs-pagelink:hover {
      text-decoration: underline;
      opacity: 0.8;
      transition: opacity 0.2s ease;
    }
    ```
  </Accordion>

  <Accordion title="TypeTree spacing">
    Adjust spacing between TypeTree items:

    ```css theme={null}
    [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;
    }
    ```
  </Accordion>

  <Accordion title="Preview component theming">
    Customize the Preview component border and background:

    ```css theme={null}
    [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);
    }
    ```
  </Accordion>
</AccordionGroup>

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

<Tip>
  Check Mintlify's [complete list of selectors](https://mintlify.com/docs/customize/custom-scripts#using-identifiers-and-selectors) for styling native components.
</Tip>

## Advanced: Using CSS Variables

Mintlify supports CSS variables for consistent theming. You can reference these in your Mint TSDocs customizations:

```css theme={null}
/* 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

<Check>
  **Test in both light and dark modes** - Always check your customizations work with Mintlify's dark mode
</Check>

<Check>
  **Use semantic selectors** - Prefer `data-component` attributes for future-proof styling
</Check>

<Check>
  **Keep styles minimal** - Only override what you need to change
</Check>

<Check>
  **Maintain accessibility** - Ensure sufficient color contrast (use browser DevTools to check)
</Check>

<Tip>
  Use `!important` when overriding broken link styles to ensure your customizations take precedence
</Tip>

## Next Steps

<CardGroup cols={2}>
  <Card title="RefLink" icon="link" href="/components/reflink">
    Type-safe API reference links
  </Card>

  <Card title="PageLink" icon="link" href="/components/pagelink">
    Type-safe documentation page links
  </Card>

  <Card title="TypeInfo" icon="info-circle" href="/components/type-info">
    Auto-generated type information components
  </Card>

  <Card title="TypeTree" icon="diagram-project" href="/components/type-tree">
    Recursive type structure visualization
  </Card>

  <Card title="Mintlify Custom CSS" icon="paintbrush" href="https://mintlify.com/docs/customize/custom-scripts">
    Complete Mintlify CSS customization guide
  </Card>
</CardGroup>