docs(www): add fonts docs (shadcn-ui#1752)

artabr · Oct 15, 2023 · 416c4a4 · 416c4a4
1 parent 271fb87
commit 416c4a4
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 0 deletions.
diff --git a/content/docs/installation/next.mdx b/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 (
+    <html lang="en" suppressHydrationWarning>
+      <head />
+      <body
+        className={cn(
+          "min-h-screen bg-background font-sans antialiased",
+          fontSans.variable
+        )}
+      >
+        ...
+      </body>
+    </html>
+  )
+}
+```
+
+**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/registry/default/ui/dialog.tsx b/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<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
@@ -110,6 +112,7 @@ export {
   Dialog,
   DialogPortal,
   DialogOverlay,
+  DialogClose,
   DialogTrigger,
   DialogContent,
   DialogHeader,

diff --git a/registry/new-york/ui/dialog.tsx b/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<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
@@ -111,6 +113,7 @@ export {
   DialogPortal,
   DialogOverlay,
   DialogTrigger,
+  DialogClose,
   DialogContent,
   DialogHeader,
   DialogFooter,