Skip to main content

​
Prerequisites

Before installing Mintlify Components, make sure your environment meets these requirements:

Node.js

Version 20.0.0 or higher (required by package engines)

React

Version ^18.0.0 or ^19.0.0 (peer dependency)

React DOM

Version ^18.0.0 or ^19.0.0 (peer dependency)

Tailwind CSS

Version 3.x or 4.x (for styling)
Node.js 20.0.0 or higher is required as specified in package.json engines. The package will not work with older versions.
The package automatically includes all necessary dependencies like Shiki for syntax highlighting, Mermaid for diagrams, and Lucide React for icons. You don’t need to install these separately.

​
Install the Package

Choose your preferred package manager to install @mintlify/components: 
npm install @mintlify/components
The package includes:
  • All 22 React components with TypeScript definitions
  • Pre-built CSS styles (styles.css)
  • ESM (dist/index.js) and CommonJS (dist/index.cjs) module formats
  • TypeScript declarations (dist/index.d.ts)
  • Syntax highlighting powered by Shiki 3.21.0
  • Mermaid diagram support (v11.12.2)
  • 450+ Lucide React icons

​
Verify Installation

After installation, verify the package is correctly installed:
1

Check package.json

Confirm @mintlify/components appears in your dependencies:
package.json
{
  "dependencies": {
    "@mintlify/components": "^1.0.5",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "tailwindcss": "^4.0.0"
  }
}
2

Test import

Create a test file to ensure imports work correctly:
test.tsx
import { Callout } from '@mintlify/components';

// If this imports without errors, installation was successful
console.log('Mintlify Components installed successfully!');
3

Check node_modules

Verify the package files are present:
ls node_modules/@mintlify/components
You should see a dist folder containing the compiled components.

​
Package Structure

The installed package includes these exports:
Main entry point:
import { Accordion, Callout, CodeBlock, Tabs } from '@mintlify/components';
Styles (required):
@import "@mintlify/components/styles.css";
The package exports these module formats:
  • ESM: dist/index.js (primary)
  • CommonJS: dist/index.cjs (compatibility)
  • TypeScript: dist/index.d.ts (type definitions)
  • Styles: dist/styles.css (component styles)

​
Component Inventory

After installation, you have access to 22 components organized by category:
Accordion - Collapsible sections with AccordionGroup and AccordionCover
Card - Content cards with GenericCard support
Columns - Responsive grids (1-4 columns)
Expandable - Toggle content visibility
Frame - Embedded content containers
Panel - Sectioned content areas
Tabs - Tab navigation interfaces
Tile - Grid-based content blocks
Callout - Info, Warning, Note, Tip, Check, Danger variants
Steps - Sequential instruction flows
Badge - Status and label indicators
Icon - Lucide React icon integration
Tooltip - Contextual overlays
Update - Version and changelog entries
CodeBlock - Syntax highlighting with Shiki
CodeGroup - Multi-language code examples
Property - API parameter documentation
Tree - File/folder hierarchies with TreeRoot, TreeFolder, TreeFile
Mermaid - Diagrams with zoom controls
Color - Color palette displays
Search - Search interface with SearchProvider and SearchButton
View - Conditional rendering

​
Bundled Dependencies

The package includes these powerful libraries out of the box:
Shiki 3.21.0 - Industry-leading syntax highlighting
@shikijs/transformers 3.21.0 - Code transformation utilitiesProvides 200+ syntax themes and language support for virtually any programming language.
@base-ui/react 1.1.0 - Unstyled, accessible component primitives
@headlessui/react 2.2.0 - Accessible UI components from Tailwind LabsEnsures all components meet WCAG accessibility standards.
lucide-react 0.453.0 - 450+ beautiful, consistent icons
mermaid 11.12.2 - Powerful diagram and flowchart renderingCreate stunning visuals without external dependencies.
tailwind-merge 2.6.0 - Intelligent Tailwind class merging
clsx 2.1.1 - Conditional className construction
color 4.2.3 - Color manipulation and conversionAdvanced styling capabilities built-in.
Installation complete! Next, proceed to the Setup guide to configure Tailwind CSS and start using components.

​
Troubleshooting

If you see Cannot find module '@mintlify/components':
  1. Clear your package manager cache: 
    npm cache clean --force
# or
pnpm store prune
# or
yarn cache clean
  2. Delete node_modules and reinstall: 
    rm -rf node_modules package-lock.json
npm install
  3. Verify your Node.js version: 
    node --version  # Should be >= 20.0.0
If you encounter TypeScript errors:
  1. Ensure your tsconfig.json includes:
    tsconfig.json
    {
  "compilerOptions": {
    "moduleResolution": "bundler",
    "jsx": "react-jsx"
  }
}
  2. Restart your TypeScript server in your editor
If you see peer dependency warnings, install the required dependencies:
npm install react@^18.0.0 react-dom@^18.0.0
Or for React 19:
npm install react@^19.0.0 react-dom@^19.0.0

Build docs developers (and LLMs) love

Get started for freeTalk to us