Skip to main content
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