Mintlify Components

Open-source library of UI components made with React and TailwindCSS.

_{Built with 💚 by Mintlify}

This repo contains the components Mintlify uses in our open-source documentation framework: mint. Checkout mintlify.com/docs to see the components in action. Feel free to use the components on your own websites!

Install this package and peerDependencies of this package, using install-peerdeps.

npx install-peerdeps @mintlify/components

You already have react installed or are using preact and just need @headlessui/react and @mintlify/components.

# yarn
yarn add @headlessui/react @mintlify/components

# npm
npm i @headlessui/react @mintlify/components

# pnpm
pnpm add @headlessui/react @mintlify/components

You already have react and @headlessui/react installed and just need @mintlify/components.

# yarn
yarn add @mintlify/components

# npm
npm i @mintlify/components

# pnpm
pnpm add @mintlify/components

Add the following at the start of your main.css file:

@import '@mintlify/components';

Import components like so:

import { Accordion, Card } from "@mintlify/components"

The project is designed for use with static side rendering where we don't have access to document or window. Thus, our webpack config has to use mini-css-extract-plugin instead of style-loader.

Go to mintlify.com/docs/components to see how to use the components in Mintlify's documentation platform.

Storybook has interactive demos.

Read the Contributing guide to learn about our development process, the standards and tools used, and how to propose fixes, bugs or open issues.

The repo wiki explains how to contribute to this repo.

Check out the Contribution Tools section in our Contributing guide.

This project uses prettier for code formatting. You can auto-format across the codebase by running yarn format.

This project uses eslint for code linting. You can check linter warnings and errors by running yarn lint.

The first version of this library only includes documentation components. In the long run, Mintlify will include layout components you could use to build an entire site.

Join our Discord community if you have questions or just want to chat:

MIT