Skip to main content
Mintlify Components Hero Light

​
Welcome to Mintlify Components

Mintlify Components is a comprehensive library of production-ready React components designed specifically for documentation sites. Built with Tailwind CSS and fully open source, it provides everything you need to create beautiful, accessible, and interactive documentation.

Installation

Get started with npm, yarn, or pnpm in minutes

Setup Guide

Configure Tailwind CSS v3 or v4 for your project

Components

Explore 22 production-ready components for layout, content, and code

GitHub

View source code and contribute to the project

​
Key Features

Modern React

Built with React 18+ and React 19 support using latest patterns

Tailwind Native

Native integration with Tailwind CSS v3 and v4 (including @tailwindcss/cli 4.1.18)

TypeScript First

Full TypeScript support with comprehensive type definitions exported

Accessible

Built with @base-ui/react 1.1.0 and @headlessui/react 2.2.0 for WCAG compliance

Syntax Highlighting

Powered by Shiki 3.21.0 with 200+ themes and language support

Open Source

MIT licensed and maintained by Mintlify on GitHub

​
Component Categories

Mintlify Components includes 22 carefully crafted components organized into focused categories:

​
Layout Components

Structure your documentation with flexible layout primitives:
  • Accordion - Collapsible content sections with AccordionGroup support
  • Card - Highlighted content containers with icons, images, and CTAs
  • Columns - Multi-column responsive layouts (1-4 columns)
  • Expandable - Show/hide content interactions
  • Frame - Embedded content wrappers
  • Panel - Sectioned content areas
  • Tabs - Tabbed navigation interfaces
  • Tile - Grid-based content blocks

​
Content Components

Enhance your documentation with rich content elements:
  • Callout - Six variants (info, warning, note, tip, check, danger) with custom colors
  • Steps - Sequential instruction flows
  • Badge - Status and label indicators
  • Icon - Lucide React icon integration (450+ icons)
  • Tooltip - Contextual information overlays using @base-ui/react
  • Update - Version and changelog entries

​
Code Components

Showcase code with syntax highlighting and features:
  • CodeBlock - Syntax-highlighted code powered by Shiki with 200+ themes
  • CodeGroup - Multiple code examples with language tabs and selection

​
Data Display Components

Present structured information:
  • Property - API reference properties with parameter documentation
  • Tree - Hierarchical file/folder structures with expandable nodes

​
Visualization Components

Create diagrams and visual elements:
  • Mermaid - Interactive diagram rendering powered by Mermaid (v11.12.2)
  • Color - Color palette displays with hex values

​
Utility Components

Special-purpose functionality:
  • Search - Documentation search interface with provider support
  • View - Conditional rendering utilities

​
Quick Start Example

import { Accordion, Callout, CodeBlock, Tabs } from '@mintlify/components';

function Documentation() {
  return (
    <div>
      <Callout variant="info">
        Welcome to Mintlify Components! This library provides everything
        you need for beautiful documentation.
      </Callout>

      <Accordion title="What's included?">
        Over 22 components for layout, content, code display, and more.
        All components are built with Tailwind CSS and fully customizable.
      </Accordion>

      <CodeBlock language="bash">
        npm install @mintlify/components
      </CodeBlock>
    </div>
  );
}

​
System Requirements

Before installing, ensure your project meets these requirements:
  • Node.js >= 20.0.0
  • React ^18.0.0 or ^19.0.0
  • React DOM ^18.0.0 or ^19.0.0
  • Tailwind CSS v3 or v4
Ready to get started? Head over to the Installation guide to add Mintlify Components to your project.

Build docs developers (and LLMs) love

Get started for freeTalk to us