> ## 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.

# Three fonts. One command.

> Curated font pairing registry for shadcn with one-command installation and live preview.

<img className="block" src="https://raw.githubusercontent.com/kapishdima/fonttrio/main/public/hero.png" alt="Fonttrio Hero" />

## Why Fonttrio?

Building a typography system from scratch is time-consuming. Finding fonts that complement each other, establishing the right scale, and setting up CSS variables takes hours of work. Fonttrio solves this by providing **49+ ready-made, battle-tested font combinations** that you can install in seconds.

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Install your first font pairing in under 30 seconds
  </Card>

  <Card title="Browse Collections" icon="images" href="/collections/editorial">
    Explore curated pairings from editorial to bold
  </Card>

  <Card title="Installation Guide" icon="download" href="/installation">
    Learn how to install and configure pairings
  </Card>

  <Card title="API Reference" icon="code" href="/api/overview">
    Integrate the registry into your own tools
  </Card>
</CardGroup>

## Key Features

<CardGroup cols={3}>
  <Card title="49+ Curated Pairings" icon="font">
    From editorial to corporate, minimal to bold — professionally selected combinations
  </Card>

  <Card title="One Command Install" icon="terminal">
    Install any pairing instantly via shadcn CLI
  </Card>

  <Card title="Complete Typography Scale" icon="ruler">
    Each pairing includes h1 through body sizing with proper line heights and letter spacing
  </Card>

  <Card title="CSS Variables" icon="palette">
    Ready-to-use CSS custom properties for easy theming
  </Card>

  <Card title="Google Fonts Integration" icon="globe">
    All fonts loaded from Google Fonts CDN
  </Card>

  <Card title="Dark Mode Ready" icon="moon">
    Works seamlessly with shadcn/ui's theming system
  </Card>
</CardGroup>

## Installation Preview

Install any pairing with a single command:

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

The pairing automatically sets up:

* Font configuration via next/font
* CSS variables in your globals.css
* Typography scale through CSS
* All components can use the font variables immediately

<Card title="View All Pairings" icon="grid" href="https://www.fonttrio.xyz">
  Visit the live preview site to test fonts with your own text
</Card>