feat: add CLI documentation

apps/www/astro.config.mjs

@@ -46,6 +46,10 @@ export default defineConfig({
               label: "Theming",
               slug: "docs/theming",
             },
+            {
+              label: "CLI",
+              slug: "docs/cli",
+            },
           ],
         },
         {

apps/www/src/content/docs/docs/cli.mdx

@@ -0,0 +1,130 @@
+---
+title: CLI
+description: Use the CLI to add components to your project.
+---
+
+## init
+
+Use the `init` command to initialize configuration and dependencies for a new project.
+
+The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project.
+
+```bash
+npx shadcn-ng@latest init
+```
+
+You will be asked a few questions to configure `components.json`:
+
+```txt showLineNumbers
+Which style would you like to use? › Default
+Which color would you like to use as base color? › Slate
+Where is your global CSS file? › src/styles.css
+Do you want to use CSS variables for colors? › no / yes
+Where is your tailwind.config.js located? › tailwind.config.js
+Configure the import alias for components: › @/components
+Configure the import alias for utils: › @/lib/utils
+```
+
+### Options
+
+```txt
+Usage: shadcn-ng init [options]
+
+initialize your project and install dependencies
+
+Options:
+  -y, --yes        skip confirmation prompt. (default: false)
+  -c, --cwd <cwd>  the working directory. defaults to the current directory.
+  -h, --help       display help for command
+```
+
+## add
+
+Use the `add` command to add components and dependencies to your project.
+
+```bash
+npx shadcn-ng@latest add [component]
+```
+
+You will be presented with a list of components to choose from:
+
+```txt
+Which components would you like to add? › Space to select. A to toggle all.
+Enter to submit.
+
+◯  accordion
+◯  alert
+◯  alert-dialog
+◯  aspect-ratio
+◯  avatar
+◯  badge
+◯  button
+◯  calendar
+◯  card
+◯  checkbox
+```
+
+### Options
+
+```txt
+Usage: shadcn-ng add [options] [components...]
+
+add a component to your project
+
+Arguments:
+  components         the components to add
+
+Options:
+  -y, --yes          skip confirmation prompt. (default: false)
+  -o, --overwrite    overwrite existing files. (default: false)
+  -c, --cwd <cwd>    the working directory. defaults to the current directory.
+  -p, --path <path>  the path to add the component to.
+  -h, --help         display help for command
+```
+
+## diff (experimental)
+
+You can use the diff command to check for updates against the registry.
+
+Run the following command to get a list of components that have updates available:
+
+```bash
+npx shadcn-ng diff
+```
+
+```txt
+The following components have updates available:
+- alert
+  - /path/to/my-app/components/ui/alert.directive.ts
+- button
+  - /path/to/my-app/components/ui/button.directive.ts
+```
+
+Then run `diff [component]` to see the changes:
+
+```bash
+npx shadcn-ng diff alert
+```
+
+```diff /pl-12/
+const alertVariants = cva(
+- "relative w-full rounded-lg border",
++ "relative w-full pl-12 rounded-lg border"
+)
+```
+
+### Options
+
+```txt
+Usage: shadcn-ng diff [options] [component]
+
+check for updates against the registry
+
+Arguments:
+  component        the component name
+
+Options:
+  -y, --yes        skip confirmation prompt. (default: false)
+  -c, --cwd <cwd>  the working directory. defaults to the current directory.
+  -h, --help       display help for command
+```