Exciting release!Introducing "safe npm". Learn more →
Socket
Log inDemoInstall

@mintlify/components

Package Overview
Dependencies
4
Maintainers
4
Versions
97
Issues
File Explorer

Advanced tools

@mintlify/components

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

    0.3.14latest
    GitHub

Version published
Maintainers
4
Weekly downloads
396
decreased by-47.06%

Weekly downloads

Readme

Source
Mintlify Logo

Mintlify Components

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

contributions welcome Website

Built with 💚 by Mintlify


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

Keywords

FAQs

Last updated on 20 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc