rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-28 15:14:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: update font examples

Browse Source
This commit is contained in:
shadcn
2026-03-14 16:12:07 +04:00
parent 725ca574f6
commit ebe689e85c
2 changed files with 36 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/v4/content/docs/registry/examples.mdx
View File

@@ -325,7 +325,8 @@ A `registry:font` item installs a Google Font. The `font` field is required and
"provider": "google",
"import": "Inter",
"variable": "--font-sans",
"subsets": ["latin"]
"subsets": ["latin"],
"dependency": "@fontsource-variable/inter"
}
}
```
@@ -343,7 +344,8 @@ A `registry:font` item installs a Google Font. The `font` field is required and
"import": "JetBrains_Mono",
"variable": "--font-mono",
"weight": ["400", "500", "600", "700"],
"subsets": ["latin"]
"subsets": ["latin"],
"dependency": "@fontsource-variable/jetbrains-mono"
}
}
```
@@ -360,7 +362,8 @@ A `registry:font` item installs a Google Font. The `font` field is required and
"provider": "google",
"import": "Lora",
"variable": "--font-serif",
"subsets": ["latin"]
"subsets": ["latin"],
"dependency": "@fontsource-variable/lora"
}
}
```
@@ -380,7 +383,8 @@ Use the `selector` field to apply a font to specific CSS selectors instead of gl
"import": "Playfair_Display",
"variable": "--font-heading",
"subsets": ["latin"],
"selector": "h1, h2, h3, h4, h5, h6"
"selector": "h1, h2, h3, h4, h5, h6",
"dependency": "@fontsource-variable/playfair-display"
}
}
```

28
apps/v4/content/docs/registry/registry-item-json.mdx
View File

@@ -339,6 +339,34 @@ Environment variables are added to the `.env.local` or `.env` file. Existing var
</Callout>
### font
The `font` property is required for `registry:font` items. It configures the font family, provider, import name, CSS variable, and the npm package to install for non-Next.js projects.
```json title="registry-item.json" showLineNumbers
{
"font": {
"family": "'Inter Variable', sans-serif",
"provider": "google",
"import": "Inter",
"variable": "--font-sans",
"subsets": ["latin"],
"dependency": "@fontsource-variable/inter"
}
}
```
| Property | Type | Required | Description |
| ------------ | ---------- | -------- | ----------------------------------------------------------------------------------------- |
| `family` | `string` | Yes | The CSS font-family value. |
| `provider` | `string` | Yes | The font provider. Currently only `google` is supported. |
| `import` | `string` | Yes | The import name for the font from `next/font/google`. |
| `variable` | `string` | Yes | The CSS variable name for the font (e.g., `--font-sans`, `--font-mono`). |
| `weight` | `string[]` | No | Array of font weights to include. |
| `subsets` | `string[]` | No | Array of font subsets to include. |
| `selector` | `string` | No | CSS selector to apply the font to. Defaults to `html`. |
| `dependency` | `string` | No | The npm package to install for non-Next.js projects (e.g., `@fontsource-variable/inter`). |
### docs
Use `docs` to show custom documentation or message when installing your registry item via the CLI.