docs(www): add api reference for components.json (#982)

* docs: add api reference for component.json file

* docs: use Link for internal links in component.json

* docs(www): update docs for components.json

---------

Co-authored-by: shadcn <m@shadcn.com>

apps/www/components/mdx-components.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import Image from "next/image"
-import Link, { LinkProps } from "next/link"
+import Link from "next/link"
 import { useMDXComponent } from "next-contentlayer/hooks"
 import { NpmCommands } from "types/unist"
 
@@ -292,6 +292,12 @@ const components = {
   }: React.ComponentProps<typeof FrameworkDocs>) => (
     <FrameworkDocs className={cn(className)} {...props} />
   ),
+  Link: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
+    <Link
+      className={cn("font-medium underline underline-offset-4", className)}
+      {...props}
+    />
+  ),
   LinkedCard: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
     <Link
       className={cn(

apps/www/config/docs.ts

@@ -48,6 +48,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/installation",
           items: [],
         },
+        {
+          title: "components.json",
+          href: "/docs/components-json",
+          items: [],
+        },
         {
           title: "Theming",
           href: "/docs/theming",

apps/www/content/docs/components-json.mdx

@@ -0,0 +1,163 @@
+---
+title: components.json
+description: Configuration for your project.
+---
+
+The `components.json` file holds configuration for your project.
+
+We use it to understand how your project is set up and how to generate components customized for your project.
+
+<Callout className="mt-6">
+  Note: The `components.json` file is optional and **only required if you're
+  using the CLI** to add components to your project. If you're using the copy
+  and paste method, you don't need this file.
+</Callout>
+
+You can create a `components.json` file in your project by running the following command:
+
+```bash
+npx shadcn@latest init
+```
+
+See the <Link href="/docs/cli">CLI section</Link> for more information.
+
+## $schema
+
+You can see the JSON Schema for `components.json` [here](https://ui.shadcn.com/schema.json).
+
+```json title="components.json"
+{
+  "$schema": "https://ui.shadcn.com/schema.json"
+}
+```
+
+## style
+
+The style for your components. **This cannot be changed after initialization.**
+
+```json title="components.json"
+{
+  "style": "default" | "new-york"
+}
+```
+
+<ComponentPreview name="card-with-form" />
+
+## tailwind
+
+Configuration to help the CLI understand how Tailwind CSS is set up in your project.
+
+See the <Link href="/docs/installation">installation section</Link> for how to set up Tailwind CSS.
+
+### tailwind.config
+
+Path to where your `tailwind.config.js` file is located.
+
+```json title="components.json"
+{
+  "tailwind": {
+    "config": "tailwind.config.js" | "tailwind.config.ts"
+  }
+}
+```
+
+### tailwind.css
+
+Path to the CSS file that imports Tailwind CSS into your project.
+
+```json title="components.json"
+{
+  "tailwind": {
+    "css": "styles/global.css"
+  }
+}
+```
+
+### tailwind.baseColor
+
+This is used to generate the default color palette for your components. **This cannot be changed after initialization.**
+
+```json title="components.json"
+{
+  "tailwind": {
+    "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
+  }
+}
+```
+
+### tailwind.cssVariables
+
+You can choose between using CSS variables or Tailwind CSS utility classes for theming.
+
+To use utility classes for theming set `tailwind.cssVariables` to `false`. For CSS variables, set `tailwind.cssVariables` to `true`.
+
+```json title="components.json"
+{
+  "tailwind": {
+    "cssVariables": `true` | `false`
+  }
+}
+```
+
+For more information, see the <Link href="/docs/theming">theming docs</Link>.
+
+**This cannot be changed after initialization.** To switch between CSS variables and utility classes, you'll have to delete and re-install your components.
+
+## rsc
+
+Whether or not to enable support for React Server Components.
+
+The CLI automatically adds a `use client` directive to client components when set to `true`.
+
+```json title="components.json"
+{
+  "rsc": `true` | `false`
+}
+```
+
+## tsx
+
+Choose between TypeScript or JavaScript components.
+
+Setting this option to `false` allows components to be added as JavaScript with the `.jsx` file extension.
+
+```json title="components.json"
+{
+  "tsx": `true` | `false`
+}
+```
+
+## aliases
+
+The CLI uses these values and the `paths` config from your `tsconfig.json` or `jsconfig.json` file to place generated components in the correct location.
+
+Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file.
+
+<Callout className="mt-6">
+  **Important:** If you're using the `src` directory, make sure it is included
+  under `paths` in your `tsconfig.json` or `jsconfig.json` file.
+</Callout>
+
+### aliases.utils
+
+Import alias for your utility functions.
+
+```json title="components.json"
+{
+  "aliases": {
+    "utils": "@/lib/utils"
+  }
+}
+```
+
+### aliases.components
+
+Import alias for your components.
+
+```json title="components.json"
+{
+  "aliases": {
+    "components": "@/components"
+  }
+}
+```