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!

Installation

Add Dependencies

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

npx install-peerdeps @mintlify/components

React is already installed

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

React and headlessui are already installed

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

CSS import

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

@import '@mintlify/components';

Usage

Import components like so:

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

Designed for Next.js

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.

Documentation

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

Storybook has interactive demos.

Contributing

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.

Code Quality

Check out the Contribution Tools section in our Contributing guide.

Formatting

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

Linting

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

Long Term Vision

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.

Community

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

License

MIT