Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/mintlify/components/llms.txt

Use this file to discover all available pages before exploring further.

This guide covers how to set up and work on Mintlify Components locally.

Prerequisites

Before you begin, ensure you have the following installed:

Initial Setup

1

Clone the repository

git clone https://github.com/mintlify/components.git
cd components
2

Install dependencies

This is a monorepo managed with pnpm:
pnpm install
3

Set up pre-commit hooks

Install Husky hooks for automatic linting:
pnpm exec husky install

Development Workflow

Building

Build the component library:
pnpm build
For development with watch mode:
pnpm dev

Storybook

Run Storybook to develop and preview components:
pnpm storybook
This starts a local server at http://localhost:6006 where you can view and interact with all components. Build Storybook for production:
pnpm build-storybook

Linting

We use Biome for linting and formatting. The pre-commit hooks will run linting automatically before each commit. Check code style:
pnpm lint:check
Fix linting issues automatically:
pnpm lint:fix

Project Structure

packages/
└── components/          # Main component package
    ├── src/
    │   ├── components/  # React components
    │   ├── hooks/       # Custom React hooks
    │   ├── utils/       # Utility functions
    │   └── index.ts     # Package entry point
    ├── .storybook/      # Storybook configuration
    └── dist/            # Build output

Code Style Guidelines

  • Use TypeScript for all new code
  • Follow existing patterns in the codebase
  • Components should be compatible with React 18 and 19
  • Use Tailwind CSS for styling

Testing Your Changes

Before submitting a pull request:
1

Run the linter

pnpm lint:check
2

Build the project

pnpm build
3

Test in Storybook

pnpm storybook
Verify your changes work correctly in the Storybook environment.

Next Steps

Build docs developers (and LLMs) love