> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/kapishdima/fonttrio/llms.txt
> Use this file to discover all available pages before exploring further.

# Contributing

> Help make Fonttrio better by contributing font pairings, reporting issues, or improving the codebase.

Fonttrio is an open-source project, and we welcome contributions from the community. Whether you want to suggest a new font pairing, report a bug, or improve the codebase, your help is appreciated.

## Ways to Contribute

<CardGroup cols={2}>
  <Card title="Suggest Pairings" icon="palette">
    Have a font combination that works beautifully together? Share it with the community.
  </Card>

  <Card title="Report Issues" icon="bug">
    Found a bug or have a feature request? Open an issue on GitHub.
  </Card>

  <Card title="Improve Docs" icon="book">
    Help make the documentation clearer and more helpful.
  </Card>

  <Card title="Code Contributions" icon="code">
    Contribute to the codebase with bug fixes or new features.
  </Card>
</CardGroup>

## Suggesting New Font Pairings

We're always looking for high-quality font combinations to add to Fonttrio. Here's how to suggest a new pairing:

<Steps>
  <Step title="Check Existing Pairings">
    Browse the [current collection](https://www.fonttrio.xyz) to ensure your pairing isn't already included. We currently have **49 curated pairings**.
  </Step>

  <Step title="Test Your Combination">
    Make sure your font pairing:

    * Works well together (heading + body + mono)
    * Is available on Google Fonts
    * Has good readability at various sizes
    * Works in both light and dark modes
  </Step>

  <Step title="Open an Issue">
    Create a new issue on [GitHub](https://github.com/kapishdima/fonttrio/issues) with:

    * **Heading font** name and link to Google Fonts
    * **Body font** name and link to Google Fonts
    * **Monospace font** name and link to Google Fonts
    * **Category** (Editorial, Clean, Bold, Corporate, Creative)
    * **Use case** (blog, landing page, documentation, etc.)
    * **Why** this combination works well
  </Step>

  <Step title="Wait for Review">
    The maintainers will review your suggestion and provide feedback. If approved, it will be added to the collection.
  </Step>
</Steps>

<Note>
  All fonts must be available on Google Fonts to ensure they work with the `next/font` integration.
</Note>

## Reporting Issues

Found a bug or have a suggestion? Here's how to report it:

### Before Opening an Issue

* Search [existing issues](https://github.com/kapishdima/fonttrio/issues) to avoid duplicates
* Check if the issue persists in the latest version
* Gather relevant information (browser, OS, Next.js version)

### Opening an Issue

1. Go to [GitHub Issues](https://github.com/kapishdima/fonttrio/issues)
2. Click "New Issue"
3. Provide a clear, descriptive title
4. Include:
   * Steps to reproduce
   * Expected behavior
   * Actual behavior
   * Screenshots (if applicable)
   * Environment details

## Code Contributions

Want to contribute code? Here's how to get started:

### Development Setup

<Steps>
  <Step title="Fork and Clone">
    ```bash theme={null}
    git clone https://github.com/YOUR_USERNAME/fonttrio.git
    cd fonttrio
    ```
  </Step>

  <Step title="Install Dependencies">
    Fonttrio uses Bun as the package manager:

    ```bash theme={null}
    bun install
    ```
  </Step>

  <Step title="Run Development Server">
    ```bash theme={null}
    bun run dev
    ```

    Open [http://localhost:3000](http://localhost:3000) in your browser.
  </Step>
</Steps>

### Project Structure

```
fonttrio/
├── registry/
│   ├── fonts/          # Individual font configurations
│   └── pairings/       # Font pairing combinations
├── scripts/
│   ├── build-registry.ts       # Builds registry.json
│   ├── generate-fonts.ts       # Generates font configs
│   └── sync-pairings-data.ts   # Syncs pairing data
├── public/r/           # Public registry files
└── app/                # Next.js application
```

### Adding a New Pairing

To add a new font pairing to the registry:

1. **Create a pairing file** in `registry/pairings/your-pairing.json`:

```json theme={null}
{
  "name": "pairing-your-name",
  "type": "registry:style",
  "extends": "none",
  "title": "Your Pairing — Heading Font + Body Font + Mono Font",
  "description": "Brief description of the pairing and its use case.",
  "categories": ["category1", "category2"],
  "registryDependencies": [
    "https://www.fonttrio.xyz/r/heading-font.json",
    "https://www.fonttrio.xyz/r/body-font.json",
    "https://www.fonttrio.xyz/r/mono-font.json"
  ],
  "cssVars": {
    "theme": {
      "--font-heading": "var(--font-heading-name)",
      "--font-body": "var(--font-body-name)",
      "--font-mono": "var(--font-mono-name)"
    }
  },
  "meta": {
    "mood": ["elegant", "modern"],
    "useCase": ["blog", "documentation"]
  }
}
```

2. **Build the registry**:

```bash theme={null}
bun run build:registry
```

3. **Test your pairing** by installing it in a test project:

```bash theme={null}
npx shadcn@latest add https://www.fonttrio.xyz/r/your-pairing.json
```

### Code Style

* Use TypeScript for all new code
* Follow the existing code style
* Run `bun run lint` before committing
* Keep commits focused and atomic
* Write clear commit messages

### Available Scripts

* `bun run dev` — Start development server
* `bun run build` — Build for production
* `bun run lint` — Run ESLint
* `bun run generate:fonts` — Generate font configurations
* `bun run generate:candidates` — Generate pairing candidates
* `bun run sync:pairings` — Sync pairing data
* `bun run build:registry` — Build registry.json

### Pull Request Process

<Steps>
  <Step title="Create a Branch">
    ```bash theme={null}
    git checkout -b feature/your-feature-name
    ```
  </Step>

  <Step title="Make Your Changes">
    Write your code, following the code style guidelines.
  </Step>

  <Step title="Test Thoroughly">
    Ensure your changes work as expected and don't break existing functionality.
  </Step>

  <Step title="Commit Your Changes">
    ```bash theme={null}
    git add .
    git commit -m "feat: add your feature"
    ```
  </Step>

  <Step title="Push and Create PR">
    ```bash theme={null}
    git push origin feature/your-feature-name
    ```

    Then open a Pull Request on GitHub with a clear description of your changes.
  </Step>
</Steps>

### Commit Message Convention

Use conventional commit messages:

* `feat:` — New feature
* `fix:` — Bug fix
* `docs:` — Documentation changes
* `refactor:` — Code refactoring
* `chore:` — Maintenance tasks

## Questions?

If you have questions about contributing:

* Check the [FAQ](/resources/faq) for common questions
* Open a [GitHub Discussion](https://github.com/kapishdima/fonttrio/discussions)
* Reach out to [@kapish\_dima](https://x.com/kapish_dima) on X

## License

By contributing to Fonttrio, you agree that your contributions will be licensed under the MIT License.

***

Thank you for helping make Fonttrio better!