Open source React UI components for documentation sites, built with Tailwind CSS.

Installation

npm install @mintlify/components
# or
pnpm add @mintlify/components
# or
yarn add @mintlify/components

Requirements

• Node.js >= 20.0.0
• React ^18.0.0 or ^19.0.0
• Tailwind CSS v3 or v4

Setup

Tailwind v4

Import the styles at the top of your main CSS file, before @import "tailwindcss":

@import "@mintlify/components/styles.css";
@import "tailwindcss";

@theme {
  --color-primary: #your-color;
}

Tailwind v3

Import the styles at the top of your main CSS file:

@import "@mintlify/components/styles.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Override theme values in tailwind.config.js.

Note: Importing styles before Tailwind ensures your custom theme values take precedence over the component defaults.

Usage

Import components in your React files:

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

Example

import { Callout } from '@mintlify/components';

const App = () => {
  return (
    <Callout type="info" title="Note">
      This is an informational callout.
    </Callout>
  );
}

Components

Documentation

• Component Documentation
• Storybook Examples

Contributing

We welcome contributions! Please see our Contributing Guide for details.

For local development setup, see Development.

License

MIT License - see LICENSE for details.