saturation/uiLoading...
Installation
pnpm dlx shadcn@latest add @saturation-ui/font-providerTailwind v4 — Source Scanning
The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:
@source "../components";This ensures all utility classes in CVA variants and data attribute selectors are included in your build.
Usage
import { FontProvider } from "@/components/ui/font-provider"<FontProvider preset="next">
<App />
</FontProvider>Nesting
FontProvider scopes its tokens to its subtree via CSS-variable cascade. Wrap nested subtrees in a different preset to override:
<FontProvider preset="next">
<App />
<FontProvider preset="gellix">
<MarketingHero />
</FontProvider>
</FontProvider>Reading the current preset
import { useFont } from "@/components/ui/font-provider"
function MyComponent() {
const { preset, tokens } = useFont()
return <span>Active preset: {preset}</span>
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
preset | "next" | "gellix" | "next" | Named preset to apply. `next` uses the system-font stack; `gellix` uses the Gellix typeface with ss01/cv01 OpenType features. |
tokens | { fontSans?: string; fontMono?: string; fontDisplay?: string; fontFeatureSettings?: string } | — | Fine-grained token overrides merged on top of the preset. |
asChild | boolean | false | Render styles on a passed child instead of wrapping in an extra <div>. Uses Radix Slot. |