Add cli docs

apps/www/__registry__/index.tsx

@@ -236,6 +236,34 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/ui/button")),
       files: ["registry/default/ui/button.tsx"],
     },
+    "card": {
+      name: "card",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/card")),
+      files: ["registry/default/ui/card.tsx"],
+    },
+    "input": {
+      name: "input",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/input")),
+      files: ["registry/default/ui/input.tsx"],
+    },
+    "label": {
+      name: "label",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/label")),
+      files: ["registry/default/ui/label.tsx"],
+    },
+    "select": {
+      name: "select",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/select")),
+      files: ["registry/default/ui/select.tsx"],
+    },
     "dialog": {
       name: "dialog",
       type: "components:ui",
@@ -481,5 +509,12 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/error-message-demo")),
       files: ["registry/default/example/error-message-demo.tsx"],
     },
+    "card-with-form": {
+      name: "card-with-form",
+      type: "components:example",
+      registryDependencies: ["button","card","input","label","select"],
+      component: React.lazy(() => import("@/registry/default/example/card-with-form")),
+      files: ["registry/default/example/card-with-form.tsx"],
+    },
   },
 }

apps/www/config/docs.ts

@@ -35,11 +35,56 @@ export const docsConfig: DocsConfig = {
           href: "/docs",
           items: [],
         },
+        {
+          title: "Installation",
+          href: "/docs/installation",
+          items: [],
+        },
+        {
+          title: "components.json",
+          href: "/docs/components-json",
+          items: [],
+        },
+        {
+          title: "CLI",
+          href: "/docs/cli",
+          items: [],
+        },
       ],
     },
     {
       title: "Installation",
       items: [
+        {
+          title: "Next.js",
+          href: "/docs/installation/next",
+          items: [],
+        },
+        {
+          title: "Vite",
+          href: "/docs/installation/vite",
+          items: [],
+        },
+        {
+          title: "Remix",
+          href: "/docs/installation/remix",
+          items: [],
+        },
+        {
+          title: "Gatsby",
+          href: "/docs/installation/gatsby",
+          items: [],
+        },
+        {
+          title: "Astro",
+          href: "/docs/installation/astro",
+          items: [],
+        },
+        {
+          title: "Laravel",
+          href: "/docs/installation/laravel",
+          items: [],
+        },
         {
           title: "Manual",
           href: "/docs/installation/manual",

apps/www/content/docs/cli.mdx

@@ -0,0 +1,134 @@
+---
+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 buidl-cli@latest init
+```
+
+You will be asked a few questions to configure `components.json`:
+
+```txt showLineNumbers
+Would you like to use TypeScript (recommended)? no/yes
+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? › › app/globals.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
+Are you using React Server Components? › no / yes
+```
+
+### Options
+
+```txt
+Usage: buidl-cli 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 buidl-cli@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.
+
+◯  address
+◯  balance
+◯  block-explorer-link
+◯  block-number
+◯  nonce
+◯  transaction
+◯  transaction-status
+◯  fee-data
+◯  sign-message-button
+◯  blockie
+```
+
+### Options
+
+```txt
+Usage: buidl-cli 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 buidl-cli diff
+```
+
+```txt
+The following components have updates available:
+- address
+  - /path/to/my-app/components/buidl/address.tsx
+- balance
+  - /path/to/my-app/components/buidl/balance.tsx
+- transaction
+  - /path/to/my-app/components/buidl/transaction.tsx
+```
+
+Then run `diff [component]` to see the changes:
+
+```bash
+npx buidl-cli 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: buidl-cli 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
+```

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

@@ -16,7 +16,7 @@ We use it to understand how your project is set up and how to generate component
 You can create a `components.json` file in your project by running the following command:
 
 ```bash
-npx shadcn-ui@latest init
+npx buidl-cli@latest init
 ```
 
 See the <Link href="/docs/cli">CLI section</Link> for more information.
@@ -37,7 +37,7 @@ The style for your components. **This cannot be changed after initialization.**
 
 ```json title="components.json"
 {
-  "style": "default" | "new-york"
+  "style": "default"
 }
 ```
 

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

@@ -13,22 +13,18 @@ wagmi:
 
 ## Installation
 
-<Tabs defaultValue="manual">
+<Tabs defaultValue="cli">
 
 <TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
   <TabsTrigger value="manual">Manual</TabsTrigger>
-  <TabsTrigger disabled={true} value="cli">
-    CLI (Coming Soon)
-  </TabsTrigger>
 </TabsList>
 
 <TabsContent value="cli">
 
-<Steps>
-
-<Step>Coming soon...</Step>
-
-</Steps>
+```bash
+npx buidl-cli@latest add address
+```
 
 </TabsContent>
 

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

@@ -13,22 +13,18 @@ wagmi:
 
 ## Installation
 
-<Tabs defaultValue="manual">
+<Tabs defaultValue="cli">
 
 <TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
   <TabsTrigger value="manual">Manual</TabsTrigger>
-  <TabsTrigger disabled={true} value="cli">
-    CLI (Coming Soon)
-  </TabsTrigger>
 </TabsList>
 
 <TabsContent value="cli">
 
-<Steps>
-
-<Step>Coming soon...</Step>
-
-</Steps>
+```bash
+npx buidl-cli@latest add balance
+```
 
 </TabsContent>
 

apps/www/content/docs/components/block-explorer-link.mdx

@@ -13,22 +13,18 @@ wagmi:
 
 ## Installation
 
-<Tabs defaultValue="manual">
+<Tabs defaultValue="cli">
 
 <TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
   <TabsTrigger value="manual">Manual</TabsTrigger>
-  <TabsTrigger disabled={true} value="cli">
-    CLI (Coming Soon)
-  </TabsTrigger>
 </TabsList>
 
 <TabsContent value="cli">
 
-<Steps>
-
-<Step>Coming soon...</Step>
-
-</Steps>
+```bash
+npx buidl-cli@latest add block-explorer-link
+```
 
 </TabsContent>
 

apps/www/content/docs/components/block-number.mdx

@@ -13,22 +13,18 @@ wagmi:
 
 ## Installation
 
-<Tabs defaultValue="manual">
+<Tabs defaultValue="cli">
 
 <TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
   <TabsTrigger value="manual">Manual</TabsTrigger>
-  <TabsTrigger disabled={true} value="cli">
-    CLI (Coming Soon)
-  </TabsTrigger>
 </TabsList>
 
 <TabsContent value="cli">
 
-<Steps>
-
-<Step>Coming soon...</Step>
-
-</Steps>
+```bash
+npx buidl-cli@latest add block-number
+```
 
 </TabsContent>
 

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

@@ -13,22 +13,18 @@ wagmi:
 
 ## Installation
 
-<Tabs defaultValue="manual">
+<Tabs defaultValue="cli">
 
 <TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
   <TabsTrigger value="manual">Manual</TabsTrigger>
-  <TabsTrigger disabled={true} value="cli">
-    CLI (Coming Soon)
-  </TabsTrigger>
 </TabsList>
 
 <TabsContent value="cli">
 
-<Steps>
-
-<Step>Coming soon...</Step>
-
-</Steps>
+```bash
+npx buidl-cli@latest add blockie
+```
 
 </TabsContent>