From 5e2ef1f8bd19a2e590083d6c26206c8ef53ddbfd Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Fri, 24 Oct 2025 10:56:23 +0400
Subject: [PATCH] docs: updates

---
 apps/v4/content/docs/(root)/javascript.mdx     | 18 +++++++++++-------
 apps/v4/content/docs/(root)/theming.mdx        | 10 +++++-----
 .../content/docs/components/native-select.mdx  |  7 +++++++
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/apps/v4/content/docs/(root)/javascript.mdx b/apps/v4/content/docs/(root)/javascript.mdx
index c35a341fc..ed4c3fe1c 100644
--- a/apps/v4/content/docs/(root)/javascript.mdx
+++ b/apps/v4/content/docs/(root)/javascript.mdx
@@ -9,20 +9,24 @@ However we provide a JavaScript version of the components as well. The JavaScrip
 
 To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file.
 
-```json {10} title="components.json" showLineNumbers
+```json {4} title="components.json" showLineNumbers
 {
-  "style": "default",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": false,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "",
     "css": "src/app/globals.css",
     "baseColor": "zinc",
     "cssVariables": true
   },
-  "rsc": false,
-  "tsx": false,
+  "iconLibrary": "lucide",
   "aliases": {
-    "utils": "~/lib/utils",
-    "components": "~/components"
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
   }
 }
 ```
diff --git a/apps/v4/content/docs/(root)/theming.mdx b/apps/v4/content/docs/(root)/theming.mdx
index f34a0daf2..29e1aa204 100644
--- a/apps/v4/content/docs/(root)/theming.mdx
+++ b/apps/v4/content/docs/(root)/theming.mdx
@@ -15,7 +15,7 @@ To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `
 
 ```json {8} title="components.json" showLineNumbers
 {
-  "style": "default",
+  "style": "new-york",
   "rsc": true,
   "tailwind": {
     "config": "",
@@ -44,7 +44,7 @@ To use utility classes for theming set `tailwind.cssVariables` to `false` in you
 
 ```json {8} title="components.json" showLineNumbers
 {
-  "style": "default",
+  "style": "new-york",
   "rsc": true,
   "tailwind": {
     "config": "",
@@ -52,14 +52,14 @@ To use utility classes for theming set `tailwind.cssVariables` to `false` in you
     "baseColor": "neutral",
     "cssVariables": false
   },
+  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
+  }
 }
 ```
 
@@ -163,7 +163,7 @@ Here's the list of variables available for customization:
 
 ## Adding new colors
 
-To add new colors, you need to add them to your CSS file and to your `tailwind.config.js` file.
+To add new colors, you need to add them to your CSS file under the `:root` and `dark` pseudo-classes. Then, use the `@theme inline` directive to make the colors available as CSS variables.
 
 ```css title="app/globals.css" showLineNumbers
 :root {
diff --git a/apps/v4/content/docs/components/native-select.mdx b/apps/v4/content/docs/components/native-select.mdx
index 0aeb70170..77e4d11b1 100644
--- a/apps/v4/content/docs/components/native-select.mdx
+++ b/apps/v4/content/docs/components/native-select.mdx
@@ -4,6 +4,13 @@ description: A styled native HTML select element with consistent design system i
 component: true
 ---
 
+import { InfoIcon } from "lucide-react"
+
+<Callout variant="info" icon={<InfoIcon className="!translate-y-[3px]" />}>
+  For a styled select component, see the [Select](/docs/components/select)
+  component.
+</Callout>
+
 <ComponentPreview name="native-select-demo" />
 
 ## Installation