feat(shadcn): registry updates (#7016)

* feat(shadcn): registry updates

* tests: fix snapshots

* feat(shadcn): add new theme prop

* fix: handle theme for index

* tests(shadcn): fix

* docs(www): update registry item docs

* chore: add changeset

* docs: update theming docs

Author: shadcn

.changeset/warm-fans-protect.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add theme prop to registry-item schema

apps/www/content/docs/registry/faq.mdx

@@ -49,6 +49,46 @@ Here's an example of a complex component that installs a page, two components, a
 
 ### How do I add a new Tailwind color?
 
+<Tabs defaultValue="v4">
+
+<TabsList>
+  <TabsTrigger value="v4">Tailwind CSS v4</TabsTrigger>
+  <TabsTrigger value="v3">Tailwind CSS v3</TabsTrigger>
+</TabsList>
+
+<TabsContent value="v4">
+
+To add a new color you need to add it to `cssVars` under `light` and `dark` keys.
+
+```json showLineNumbers {10-18}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    // ...
+  ],
+  "cssVars": {
+    "light": {
+      "brand-background": "20 14.3% 4.1%",
+      "brand-accent": "20 14.3% 4.1%"
+    },
+    "dark": {
+      "brand-background": "20 14.3% 4.1%",
+      "brand-accent": "20 14.3% 4.1%"
+    }
+  }
+}
+```
+
+The CLI will update the project CSS file. Once updated, the new colors will be available to be used as utility classes: `bg-brand` and `text-brand-accent`.
+
+</TabsContent>
+
+<TabsContent value="v3">
+
 To add a new color you need to add it to `cssVars` and `tailwind.config.theme.extend.colors`.
 
 ```json showLineNumbers {10-19} {24-29}
@@ -90,9 +130,47 @@ To add a new color you need to add it to `cssVars` and `tailwind.config.theme.ex
 
 The CLI will update the project CSS file and tailwind.config.js file. Once updated, the new colors will be available to be used as utility classes: `bg-brand` and `text-brand-accent`.
 
-### How do I add a Tailwind animation?
+</TabsContent>
+</Tabs>
+
+### How do I add or override a Tailwind theme variable?
+
+<Tabs defaultValue="v4">
+
+<TabsList>
+  <TabsTrigger value="v4">Tailwind CSS v4</TabsTrigger>
+  <TabsTrigger value="v3">Tailwind CSS v3</TabsTrigger>
+</TabsList>
+
+<TabsContent value="v4">
+
+To add or override a theme variable you add it to `cssVars.theme` under the key you want to add or override.
+
+```json showLineNumbers {10-15}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    // ...
+  ],
+  "cssVars": {
+    "theme": {
+      "text-base": "3rem",
+      "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "font-heading": "Poppins, sans-serif"
+    }
+  }
+}
+```
+
+</TabsContent>
 
-To add a new animation you add it to `tailwind.config.theme.extend.animation` and `tailwind.config.theme.extend.keyframes`.
+<TabsContent value="v3">
+
+To override a theme variable you add it to `tailwind.config.theme.extend` under the key you want to override.
 
 ```json showLineNumbers {14-22}
 {
@@ -108,18 +186,15 @@ To add a new animation you add it to `tailwind.config.theme.extend.animation` an
     "config": {
       "theme": {
         "extend": {
-          "keyframes": {
-            "wiggle": {
-              "0%, 100%": { "transform": "rotate(-3deg)" },
-              "50%": { "transform": "rotate(3deg)" }
-            }
-          },
-          "animation": {
-            "wiggle": "wiggle 1s ease-in-out infinite"
+          "text": {
+            "base": "3rem"
           }
         }
       }
     }
   }
 }
 ```
+
+</TabsContent>
+</Tabs>

apps/www/content/docs/registry/registry-item-json.mdx

@@ -21,7 +21,18 @@ The `registry-item.json` schema is used to define your custom registry items.
       "path": "registry/new-york/hello-world/use-hello-world.ts",
       "type": "registry:hook"
     }
-  ]
+  ],
+  "cssVars": {
+    "theme": {
+      "font-heading": "Poppins, sans-serif"
+    },
+    "light": {
+      "brand": "20 14.3% 4.1%"
+    },
+    "dark": {
+      "brand": "20 14.3% 4.1%"
+    }
+  }
 }
 ```
 
@@ -41,7 +52,7 @@ The `$schema` property is used to specify the schema for the `registry-item.json
 
 ### name
 
-The `name` property is used to specify the name of your registry item.
+The name of the item. This is used to identify the item in the registry. It should be unique for your registry.
 
 ```json title="registry-item.json" showLineNumbers
 {
@@ -71,7 +82,7 @@ A description of your registry item. This can be longer and more detailed than t
 
 ### type
 
-The `type` property is used to specify the type of your registry item.
+The `type` property is used to specify the type of your registry item. This is used to determine the type and target path of the item when resolved for a project.
 
 ```json title="registry-item.json" showLineNumbers
 {
@@ -90,6 +101,8 @@ The following types are supported:
 | `registry:ui`        | Use for UI components and single-file primitives |
 | `registry:page`      | Use for page or file-based routes.               |
 | `registry:file`      | Use for miscellaneous files.                     |
+| `registry:style`     | Use for registry styles. eg. `new-york`          |
+| `registry:theme`     | Use for themes.                                  |
 
 ### author
 
@@ -122,7 +135,7 @@ Use `@version` to specify the version of your registry item.
 
 ### registryDependencies
 
-Used for registry dependencies. Can be names or URLs.
+Used for registry dependencies. Can be names or URLs. Use the name of the item to reference shadcn/ui components and urls to reference other registries.
 
 - For `shadcn/ui` registry items such as `button`, `input`, `select`, etc use the name eg. `['button', 'input', 'select']`.
 - For custom registry items use the URL of the registry item eg. `['https://example.com/r/hello-world.json']`.
@@ -189,6 +202,8 @@ Use `~` to refer to the root of the project e.g `~/foo.config.js`.
 
 ### tailwind
 
+**DEPRECATED:** Use `cssVars.theme` instead for Tailwind v4 projects.
+
 The `tailwind` property is used for tailwind configuration such as `theme`, `plugins` and `content`.
 
 You can use the `tailwind.config` property to add colors, animations and plugins to your registry item.
@@ -225,6 +240,9 @@ Use to define CSS variables for your registry item.
 ```json title="registry-item.json" showLineNumbers
 {
   "cssVars": {
+    "theme": {
+      "font-heading": "Poppins, sans-serif"
+    },
     "light": {
       "brand": "20 14.3% 4.1%",
       "radius": "0.5rem"
@@ -236,11 +254,6 @@ Use to define CSS variables for your registry item.
 }
 ```
 
-<Callout>
-  **Note:** When adding colors, make sure to also add them to the
-  `tailwind.config.theme.extend.colors` property.
-</Callout>
-
 ### docs
 
 Use `docs` to show custom documentation or message when installing your registry item via the CLI.

apps/www/content/docs/theming.mdx

@@ -92,6 +92,7 @@ Here's the list of variables available for customization:
 
 ```css title="app/globals.css"
 :root {
+  --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -107,7 +108,6 @@ Here's the list of variables available for customization:
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -116,7 +116,6 @@ Here's the list of variables available for customization:
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
@@ -130,22 +129,21 @@ Here's the list of variables available for customization:
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
+  --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
+  --popover: oklch(0.269 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.205 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
+  --accent: oklch(0.371 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
@@ -158,7 +156,7 @@ Here's the list of variables available for customization:
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.439 0 0);
 }
 ```