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