chore(release): version packages (#4938)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/workflows/issue-stale.yml

@@ -16,11 +16,12 @@ jobs:
         name: "Close stale issues with no reproduction"
         with:
           repo-token: ${{ secrets.STALE_TOKEN }}
-          close-issue-message: "This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you."
+          close-issue-message: "This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please reopen or leave a comment. Thank you.\n(This is an automated message.)"
           days-before-issue-close: 7
-          days-before-issue-stale: 15
+          days-before-issue-stale: 30
           stale-pr-label: "stale?"
-          days-before-pr-close: -1
-          days-before-pr-stale: -1
+          days-before-pr-close: 7
+          days-before-pr-stale: 15
+          only-pr-labels: "postpone: more info or changes requested,please add a reproduction"
           exempt-issue-labels: "roadmap,next,bug"
           operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close

apps/www/content/docs/components/data-table.mdx

@@ -12,7 +12,7 @@ links:
 
 Every data table or datagrid I've created has been unique. They all behave differently, have specific sorting and filtering requirements, and work with different data sources.
 
-It doesn't make sense to combine all of these variations into a single component. If we do that, we'll lose the flexibility that [headless UI](https://tanstack.com/table/v8/docs/guide/introduction#what-is-headless-ui) provides.
+It doesn't make sense to combine all of these variations into a single component. If we do that, we'll lose the flexibility that [headless UI](https://tanstack.com/table/v8/docs/introduction#what-is-headless-ui) provides.
 
 So instead of a data-table component, I thought it would be more helpful to provide a guide on how to build your own.
 

apps/www/content/docs/components/toast.mdx

@@ -104,7 +104,7 @@ export default function RootLayout({ children }) {
 The `useToast` hook returns a `toast` function that you can use to display a toast.
 
 ```tsx
-import { useToast } from "@/components/hooks/use-toast"
+import { useToast } from "@/hooks/use-toast"
 ```
 
 ```tsx {2,7-10}

apps/www/public/r/styles/default/input.json

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/public/r/styles/new-york/input.json

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/registry/default/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

apps/www/registry/new-york/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

apps/www/registry/schema.ts

@@ -62,6 +62,7 @@ export const registryEntrySchema = z.object({
   category: z.string().optional(),
   subcategory: z.string().optional(),
   chunks: z.array(blockChunkSchema).optional(),
+  docs: z.string().optional(),
 })
 
 export const registrySchema = z.array(registryEntrySchema)

packages/cli/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @shadcn/ui
 
+## 0.9.1
+
+### Patch Changes
+
+- [#4797](https://github.com/shadcn-ui/ui/pull/4797) [`207b69f`](https://github.com/shadcn-ui/ui/commit/207b69fe8dd59b10dddc9337d333416976e2a30d) Thanks [@Wiper-R](https://github.com/Wiper-R)! - add scss support
+
 ## 0.9.0
 
 ### Minor Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"

packages/cli/src/utils/get-project-info.ts

@@ -133,7 +133,7 @@ export async function getProjectType(cwd: string): Promise<ProjectType | null> {
 }
 
 export async function getTailwindCssFile(cwd: string) {
-  const files = await fg.glob("**/*.css", {
+  const files = await fg.glob(["**/*.css", "**/*.scss"], {
     cwd,
     deep: 3,
     ignore: PROJECT_SHARED_IGNORE,

packages/shadcn/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @shadcn/ui
 
+## 2.0.8
+
+### Patch Changes
+
+- [#4922](https://github.com/shadcn-ui/ui/pull/4922) [`c62167a`](https://github.com/shadcn-ui/ui/commit/c62167a449a5cf82d8ed93a7af986d5e503893bb) Thanks [@sapenlei](https://github.com/sapenlei)! - remove next.js default vars
+
+- [#4871](https://github.com/shadcn-ui/ui/pull/4871) [`ce3adfa`](https://github.com/shadcn-ui/ui/commit/ce3adfa075793a46b4fb2ff797ce87ad22bfa2cd) Thanks [@bcorbold](https://github.com/bcorbold)! - support tw prefixes for registry files with single quote formatting
+
+## 2.0.7
+
+### Patch Changes
+
+- [#4848](https://github.com/shadcn-ui/ui/pull/4848) [`1af66c2`](https://github.com/shadcn-ui/ui/commit/1af66c2d08df7dd7f6a8d4d1544d965e41a1fb0d) Thanks [@jherr](https://github.com/jherr)! - add support for ~ dir in target path
+
+- [#4815](https://github.com/shadcn-ui/ui/pull/4815) [`408760a`](https://github.com/shadcn-ui/ui/commit/408760a93b398b7d02a0a522a74a7a195ccda7c4) Thanks [@rana-haris-ali](https://github.com/rana-haris-ali)! - fix typo in error message
+
+## 2.0.6
+
+### Patch Changes
+
+- [#4820](https://github.com/shadcn-ui/ui/pull/4820) [`64b2f1a`](https://github.com/shadcn-ui/ui/commit/64b2f1a5ad865c831045c954fec85e0fec2289e7) Thanks [@shadcn](https://github.com/shadcn)! - add docs support
+
+## 2.0.5
+
+### Patch Changes
+
+- [#4787](https://github.com/shadcn-ui/ui/pull/4787) [`99ff9ca`](https://github.com/shadcn-ui/ui/commit/99ff9caf7180c8c19df130969bdef3d0fb78b218) Thanks [@shadcn](https://github.com/shadcn)! - add src to content for tailwind
+
 ## 2.0.4
 
 ### Patch Changes

packages/shadcn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn",
-  "version": "2.0.4",
+  "version": "2.0.8",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"

packages/shadcn/src/commands/init.ts

@@ -20,6 +20,7 @@ import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
 import { getRegistryBaseColors, getRegistryStyles } from "@/src/utils/registry"
 import { spinner } from "@/src/utils/spinner"
+import { updateTailwindContent } from "@/src/utils/updaters/update-tailwind-content"
 import { Command } from "commander"
 import prompts from "prompts"
 import { z } from "zod"
@@ -137,6 +138,18 @@ export async function runInit(
       options.isNewProject || projectInfo?.framework.name === "next-app",
   })
 
+  // If a new project is using src dir, let's update the tailwind content config.
+  // TODO: Handle this per framework.
+  if (options.isNewProject && options.srcDir) {
+    await updateTailwindContent(
+      ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+      fullConfig,
+      {
+        silent: options.silent,
+      }
+    )
+  }
+
   return fullConfig
 }
 

packages/shadcn/src/utils/add-components.ts

@@ -1,5 +1,6 @@
 import { type Config } from "@/src/utils/get-config"
 import { handleError } from "@/src/utils/handle-error"
+import { logger } from "@/src/utils/logger"
 import { registryResolveItemsTree } from "@/src/utils/registry"
 import { spinner } from "@/src/utils/spinner"
 import { updateCssVars } from "@/src/utils/updaters/update-css-vars"
@@ -48,4 +49,8 @@ export async function addComponents(
     overwrite: options.overwrite,
     silent: options.silent,
   })
+
+  if (tree.docs) {
+    logger.info(tree.docs)
+  }
 }

packages/shadcn/src/utils/create-project.ts

@@ -23,7 +23,7 @@ export async function createProject(
       name: "proceed",
       message: `The path ${highlighter.info(
         options.cwd
-      )} is does not contain a package.json file. Would you like to start a new ${highlighter.info(
+      )} does not contain a package.json file. Would you like to start a new ${highlighter.info(
         "Next.js"
       )} project?`,
       initial: true,

packages/shadcn/src/utils/get-project-info.ts

@@ -108,7 +108,7 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
 }
 
 export async function getTailwindCssFile(cwd: string) {
-  const files = await fg.glob("**/*.css", {
+  const files = await fg.glob(["**/*.css", "**/*.scss"], {
     cwd,
     deep: 5,
     ignore: PROJECT_SHARED_IGNORE,

packages/shadcn/src/utils/registry/index.ts

@@ -321,6 +321,13 @@ export async function registryResolveItemsTree(
       cssVars = deepmerge(cssVars, item.cssVars ?? {})
     })
 
+    let docs = ""
+    payload.forEach((item) => {
+      if (item.docs) {
+        docs += `${item.docs}\n`
+      }
+    })
+
     return registryResolvedItemsTreeSchema.parse({
       dependencies: deepmerge.all(
         payload.map((item) => item.dependencies ?? [])
@@ -331,6 +338,7 @@ export async function registryResolveItemsTree(
       files: deepmerge.all(payload.map((item) => item.files ?? [])),
       tailwind,
       cssVars,
+      docs,
     })
   } catch (error) {
     handleError(error)

packages/shadcn/src/utils/registry/schema.ts

@@ -46,6 +46,7 @@ export const registryItemSchema = z.object({
   tailwind: registryItemTailwindSchema.optional(),
   cssVars: registryItemCssVarsSchema.optional(),
   meta: z.record(z.string(), z.any()).optional(),
+  docs: z.string().optional(),
 })
 
 export type RegistryItem = z.infer<typeof registryItemSchema>
@@ -82,4 +83,5 @@ export const registryResolvedItemsTreeSchema = registryItemSchema.pick({
   files: true,
   tailwind: true,
   cssVars: true,
+  docs: true,
 })

packages/shadcn/src/utils/transformers/transform-tw-prefix.ts

@@ -22,7 +22,7 @@ export const transformTwPrefixes: Transformer = async ({
         if (defaultClassNames) {
           defaultClassNames.replaceWithText(
             `"${applyPrefix(
-              defaultClassNames.getText()?.replace(/"/g, ""),
+              defaultClassNames.getText()?.replace(/"|'/g, ""),
               config.tailwind.prefix
             )}"`
           )
@@ -46,7 +46,7 @@ export const transformTwPrefixes: Transformer = async ({
                 if (classNames) {
                   classNames?.replaceWithText(
                     `"${applyPrefix(
-                      classNames.getText()?.replace(/"/g, ""),
+                      classNames.getText()?.replace(/"|'/g, ""),
                       config.tailwind.prefix
                     )}"`
                   )
@@ -65,7 +65,7 @@ export const transformTwPrefixes: Transformer = async ({
         if (value) {
           value.replaceWithText(
             `"${applyPrefix(
-              value.getText()?.replace(/"/g, ""),
+              value.getText()?.replace(/"|'/g, ""),
               config.tailwind.prefix
             )}"`
           )
@@ -91,7 +91,7 @@ export const transformTwPrefixes: Transformer = async ({
                 .forEach((node) => {
                   node.replaceWithText(
                     `"${applyPrefix(
-                      node.getText()?.replace(/"/g, ""),
+                      node.getText()?.replace(/"|'/g, ""),
                       config.tailwind.prefix
                     )}"`
                   )
@@ -101,7 +101,7 @@ export const transformTwPrefixes: Transformer = async ({
             if (node.isKind(SyntaxKind.StringLiteral)) {
               node.replaceWithText(
                 `"${applyPrefix(
-                  node.getText()?.replace(/"/g, ""),
+                  node.getText()?.replace(/"|'/g, ""),
                   config.tailwind.prefix
                 )}"`
               )
@@ -130,7 +130,7 @@ export const transformTwPrefixes: Transformer = async ({
                       .forEach((node) => {
                         node.replaceWithText(
                           `"${applyPrefix(
-                            node.getText()?.replace(/"/g, ""),
+                            node.getText()?.replace(/"|'/g, ""),
                             config.tailwind.prefix
                           )}"`
                         )
@@ -140,7 +140,7 @@ export const transformTwPrefixes: Transformer = async ({
                   if (arg.isKind(SyntaxKind.StringLiteral)) {
                     arg.replaceWithText(
                       `"${applyPrefix(
-                        arg.getText()?.replace(/"/g, ""),
+                        arg.getText()?.replace(/"|'/g, ""),
                         config.tailwind.prefix
                       )}"`
                     )
@@ -155,7 +155,7 @@ export const transformTwPrefixes: Transformer = async ({
                 if (classNames) {
                   classNames.replaceWithText(
                     `"${applyPrefix(
-                      classNames.getText()?.replace(/"/g, ""),
+                      classNames.getText()?.replace(/"|'/g, ""),
                       config.tailwind.prefix
                     )}"`
                   )

packages/shadcn/src/utils/updaters/update-css-vars.ts

@@ -183,6 +183,27 @@ function updateCssVarsPlugin(
   }
 }
 
+function removeConflictVars(root: Rule | Root) {
+  const rootRule = root.nodes.find(
+    (node): node is Rule => node.type === "rule" && node.selector === ":root"
+  )
+
+  if (rootRule) {
+    const propsToRemove = ["--background", "--foreground"]
+
+    rootRule.nodes
+      .filter(
+        (node): node is postcss.Declaration =>
+          node.type === "decl" && propsToRemove.includes(node.prop)
+      )
+      .forEach((node) => node.remove())
+
+    if (rootRule.nodes.length === 0) {
+      rootRule.remove()
+    }
+  }
+}
+
 function cleanupDefaultNextStylesPlugin() {
   return {
     postcssPlugin: "cleanup-default-next-styles",
@@ -197,7 +218,9 @@ function cleanupDefaultNextStylesPlugin() {
             (node): node is postcss.Declaration =>
               node.type === "decl" &&
               node.prop === "color" &&
-              node.value === "rgb(var(--foreground-rgb))"
+              ["rgb(var(--foreground-rgb))", "var(--foreground)"].includes(
+                node.value
+              )
           )
           ?.remove()
 
@@ -208,7 +231,8 @@ function cleanupDefaultNextStylesPlugin() {
               node.type === "decl" &&
               node.prop === "background" &&
               // This is only going to run on create project, so all good.
-              node.value.startsWith("linear-gradient")
+              (node.value.startsWith("linear-gradient") ||
+                node.value === "var(--background)")
             )
           })
           ?.remove()
@@ -218,6 +242,21 @@ function cleanupDefaultNextStylesPlugin() {
           bodyRule.remove()
         }
       }
+
+      removeConflictVars(root)
+
+      const darkRootRule = root.nodes.find(
+        (node): node is Rule =>
+          node.type === "atrule" &&
+          node.params === "(prefers-color-scheme: dark)"
+      )
+
+      if (darkRootRule) {
+        removeConflictVars(darkRootRule)
+        if (darkRootRule.nodes.length === 0) {
+          darkRootRule.remove()
+        }
+      }
     },
   }
 }

packages/shadcn/src/utils/updaters/update-files.ts

@@ -17,6 +17,19 @@ import { transformRsc } from "@/src/utils/transformers/transform-rsc"
 import { transformTwPrefixes } from "@/src/utils/transformers/transform-tw-prefix"
 import prompts from "prompts"
 
+export function resolveTargetDir(
+  projectInfo: Awaited<ReturnType<typeof getProjectInfo>>,
+  config: Config,
+  target: string
+) {
+  if (target.startsWith("~/")) {
+    return path.join(config.resolvedPaths.cwd, target.replace("~/", ""))
+  }
+  return projectInfo?.isSrcDir
+    ? path.join(config.resolvedPaths.cwd, "src", target)
+    : path.join(config.resolvedPaths.cwd, target)
+}
+
 export async function updateFiles(
   files: RegistryItem["files"],
   config: Config,
@@ -58,9 +71,7 @@ export async function updateFiles(
     let filePath = path.join(targetDir, fileName)
 
     if (file.target) {
-      filePath = projectInfo?.isSrcDir
-        ? path.join(config.resolvedPaths.cwd, "src", file.target)
-        : path.join(config.resolvedPaths.cwd, file.target)
+      filePath = resolveTargetDir(projectInfo, config, file.target)
       targetDir = path.dirname(filePath)
     }
 

packages/shadcn/src/utils/updaters/update-tailwind-config.ts

@@ -249,7 +249,7 @@ function addTailwindConfigPlugin(
   return configObject
 }
 
-async function _createSourceFile(input: string, config: Config | null) {
+export async function _createSourceFile(input: string, config: Config | null) {
   const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-"))
   const resolvedPath =
     config?.resolvedPaths?.tailwindConfig || "tailwind.config.ts"
@@ -268,7 +268,7 @@ async function _createSourceFile(input: string, config: Config | null) {
   return sourceFile
 }
 
-function _getQuoteChar(configObject: ObjectLiteralExpression) {
+export function _getQuoteChar(configObject: ObjectLiteralExpression) {
   return configObject
     .getFirstDescendantByKind(SyntaxKind.StringLiteral)
     ?.getQuoteKind() === QuoteKind.Single

packages/shadcn/src/utils/updaters/update-tailwind-content.ts

@@ -0,0 +1,121 @@
+import { promises as fs } from "fs"
+import path from "path"
+import { Config } from "@/src/utils/get-config"
+import { highlighter } from "@/src/utils/highlighter"
+import { spinner } from "@/src/utils/spinner"
+import {
+  _createSourceFile,
+  _getQuoteChar,
+} from "@/src/utils/updaters/update-tailwind-config"
+import { ObjectLiteralExpression, SyntaxKind } from "ts-morph"
+
+export async function updateTailwindContent(
+  content: string[],
+  config: Config,
+  options: {
+    silent?: boolean
+  }
+) {
+  if (!content) {
+    return
+  }
+
+  options = {
+    silent: false,
+    ...options,
+  }
+
+  const tailwindFileRelativePath = path.relative(
+    config.resolvedPaths.cwd,
+    config.resolvedPaths.tailwindConfig
+  )
+  const tailwindSpinner = spinner(
+    `Updating ${highlighter.info(tailwindFileRelativePath)}`,
+    {
+      silent: options.silent,
+    }
+  ).start()
+  const raw = await fs.readFile(config.resolvedPaths.tailwindConfig, "utf8")
+  const output = await transformTailwindContent(raw, content, config)
+  await fs.writeFile(config.resolvedPaths.tailwindConfig, output, "utf8")
+  tailwindSpinner?.succeed()
+}
+
+export async function transformTailwindContent(
+  input: string,
+  content: string[],
+  config: Config
+) {
+  const sourceFile = await _createSourceFile(input, config)
+  // Find the object with content property.
+  // This is faster than traversing the default export.
+  // TODO: maybe we do need to traverse the default export?
+  const configObject = sourceFile
+    .getDescendantsOfKind(SyntaxKind.ObjectLiteralExpression)
+    .find((node) =>
+      node
+        .getProperties()
+        .some(
+          (property) =>
+            property.isKind(SyntaxKind.PropertyAssignment) &&
+            property.getName() === "content"
+        )
+    )
+
+  // We couldn't find the config object, so we return the input as is.
+  if (!configObject) {
+    return input
+  }
+
+  addTailwindConfigContent(configObject, content)
+
+  return sourceFile.getFullText()
+}
+
+async function addTailwindConfigContent(
+  configObject: ObjectLiteralExpression,
+  content: string[]
+) {
+  const quoteChar = _getQuoteChar(configObject)
+
+  const existingProperty = configObject.getProperty("content")
+
+  if (!existingProperty) {
+    const newProperty = {
+      name: "content",
+      initializer: `[${quoteChar}${content.join(
+        `${quoteChar}, ${quoteChar}`
+      )}${quoteChar}]`,
+    }
+    configObject.addPropertyAssignment(newProperty)
+
+    return configObject
+  }
+
+  if (existingProperty.isKind(SyntaxKind.PropertyAssignment)) {
+    const initializer = existingProperty.getInitializer()
+
+    // If property is an array, append.
+    if (initializer?.isKind(SyntaxKind.ArrayLiteralExpression)) {
+      for (const contentItem of content) {
+        const newValue = `${quoteChar}${contentItem}${quoteChar}`
+
+        // Check if the array already contains the value.
+        if (
+          initializer
+            .getElements()
+            .map((element) => element.getText())
+            .includes(newValue)
+        ) {
+          continue
+        }
+
+        initializer.addElement(newValue)
+      }
+    }
+
+    return configObject
+  }
+
+  return configObject
+}

packages/shadcn/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap

@@ -25,6 +25,14 @@ export function Foo() {
 `;
 
 exports[`transform tailwind prefix 4`] = `
+"import * as React from "react"
+export function Foo() {
+	return <div className={cn("tw-bg-background hover:tw-bg-muted", true && "tw-text-primary-foreground sm:focus:tw-text-accent-foreground")}>foo</div>
+}
+    "
+`;
+
+exports[`transform tailwind prefix 5`] = `
 "@tailwind base;
 @tailwind components;
 @tailwind utilities;

packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap

@@ -20,6 +20,7 @@ exports[`registryResolveItemTree > should resolve index 1`] = `
     "tailwind-merge",
   ],
   "devDependencies": [],
+  "docs": "",
   "files": [
     {
       "content": ""use client"
@@ -93,6 +94,7 @@ exports[`registryResolveItemTree > should resolve items tree 1`] = `
     "@radix-ui/react-slot",
   ],
   "devDependencies": [],
+  "docs": "",
   "files": [
     {
       "content": "import * as React from "react"
@@ -171,6 +173,7 @@ exports[`registryResolveItemTree > should resolve multiple items tree 1`] = `
     "@radix-ui/react-dialog",
   ],
   "devDependencies": [],
+  "docs": "",
   "files": [
     {
       "content": "import * as React from "react"
@@ -248,7 +251,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

packages/shadcn/test/utils/transform-tw-prefix.test.ts

@@ -73,6 +73,29 @@ export function Foo() {
     })
   ).toMatchSnapshot()
 
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `import * as React from "react"
+export function Foo() {
+	return <div className={cn('bg-background hover:bg-muted', true && 'text-primary-foreground sm:focus:text-accent-foreground')}>foo</div>
+}
+    `,
+      config: {
+        tailwind: {
+          baseColor: "stone",
+          cssVariables: false,
+          prefix: "tw-",
+        },
+        aliases: {
+          components: "@/components",
+          utils: "@/lib/utils",
+        },
+      },
+      baseColor: stone,
+    })
+  ).toMatchSnapshot()
+
   expect(
     applyPrefixesCss(
       "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n \n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n \n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n \n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n \n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n \n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 217.9 10.6% 64.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n \n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n \n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n \n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n \n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n \n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n \n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n \n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 215 27.9% 16.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}",

packages/shadcn/test/utils/updaters/__snapshots__/update-tailwind-content.test.ts.snap

@@ -0,0 +1,52 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`transformTailwindContent -> content property > should NOT add content property if already in config 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+        "./bar/**/*.{js,ts,jsx,tsx,mdx}"
+    ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindContent -> content property > should add content property if not in config 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+        "./foo/**/*.{js,ts,jsx,tsx,mdx}",
+        "./bar/**/*.{js,ts,jsx,tsx,mdx}"
+    ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  "
+`;

packages/shadcn/test/utils/updaters/update-files.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, test } from "vitest"
+
+import { resolveTargetDir } from "../../../src/utils/updaters/update-files"
+
+describe("resolveTargetDir", () => {
+  test("should handle a home target without a src directory", () => {
+    const targetDir = resolveTargetDir(
+      {
+        isSrcDir: false,
+      },
+      {
+        resolvedPaths: {
+          cwd: "/foo/bar",
+        },
+      },
+      "~/.env"
+    )
+    expect(targetDir).toBe("/foo/bar/.env")
+  })
+
+  test("should handle a home target even with a src directory", () => {
+    const targetDir = resolveTargetDir(
+      {
+        isSrcDir: true,
+      },
+      {
+        resolvedPaths: {
+          cwd: "/foo/bar",
+        },
+      },
+      "~/.env"
+    )
+    expect(targetDir).toBe("/foo/bar/.env")
+  })
+
+  test("should handle a simple target", () => {
+    const targetDir = resolveTargetDir(
+      {
+        isSrcDir: false,
+      },
+      {
+        resolvedPaths: {
+          cwd: "/foo/bar",
+        },
+      },
+      "./components/ui/button.tsx"
+    )
+    expect(targetDir).toBe("/foo/bar/components/ui/button.tsx")
+  })
+
+  test("should handle a simple target with src directory", () => {
+    const targetDir = resolveTargetDir(
+      {
+        isSrcDir: true,
+      },
+      {
+        resolvedPaths: {
+          cwd: "/foo/bar",
+        },
+      },
+      "./components/ui/button.tsx"
+    )
+    expect(targetDir).toBe("/foo/bar/src/components/ui/button.tsx")
+  })
+})

packages/shadcn/test/utils/updaters/update-tailwind-content.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, test } from "vitest"
+
+import { transformTailwindContent } from "../../../src/utils/updaters/update-tailwind-content"
+
+const SHARED_CONFIG = {
+  $schema: "https://ui.shadcn.com/schema.json",
+  style: "new-york",
+  rsc: true,
+  tsx: true,
+  tailwind: {
+    config: "tailwind.config.ts",
+    css: "app/globals.css",
+    baseColor: "slate",
+    cssVariables: true,
+  },
+  aliases: {
+    components: "@/components",
+    utils: "@/lib/utils",
+  },
+  resolvedPaths: {
+    cwd: ".",
+    tailwindConfig: "tailwind.config.ts",
+    tailwindCss: "app/globals.css",
+    components: "./components",
+    utils: "./lib/utils",
+    ui: "./components/ui",
+  },
+}
+
+describe("transformTailwindContent -> content property", () => {
+  test("should add content property if not in config", async () => {
+    expect(
+      await transformTailwindContent(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  `,
+        ["./foo/**/*.{js,ts,jsx,tsx,mdx}", "./bar/**/*.{js,ts,jsx,tsx,mdx}"],
+        {
+          config: SHARED_CONFIG,
+        }
+      )
+    ).toMatchSnapshot()
+  })
+
+  test("should NOT add content property if already in config", async () => {
+    expect(
+      await transformTailwindContent(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  `,
+        ["./app/**/*.{js,ts,jsx,tsx,mdx}", "./bar/**/*.{js,ts,jsx,tsx,mdx}"],
+        {
+          config: SHARED_CONFIG,
+        }
+      )
+    ).toMatchSnapshot()
+  })
+})