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 add @headlessui/react @mintlify/components
npm i @headlessui/react @mintlify/components
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 add @mintlify/components
npm i @mintlify/components
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.
Join our Discord community if you have questions or just want to chat:
License
MIT