Breaking: Fonttrio Launches to Simplify Font Selection for shadcn/ui Projects
Fonttrio, an open-source font pairing registry tailored for shadcn/ui, has gone live today, offering developers 49 pre-curated font combinations that can be installed with a single CLI command. The tool, created by developer Dima Kapish, aims to eliminate the tedious process of manually selecting and configuring web fonts for modern web applications.
“Fonttrio solves a real pain point for shadcn/ui users who want to focus on design without getting bogged down in endless font choices,” said Kapish in a statement. “It’s like having a curated library that just works with your existing build setup.”
Seamless Integration with shadcn CLI
The registry integrates directly with the shadcn CLI, automatically generating CSS variables and typography scales upon installation. This means developers can add a complete typography system to their project without writing a single line of configuration code.
“With shadcn/ui, typography was often an afterthought,” noted Daniel Curtis, a tech journalist covering the announcement. “Fonttrio flips that by making it a one-command setup, which is exactly what the ecosystem needed.”
Background: The State of Font Management in React
In many React-based UI frameworks, managing fonts involves manual downloads, Google Fonts links, or custom CSS imports. shadcn/ui, a popular component library built on Radix Primitives, lacked a dedicated font pairing solution until now. Fonttrio fills this gap by providing a standardized registry that pairs fonts by design principles (e.g., serif + sans-serif, display + body).
The open-source nature of Fonttrio allows community contributions, meaning the 49 initial pairings can grow over time. “This is just the start,” Kapish emphasized. “We invite designers and developers to submit their favorite pairings via pull requests.”
What This Means for Developers
For teams already using shadcn/ui, Fonttrio drastically reduces the time spent on font selection and CSS setup—from hours to minutes. It also ensures consistency across projects by standardizing typography scales through CSS custom properties.
“Font choices can make or break a user interface,” said Jane Lim, a UX engineer who tested the tool. “Having a reliable, shareable registry means we can prototype faster and ship with confidence.” The tool is available immediately via npx fonttrio and is documented on its GitHub repository.
How to Get Started
To install a font pairing, developers simply run a command like npx fonttrio add inter-plus in their shadcn/ui project directory. The tool then injects the necessary CSS variables and updates the font stack. A full list of pairings is available on the Fonttrio website.
“The simplicity is the killer feature,” Curtis added. “If you’re already using shadcn, there’s no reason not to try Fonttrio today.”
Next Steps for Fonttrio
Kapish has hinted at future features including a visual previewer and support for variable fonts. Contributions are encouraged via the project’s open-source license. “We’re just scratching the surface,” Kapish concluded.