From 82c56f95036e0e311da1369714f1a86ebff45913 Mon Sep 17 00:00:00 2001
From: shadcn
Date: Sun, 15 Oct 2023 15:37:25 +0400
Subject: [PATCH] docs(www): add fonts docs (#1752)
---
apps/www/content/docs/installation/next.mdx | 53 +++++++++++++++++++++
apps/www/registry/default/ui/dialog.tsx | 3 ++
apps/www/registry/new-york/ui/dialog.tsx | 3 ++
3 files changed, 59 insertions(+)
diff --git a/apps/www/content/docs/installation/next.mdx b/apps/www/content/docs/installation/next.mdx
index 8cda7fde6fa..505fadfbebe 100644
--- a/apps/www/content/docs/installation/next.mdx
+++ b/apps/www/content/docs/installation/next.mdx
@@ -37,6 +37,59 @@ Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes
```
+### Fonts
+
+I use [Inter](https://rsms.me/inter/) as the default font. Inter is not required. You can replace it with any other font.
+
+Here's how I configure Inter for Next.js:
+
+**1. Import the font in the root layout:**
+
+```js showLineNumbers title=app/layout.tsx {2,4-7,15-16}
+import "@/styles/globals.css"
+import { Inter as FontSans } from "next/font/google"
+
+export const fontSans = FontSans({
+ subsets: ["latin"],
+ variable: "--font-sans",
+})
+
+export default function RootLayout({ children }: RootLayoutProps) {
+ return (
+
+
+
+ ...
+
+
+ )
+}
+```
+
+**2. Configure `theme.extend.fontFamily` in `tailwind.config.js`**
+
+```js showLineNumbers title=tailwind.config.js {9-11}
+const { fontFamily } = require("tailwindcss/defaultTheme")
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: ["class"],
+ content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
+ theme: {
+ extend: {
+ fontFamily: {
+ sans: ["var(--font-sans)", ...fontFamily.sans],
+ },
+ },
+ },
+}
+```
+
### App structure
Here's how I structure my Next.js apps. You can use this as a reference:
diff --git a/apps/www/registry/default/ui/dialog.tsx b/apps/www/registry/default/ui/dialog.tsx
index 47ce215739d..80ee7d62210 100644
--- a/apps/www/registry/default/ui/dialog.tsx
+++ b/apps/www/registry/default/ui/dialog.tsx
@@ -12,6 +12,8 @@ const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = DialogPrimitive.Portal
+const DialogClose = DialogPrimitive.Close
+
const DialogOverlay = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
@@ -110,6 +112,7 @@ export {
Dialog,
DialogPortal,
DialogOverlay,
+ DialogClose,
DialogTrigger,
DialogContent,
DialogHeader,
diff --git a/apps/www/registry/new-york/ui/dialog.tsx b/apps/www/registry/new-york/ui/dialog.tsx
index cf284e9d74c..5e7c09521b2 100644
--- a/apps/www/registry/new-york/ui/dialog.tsx
+++ b/apps/www/registry/new-york/ui/dialog.tsx
@@ -12,6 +12,8 @@ const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = DialogPrimitive.Portal
+const DialogClose = DialogPrimitive.Close
+
const DialogOverlay = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
@@ -111,6 +113,7 @@ export {
DialogPortal,
DialogOverlay,
DialogTrigger,
+ DialogClose,
DialogContent,
DialogHeader,
DialogFooter,