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

# Introduction

> Curated font pairings for shadcn/ui projects. Install perfect typography in seconds.

# Introduction to Fonttrio

Three fonts. One command.

Fonttrio is a curated collection of font pairings designed specifically for shadcn/ui projects. Each pairing includes a carefully selected combination of heading, body, and monospace fonts that work together harmoniously.

## 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 ready-made, battle-tested font combinations that you can install in seconds.

<Note>
  Fonttrio uses the shadcn/ui registry system to distribute font pairings, making installation as simple as adding a component.
</Note>

## Key Features

<CardGroup cols={2}>
  <Card title="49 Curated Pairings" icon="palette">
    From editorial to corporate, minimal to bold - carefully selected combinations for every project type.
  </Card>

  <Card title="Complete Typography Scale" icon="text-size">
    Each pairing includes h1 through body sizing with optimized line heights and letter spacing.
  </Card>

  <Card title="CSS Variables" icon="code">
    Ready-to-use CSS custom properties for easy theming throughout your project.
  </Card>

  <Card title="One Command Install" icon="terminal">
    Add any pairing to your project instantly using the shadcn CLI.
  </Card>

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

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

## How It Works

Fonttrio leverages the shadcn/ui registry system to distribute font pairings. When you install a pairing:

1. **Fonts are configured** in your Next.js app via `next/font/google`
2. **CSS variables are set up** in your `globals.css` file
3. **Typography scale is applied** through CSS custom properties
4. **All components can use the font variables** immediately

Each pairing is structured as a registry item that includes:

```json theme={null}
{
  "name": "pairing-editorial",
  "type": "registry:style",
  "registryDependencies": [
    "https://www.fonttrio.xyz/r/playfair-display.json",
    "https://www.fonttrio.xyz/r/source-serif-4.json",
    "https://www.fonttrio.xyz/r/jetbrains-mono.json"
  ],
  "cssVars": {
    "theme": {
      "--font-heading": "var(--font-playfair-display)",
      "--font-body": "var(--font-source-serif-4)",
      "--font-mono": "var(--font-jetbrains-mono)"
    }
  }
}
```

## Pairing Categories

Fonttrio offers pairings organized by style and use case:

### Editorial

Sophisticated combinations for content-heavy sites

* **Editorial** — Playfair Display + Source Serif 4 + JetBrains Mono
* **Literary** — Crimson Text + Source Serif 4 + IBM Plex Mono
* **Newspaper** — Merriweather + Merriweather + Cousine

### Clean

Minimal, modern combinations

* **Minimal** — Inter + Inter + JetBrains Mono
* **Swiss** — Work Sans + Work Sans + Source Code Pro
* **Modern Clean** — Space Grotesk + Space Grotesk + Space Mono

### Bold

High-impact combinations for marketing

* **Impact** — Bebas Neue + Barlow + Fira Code
* **Poster** — Alfa Slab One + Assistant + Roboto Mono
* **Headline** — Anton + Heebo + Fira Code

### Corporate

Professional combinations for business

* **Corporate** — Raleway + Open Sans + Roboto Mono
* **Protocol** — Sora + Inter + JetBrains Mono
* **Fintech** — Plus Jakarta Sans + Inter + Source Code Pro

### Creative

Unique combinations for portfolios and creative work

* **Creative** — Syne + Manrope + Fira Code
* **Studio** — Space Grotesk + DM Sans + Fira Code
* **Agency** — Schibsted Grotesk + Karla + Fira Code

<Tip>
  Visit [fonttrio.xyz](https://www.fonttrio.xyz) to browse all 49 pairings with live previews and interactive type testers.
</Tip>

## What's Included

Each pairing provides:

* **Three Google Fonts** (heading, body, monospace)
* **Typography scale** with h1-h6 and body styles
* **CSS variables** for font families
* **Optimized font loading** via next/font
* **Metadata** including mood tags and use cases

## Get Started

Ready to add beautiful typography to your project? Continue to the [Quickstart](/quickstart) guide to install your first pairing, or see the detailed [Installation](/installation) instructions.

<Card title="Quickstart Guide" icon="rocket" href="/quickstart">
  Install a font pairing and see it in action in under 2 minutes.
</Card>