From 82c56f95036e0e311da1369714f1a86ebff45913 Mon Sep 17 00:00:00 2001 From: shadcn Date: Sun, 15 Oct 2023 15:37:25 +0400 Subject: [PATCH 1/6] 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, From 2a346ede51376f99054d27fc624d84359ba91399 Mon Sep 17 00:00:00 2001 From: shadcn Date: Sun, 15 Oct 2023 16:28:57 +0400 Subject: [PATCH 2/6] feat(www): add custom close button example (#1753) --- apps/www/__registry__/index.tsx | 14 +++++ apps/www/content/docs/components/dialog.mdx | 6 ++ apps/www/public/registry/colors/index.json | 2 +- apps/www/public/registry/colors/slate.json | 2 +- .../registry/styles/default/dialog.json | 2 +- .../registry/styles/new-york/dialog.json | 2 +- .../default/example/dialog-close-button.tsx | 56 +++++++++++++++++++ .../new-york/example/dialog-close-button.tsx | 56 +++++++++++++++++++ apps/www/registry/registry.ts | 6 ++ 9 files changed, 142 insertions(+), 4 deletions(-) create mode 100644 apps/www/registry/default/example/dialog-close-button.tsx create mode 100644 apps/www/registry/new-york/example/dialog-close-button.tsx diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index 26fc8aace90..5648c92e91e 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -565,6 +565,13 @@ export const Index: Record = { component: React.lazy(() => import("@/registry/default/example/dialog-demo")), files: ["registry/default/example/dialog-demo.tsx"], }, + "dialog-close-button": { + name: "dialog-close-button", + type: "components:example", + registryDependencies: ["dialog","button"], + component: React.lazy(() => import("@/registry/default/example/dialog-close-button")), + files: ["registry/default/example/dialog-close-button.tsx"], + }, "dropdown-menu-demo": { name: "dropdown-menu-demo", type: "components:example", @@ -1574,6 +1581,13 @@ export const Index: Record = { component: React.lazy(() => import("@/registry/new-york/example/dialog-demo")), files: ["registry/new-york/example/dialog-demo.tsx"], }, + "dialog-close-button": { + name: "dialog-close-button", + type: "components:example", + registryDependencies: ["dialog","button"], + component: React.lazy(() => import("@/registry/new-york/example/dialog-close-button")), + files: ["registry/new-york/example/dialog-close-button.tsx"], + }, "dropdown-menu-demo": { name: "dropdown-menu-demo", type: "components:example", diff --git a/apps/www/content/docs/components/dialog.mdx b/apps/www/content/docs/components/dialog.mdx index d617754e509..6ea442902fd 100644 --- a/apps/www/content/docs/components/dialog.mdx +++ b/apps/www/content/docs/components/dialog.mdx @@ -76,6 +76,12 @@ import { ``` +## Examples + +### Custom close button + + + ## Notes To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or diff --git a/apps/www/public/registry/colors/index.json b/apps/www/public/registry/colors/index.json index 6b70773e73f..c25158efb11 100644 --- a/apps/www/public/registry/colors/index.json +++ b/apps/www/public/registry/colors/index.json @@ -1996,4 +1996,4 @@ "hslChannel": "343.1 87.7% 15.9%" } ] -} +} \ No newline at end of file diff --git a/apps/www/public/registry/colors/slate.json b/apps/www/public/registry/colors/slate.json index 5db830be4bf..6d80bc78579 100644 --- a/apps/www/public/registry/colors/slate.json +++ b/apps/www/public/registry/colors/slate.json @@ -89,4 +89,4 @@ }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n \n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n \n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n \n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n \n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n \n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n \n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n \n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n \n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n \n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n \n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n \n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} +} \ No newline at end of file diff --git a/apps/www/public/registry/styles/default/dialog.json b/apps/www/public/registry/styles/default/dialog.json index 21a5a1c1eba..ac03372ca6e 100644 --- a/apps/www/public/registry/styles/default/dialog.json +++ b/apps/www/public/registry/styles/default/dialog.json @@ -6,7 +6,7 @@ "files": [ { "name": "dialog.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/dialog.json b/apps/www/public/registry/styles/new-york/dialog.json index cc2a1112cb4..204029d7a21 100644 --- a/apps/www/public/registry/styles/new-york/dialog.json +++ b/apps/www/public/registry/styles/new-york/dialog.json @@ -6,7 +6,7 @@ "files": [ { "name": "dialog.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogTrigger,\n DialogClose,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/registry/default/example/dialog-close-button.tsx b/apps/www/registry/default/example/dialog-close-button.tsx new file mode 100644 index 00000000000..826d0661328 --- /dev/null +++ b/apps/www/registry/default/example/dialog-close-button.tsx @@ -0,0 +1,56 @@ +import { Copy } from "lucide-react" + +import { Button } from "@/registry/default/ui/button" +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/registry/default/ui/dialog" +import { Input } from "@/registry/default/ui/input" +import { Label } from "@/registry/default/ui/label" + +export default function DialogCloseButton() { + return ( + + + + + + + Share link + + Anyone who has this link will be able to view this. + + +
+
+ + +
+ +
+ + + + + + + + ) +} diff --git a/apps/www/registry/new-york/example/dialog-close-button.tsx b/apps/www/registry/new-york/example/dialog-close-button.tsx new file mode 100644 index 00000000000..5724000f994 --- /dev/null +++ b/apps/www/registry/new-york/example/dialog-close-button.tsx @@ -0,0 +1,56 @@ +import { CopyIcon } from "@radix-ui/react-icons" + +import { Button } from "@/registry/new-york/ui/button" +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/registry/new-york/ui/dialog" +import { Input } from "@/registry/new-york/ui/input" +import { Label } from "@/registry/new-york/ui/label" + +export default function DialogCloseButton() { + return ( + + + + + + + Share link + + Anyone who has this link will be able to view this. + + +
+
+ + +
+ +
+ + + + + + + + ) +} diff --git a/apps/www/registry/registry.ts b/apps/www/registry/registry.ts index 789a4cfcdc8..e7e8a366eaa 100644 --- a/apps/www/registry/registry.ts +++ b/apps/www/registry/registry.ts @@ -491,6 +491,12 @@ const example: Registry = [ registryDependencies: ["dialog"], files: ["example/dialog-demo.tsx"], }, + { + name: "dialog-close-button", + type: "components:example", + registryDependencies: ["dialog", "button"], + files: ["example/dialog-close-button.tsx"], + }, { name: "dropdown-menu-demo", type: "components:example", From 0176754ff2102e075c864d209ab878702428490a Mon Sep 17 00:00:00 2001 From: alex <57722812+alexwhitmore@users.noreply.github.com> Date: Mon, 16 Oct 2023 02:37:25 -0600 Subject: [PATCH 3/6] docs(www): add astro dark mode implementation (#1755) * docs(www): add astro dark mode implementation * docs(www): reduce redundancy in mode toggle --- apps/www/config/docs.ts | 5 + apps/www/content/docs/dark-mode/astro.mdx | 121 ++++++++++++++++++++++ apps/www/content/docs/dark-mode/index.mdx | 13 +++ 3 files changed, 139 insertions(+) create mode 100644 apps/www/content/docs/dark-mode/astro.mdx diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index 35f47b824a5..1f1352f90a5 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -147,6 +147,11 @@ export const docsConfig: DocsConfig = { href: "/docs/dark-mode/vite", items: [], }, + { + title: "Astro", + href: "/docs/dark-mode/astro", + items: [], + }, ], }, { diff --git a/apps/www/content/docs/dark-mode/astro.mdx b/apps/www/content/docs/dark-mode/astro.mdx new file mode 100644 index 00000000000..01e4ffe4227 --- /dev/null +++ b/apps/www/content/docs/dark-mode/astro.mdx @@ -0,0 +1,121 @@ +--- +title: Astro +description: Adding dark mode to your astro app. +--- + +## Dark mode + + + +### Create an inline theme script + +```astro title="src/pages/index.astro" +--- +import '../styles/globals.css' +--- + + + + + +

Astro

+ + + +``` + +### Add a mode toggle + +```tsx title="src/components/ModeToggle.tsx" +import * as React from "react" +import { Moon, Sun } from "lucide-react" + +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" + +export function ModeToggle() { + const [theme, setThemeState] = React.useState< + "theme-light" | "dark" | "system" + >("theme-light") + + React.useEffect(() => { + const isDarkMode = document.documentElement.classList.contains("dark") + setThemeState(isDarkMode ? "dark" : "theme-light") + }, []) + + React.useEffect(() => { + const isDark = + theme === "dark" || + (theme === "system" && + window.matchMedia("(prefers-color-scheme: dark)").matches) + document.documentElement.classList[isDark ? "add" : "remove"]("dark") + }, [theme]) + + return ( + + + + + + setThemeState("theme-light")}> + Light + + setThemeState("dark")}> + Dark + + setThemeState("system")}> + System + + + + ) +} +``` + +### Display the mode toggle + +Place a mode toggle on your site to toggle between light and dark mode. + +```astro title="src/pages/index.astro" +--- +import '../styles/globals.css' +import { ModeToggle } from '@/components/ModeToggle'; +--- + + + + + +

Astro

+ + + +``` + + diff --git a/apps/www/content/docs/dark-mode/index.mdx b/apps/www/content/docs/dark-mode/index.mdx index 214118d608a..c743279c3c2 100644 --- a/apps/www/content/docs/dark-mode/index.mdx +++ b/apps/www/content/docs/dark-mode/index.mdx @@ -30,6 +30,19 @@ description: Adding dark mode to your site.

Vite

+ + + + + +

Astro

+ ## Other frameworks From 4083876e805a7934c98776794e2fed7630f89c63 Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Mon, 16 Oct 2023 01:56:08 -0700 Subject: [PATCH 4/6] docs: update Remix config to use ESM (#1710) * docs(remix): replace postcss config sample to use export default * docs(remix): replace tailwind config sample to use export default --------- Co-authored-by: shadcn --- apps/www/content/docs/installation/remix.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx index 71235ba825e..a2e8965a9a7 100644 --- a/apps/www/content/docs/installation/remix.mdx +++ b/apps/www/content/docs/installation/remix.mdx @@ -59,7 +59,7 @@ npm add -D tailwindcss@latest autoprefixer@latest Then we create a `postcss.config.js` file: ```js -module.exports = { +export default { plugins: { tailwindcss: {}, autoprefixer: {}, @@ -71,7 +71,7 @@ And finally we add the following to our `remix.config.js` file: ```js {4-5} /** @type {import('@remix-run/dev').AppConfig} */ -module.exports = { +export default { ... tailwind: true, postcss: true, From 46f247c47f87f771d98cc77bddb5697dac200de4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ca=C3=ADque=20de=20Castro=20Soares=20da=20Silva?= Date: Mon, 16 Oct 2023 06:16:55 -0300 Subject: [PATCH 5/6] style(shadcn-ui): use space instead of tab on config fixture (#1707) * style: use space instead of tab on config fixture * style: fix identation on template script * chore(shadcn-ui): add changeset --------- Co-authored-by: shadcn --- .changeset/mean-badgers-grab.md | 5 +++++ packages/cli/src/utils/templates.ts | 8 ++++---- packages/cli/test/fixtures/next/tailwind.config.js | 4 ++-- 3 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 .changeset/mean-badgers-grab.md diff --git a/.changeset/mean-badgers-grab.md b/.changeset/mean-badgers-grab.md new file mode 100644 index 00000000000..95f7f8b239b --- /dev/null +++ b/.changeset/mean-badgers-grab.md @@ -0,0 +1,5 @@ +--- +"shadcn-ui": patch +--- + +fix code style diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts index 5af47c2f49a..94fb1d900c6 100644 --- a/packages/cli/src/utils/templates.ts +++ b/packages/cli/src/utils/templates.ts @@ -1,6 +1,6 @@ export const UTILS = `import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" - + export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } @@ -8,7 +8,7 @@ export function cn(...inputs: ClassValue[]) { export const UTILS_JS = `import { clsx } from "clsx" import { twMerge } from "tailwind-merge" - + export function cn(...inputs) { return twMerge(clsx(inputs)) } @@ -22,7 +22,7 @@ module.exports = { './components/**/*.{<%- extension %>,<%- extension %>x}', './app/**/*.{<%- extension %>,<%- extension %>x}', './src/**/*.{<%- extension %>,<%- extension %>x}', - ], + ], theme: { container: { center: true, @@ -59,7 +59,7 @@ module.exports = { './components/**/*.{<%- extension %>,<%- extension %>x}', './app/**/*.{<%- extension %>,<%- extension %>x}', './src/**/*.{<%- extension %>,<%- extension %>x}', - ], + ], theme: { container: { center: true, diff --git a/packages/cli/test/fixtures/next/tailwind.config.js b/packages/cli/test/fixtures/next/tailwind.config.js index 0377ea1ded1..da23e8eecf2 100644 --- a/packages/cli/test/fixtures/next/tailwind.config.js +++ b/packages/cli/test/fixtures/next/tailwind.config.js @@ -6,7 +6,7 @@ module.exports = { './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', - ], + ], theme: { container: { center: true, @@ -73,4 +73,4 @@ module.exports = { }, }, plugins: [require("tailwindcss-animate")], -} \ No newline at end of file +} From 14abbd94b55b565597b52ac6aadd3527df1f82ea Mon Sep 17 00:00:00 2001 From: Deveesh Shetty <89470104+Deveesh-Shetty@users.noreply.github.com> Date: Wed, 18 Oct 2023 23:03:24 +0530 Subject: [PATCH 6/6] fix(www): removes redundant class-name from `H2` component (#1703) * chore: removes redundant class from typography-h2 * chore: remove class from new york style --------- Co-authored-by: shadcn --- apps/www/registry/default/example/typography-h2.tsx | 2 +- apps/www/registry/new-york/example/typography-h2.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/www/registry/default/example/typography-h2.tsx b/apps/www/registry/default/example/typography-h2.tsx index eb4b7970e99..ea794416542 100644 --- a/apps/www/registry/default/example/typography-h2.tsx +++ b/apps/www/registry/default/example/typography-h2.tsx @@ -1,6 +1,6 @@ export default function TypographyH2() { return ( -

+

The People of the Kingdom

) diff --git a/apps/www/registry/new-york/example/typography-h2.tsx b/apps/www/registry/new-york/example/typography-h2.tsx index eb4b7970e99..ea794416542 100644 --- a/apps/www/registry/new-york/example/typography-h2.tsx +++ b/apps/www/registry/new-york/example/typography-h2.tsx @@ -1,6 +1,6 @@ export default function TypographyH2() { return ( -

+

The People of the Kingdom

)