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,