/*
 * Adding Inter Variable from Adobe Fonts
 * © 2009-2025 Adobe Systems Incorporated. All Rights Reserved.
 */

@import url('https://p.typekit.net/p.css?s=1&k=zmy3zmk&ht=tk&f=55314&a=164646275&app=typekit&e=css');

@font-face {
  font-family: 'inter-variable';
  src: url('https://use.typekit.net/af/250efc/00000000000000007750957d/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
      format('woff2'),
    url('https://use.typekit.net/af/250efc/00000000000000007750957d/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
      format('woff'),
    url('https://use.typekit.net/af/250efc/00000000000000007750957d/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
      format('opentype');
  font-display: auto;
  font-style: normal;
  font-weight: 100 900;
  font-stretch: normal;
}

body {
  font-family: 'inter-variable', sans-serif;
}

.mint-mx-auto {
    margin-left: auto;
    margin-right: auto
}
.mint-mb-2 {
    margin-bottom: 0.5rem
}
.mint-mt-0 {
    margin-top: 0px
}
.mint-mt-1 {
    margin-top: 0.25rem
}
.mint-mt-10 {
    margin-top: 2.5rem
}
.mint-mt-2 {
    margin-top: 0.5rem
}
.mint-mt-4 {
    margin-top: 1rem
}
.mint-block {
    display: block
}
.mint-flex {
    display: flex
}
.mint-grid {
    display: grid
}
.mint-hidden {
    display: none
}
.mint-size-3 {
    width: 0.75rem;
    height: 0.75rem
}
.mint-h-5 {
    height: 1.25rem
}
.mint-max-w-3xl {
    max-width: 48rem
}
.mint-cursor-pointer {
    cursor: pointer
}
.mint-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}
.mint-items-center {
    align-items: center
}
.mint-gap-1 {
    gap: 0.25rem
}
.mint-gap-10 {
    gap: 2.5rem
}
.mint-gap-8 {
    gap: 2rem
}
.mint-space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
}
.mint-rounded-2xl {
    border-radius: 1rem
}
.mint-px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
.mint-pb-24 {
    padding-bottom: 6rem
}
.mint-pt-10 {
    padding-top: 2.5rem
}
.mint-text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}
.mint-text-base {
    font-size: 1rem;
    line-height: 1.5rem
}
.mint-text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}
.mint-text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
.mint-font-medium {
    font-weight: 500
}
.mint-font-semibold {
    font-weight: 600
}
.mint-tracking-tight {
    letter-spacing: -0.025em
}
.mint-text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity))
}
.mint-text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity))
}
.mint-text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity))
}
.mint-transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.mint-group:hover .group-hover\:mint-translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.mint-group:hover .group-hover\:mint-translate-x-0\.5 {
    --tw-translate-x: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.mint-group:hover .group-hover\:mint-scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.mint-group:hover .group-hover\:mint-text-green-800 {
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity))
}
.dark\:mint-block:is(.dark *) {
    display: block
}
.dark\:mint-hidden:is(.dark *) {
    display: none
}
.dark\:mint-text-gray-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity))
}
.dark\:mint-text-gray-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity))
}
.dark\:mint-text-green-500:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity))
}
.mint-group:hover .dark\:group-hover\:mint-text-green-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity))
}
@media (min-width: 640px) {
    .sm\:mint-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .sm\:mint-text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem
    }
}

Customize the appearance of your documentation

Themes

Mintlify

Meet the next generation of documentation. AI-native, beautiful out-of-the-box, and built for developers.

Introduction

Quickstart

Install the CLI to preview and develop your docs locally

Installation

Build your documentation using the Mintlify Web Editor

Web Editor

Configure the global settings for your documentation

Settings

Pages are the building blocks of your documentation

Pages

Structure and customize your documentation's navigation hierarchy

Navigation

Build interactive and reusable elements with React components

React

Learn how to feed your documentation into LLMs and AI tools

AI Ingestion

Text, title, and styling in standard markdown

Headers and Text

Add image, video, and other HTML elements

Images and Embeds

Lists and Tables

Code

Reusable, custom snippets to keep content in sync

Reusable Snippets

A dropdown component to toggle content visibility

Accordions

Use callouts to add eye-catching context to your content

Callouts

Highlight main points or links with customizable icons

Cards

Columns

The CodeGroup component lets you combine code blocks in a display separated by tabs

Code Groups

Display code blocks at the top-right of the page on desktop devices

Examples

Expandables

Set parameters for your API or SDK references

Fields

Use the Frame component to wrap images or other components in a container.

Frames

Icons

Mermaid

Sequence content using the Steps component

Steps

Tabs

Show a definition when you hover over text

Tooltips

Update

Playground

Troubleshooting

How to migrate documentation from your existing provider

Migrations

Host your documentation at your website's custom domain

Custom Domain

Redirects and Broken Links

GitHub

GitLab

Add broken links, linting, and grammar checks to the updating process

CI Checks

Preview changes to your docs in a live deployment

Preview Deployments

Fully customize your documentation with custom CSS & JS

Custom Scripts

Generate MCP servers from your documentation or OpenAPI specs

Model Context Protocol

Trigger an update after updating your OpenAPI document by calling this endpoint in a CI check

Trigger an update

Get the status of an update from the status ID

Get the status of an update

Creates a topic to manage message history for a given AI chat conversation

Create a chat topic

Generate a completion in response to a user query

Generate a message completion

Product Updates

Start building modern documentation in under five minutes

Preview changes locally to update your docs

Local Development

Edit your docs directly from the dashboard with live previews.

Configure your documentation using the `docs.json` file

Global Settings

Organize your docs directory to guide your users to the information they need 

Migration

Setting the title and metadata for navigation and SEO

Page Titles and Metadata

Images, Videos, and Embeds

Code Blocks

Interactive Playground

Reference OpenAPI endpoints in your docs pages

OpenAPI Setup

Use OpenAPI features to enhance your Mintlify docs

Writing OpenAPI

Advanced Features

Generate docs pages for your API endpoints using MDX

MDX Setup

You can set authentication parameters to let users use their real API keys.

Authentication

Mintlify automatically generates most meta tags. If you want to customize them, you can set default values in mint.json or change them per page.

Versioning & Localization

Allow more members of your team to update your docs

Editor Permissions

Fully customize your documentation with custom CSS

Custom CSS

Custom JS

Host documentation at a /docs subpath using Cloudflare Workers

Cloudflare

Host documentation at a /docs subdirectory using AWS services

AWS Route 53 and Cloudfront

Host documentation at a /docs subpath using Vercel

Vercel

Guarantee privacy of your docs by authenticating users

Authenticate users to view only certain pages

Partial Authentication

A list of features unlocked with Personalization

Personalization

How to determine which product is best for you

Auth vs Personalization

The shape of user data you can use to personalize your docs

Sending Data

Integrate the Mintlify widget into your products to offer users quick access to AI-powered chat with your docs content as the knowledge base.

Getting Started

Core Concepts

Components

API Pages

Guides

Deep Dive

Themes

Mint

Maple

Palm

Willow

Linden

Almond