#What is FontTrio?

FontTrio is a free, open-source font pairing registry built exclusively for shadcn/ui users who want beautiful, consistent typography without spending hours choosing and configuring fonts. It's perfect for React/Next.js developers using shadcn/ui + Tailwind CSS who need production-ready heading, body, and mono fonts with a full typographic scale (h1 through body) and CSS variables — all installable in seconds via the shadcn CLI. Core value: eliminates random font hunting and inconsistent pairing decisions by offering 49 hand-curated combinations (e.g., Editorial: serif + sans + mono; Agency: bold modern + clean body + code-friendly mono) that look great together out of the box. Ideal for landing pages, dashboards, marketing sites, SaaS products, portfolios, or any shadcn/ui project where typography sets the tone.

#Features ⚡

• One-command installation via shadcn CLI — instantly adds fonts, variables, and scale to your project

• 49 curated pairings — wide range of styles: Editorial, Agency, Architect, Beacon, Clean, Bold, Friendly, Corporate, Creative, Academic, and more

• Three fonts per combo — heading (impactful/display), body (highly readable), mono (code/terminal-friendly)

• Full typography scale — h1 through body sizes, weights, and line heights pre-configured

• CSS variables ready — e.g., --font-heading, --font-body, --font-mono for easy theming

• Open-source & free — no paywalls, community-backed registry

• npm package format — @fonttrio/<slug> for each pairing, works seamlessly with shadcn/ui

#Pros ✅

• Perfectly solves the "which fonts go together?" problem for shadcn/ui projects

• Extremely fast setup — one CLI command adds everything

• High-quality curation — pairings look professional and balanced right away

• Full ownership — code/variables added to your project, no external runtime deps

• Free and open-source — no upsells for core functionality

• Tailored for modern React/Tailwind stacks — zero friction

#Cons ⚠️

• Limited to shadcn/ui ecosystem — not a general font tool (though adaptable)

• Font selection is curated (49 pairings) — no custom pairing builder yet

• Requires shadcn/ui CLI and setup — best for existing shadcn projects

• Still growing — may add more pairings over time

• Relies on Google Fonts or similar sources — check licensing for commercial use

#Included Components - Templates

• 49 font pairing packages — each @fonttrio/<slug> adds:

  • Heading font (e.g., Schibsted Grotesk, Outfit, Playfair Display)

  • Body font (e.g., Karla, Libre Baskerville, Inter)

  • Mono font (e.g., Fira Code, IBM Plex Mono, JetBrains Mono)

  • CSS variables: --font-heading, --font-body, --font-mono

  • Typography scale: h1–h6, body, small, muted, etc., with weights/line heights

• Example pairings shown: Editorial, Agency, Architect, Beacon, Clean, Bold, Friendly, Corporate, Creative, Academic, Literary, Digest, Launch, Protocol, etc.

#Pricing 💸

• Completely free and open-source — all 49 pairings available at no cost

• No Pro version or paid tiers mentioned on main site

• Optional sponsorship/support page exists to help maintain the registry and add new pairings

#Integrations 🧰

• shadcn/ui — native CLI integration (npx shadcn@latest add @fonttrio/...)

• Tailwind CSS — CSS variables work perfectly with Tailwind classes

• React / Next.js — designed for React-based projects using shadcn/ui

• Google Fonts (or similar) — most pairings pull from free/open font sources

• TypeScript — expected type-safe usage in modern setups

• GitHub — source/open contributions likely available