---
name: "@fonttrio"
slug: "fonttrio"
description: "Fonttrio is a curated font-pairing registry for shadcn/ui projects. It offers 49 font pairings, each bundling a heading font, body font, and monospace font that work together harmoniously. Installing a pairing (e.g., npx shadcn add @fonttrio/editorial) sets up --font-heading, --font-body, and --font-mono CSS variables plus an editorial-grade type scale with predefined heading sizes, line heights, letter-spacing, and font weights. Covers styles from editorial to corporate and minimal to bold. Integrates with Next.js font loading and Google Fonts. Free and open source. Use for: instantly establishing a professional, cohesive typography system in a shadcn/ui project with a single CLI command instead of manually configuring Next.js font imports, CSS variables, and type scales."
category: "Theming/styling"
tags: ["accessibility", "aesthetic", "charts", "crypto", "editor", "loaders", "theming"]
framework: "react"
license: "MIT"
author: "kapishdima"
website: "https://www.fonttrio.xyz"
github: "https://github.com/kapishdima/fonttrio"
registry: "https://www.fonttrio.xyz/r/{name}.json"
pro: false
pro_url: null
github_stars: 431
component_count: 0
generated_at: "2026-07-28T08:59:05.895Z"
---

# @fonttrio

Fonttrio is a curated font-pairing registry for shadcn/ui projects. It offers 49 font pairings, each bundling a heading font, body font, and monospace font that work together harmoniously. Installing a pairing (e.g., npx shadcn add @fonttrio/editorial) sets up --font-heading, --font-body, and --font-mono CSS variables plus an editorial-grade type scale with predefined heading sizes, line heights, letter-spacing, and font weights. Covers styles from editorial to corporate and minimal to bold. Integrates with Next.js font loading and Google Fonts. Free and open source. Use for: instantly establishing a professional, cohesive typography system in a shadcn/ui project with a single CLI command instead of manually configuring Next.js font imports, CSS variables, and type scales.

## Links

- Website: https://www.fonttrio.xyz
- GitHub: https://github.com/kapishdima/fonttrio
- Registry JSON: https://www.fonttrio.xyz/r/{name}.json
- Directory page: https://sh4dcn.vercel.app/registry/fonttrio
- This file: https://sh4dcn.vercel.app/md/fonttrio.md

## Install

```sh
# clone the source repo
git clone https://github.com/kapishdima/fonttrio.git
# fetch the raw registry index
curl -s https://www.fonttrio.xyz/r/{name}.json
```

## Components (0)

_No public registry index resolved for this library._

## For AI agents

```text
You are adding components from @fonttrio to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/fonttrio.md) for the component list.
2. Fetch the machine-readable index: https://www.fonttrio.xyz/r/{name}.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: fonttrio).
```