Logging-Studio · ariflogs · Mar 5, 2025 · Mar 5, 2025 · Mar 5, 2025
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -24,8 +24,8 @@ jobs:
 
       - name: Build and push to DockerHub
         run: |
-          docker build -t devarifhossain/retroui:1.1.1 ./
-          docker push devarifhossain/retroui:1.1.1
+          docker build -t devarifhossain/retroui:1.1.2 ./
+          docker push devarifhossain/retroui:1.1.2
 
       # - name: Set up SSH
       #   uses: webfactory/ssh-agent@v0.9.0

diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
@@ -222,7 +222,7 @@ export default async function Home() {
               Github Stars
             </Text>
             <Text as="h1" className="text-outlined text-7xl lg:text-8xl">
-              250+
+              350+
             </Text>
             <Image
               src="/images/shooting_star.svg"

diff --git a/components/ComponentInstall.tsx b/components/ComponentInstall.tsx
@@ -0,0 +1,38 @@
+import { componentConfig } from "@/config";
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
+import { Code } from "lucide-react";
+import { HTMLAttributes } from "react";
+
+interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {}
+
+function ComponentInstallCli({ children }: { children: React.ReactNode }) {
+  return <TabPanel>{children}</TabPanel>;
+}
+
+function ComponentInstallManual({ children }: { children: React.ReactNode }) {
+  return <TabPanel>{children}</TabPanel>;
+}
+
+function ComponentInstall({ children }: IComponentShowcase) {
+  return (
+    <TabGroup>
+      <TabList className="border-b bg-transparent flex space-x-4 mb-6">
+        <Tab className="text-lg min-w-12 relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
+          CLI
+        </Tab>
+        <Tab className="text-lg min-w-12 relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
+          Manual
+        </Tab>
+      </TabList>
+
+      <TabPanels>{children}</TabPanels>
+    </TabGroup>
+  );
+}
+
+Object.assign(ComponentInstall, {
+  Cli: ComponentInstallCli,
+  Manual: ComponentInstallManual,
+});
+
+export { ComponentInstall };
diff --git a/components/ComponentShowcase.tsx b/components/ComponentShowcase.tsx
@@ -12,11 +12,11 @@ export function ComponentShowcase({ name, children }: IComponentShowcase) {
 
   return (
     <TabGroup>
-      <TabList className="space-x-4 ">
-        <Tab className="text-lg px-1 border-black data-[selected]:border-b-2 focus:outline-none">
+      <TabList className="space-x-4 border-b mb-6">
+        <Tab className="min-w-12 text-lg relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
           Preview
         </Tab>
-        <Tab className="text-lg px-1 border-black data-[selected]:border-b-2 focus:outline-none">
+        <Tab className="min-w-12 text-lg relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
           Code
         </Tab>
       </TabList>

diff --git a/components/MDX.tsx b/components/MDX.tsx
@@ -8,6 +8,8 @@ import { cn } from "@/lib/utils";
 import { ComponentSource } from "./ComponentSource";
 import { CodeBlock } from "./CodeBlock";
 import Link from "next/link";
+import { ComponentInstall } from "./ComponentInstall";
+import { TabGroup } from "@headlessui/react";
 
 const components = (type: "doc" | "blog") => ({
   h1: (props: HTMLAttributes<HTMLHeadingElement>) => (
@@ -89,6 +91,7 @@ const components = (type: "doc" | "blog") => ({
   ),
   ComponentShowcase,
   ComponentSource,
+  ComponentInstall,
 });
 
 export default function MDX({

diff --git a/config/components.ts b/config/components.ts
@@ -5,6 +5,7 @@ export const componentConfig: {
     [key: string]: {
       name: string;
       filePath: string;
+      dependencies?: string[];
       preview?: React.LazyExoticComponent<() => JSX.Element>;
     };
   };
@@ -19,6 +20,7 @@ export const componentConfig: {
   core: {
     accordion: {
       name: "accordion",
+      dependencies: ["@radix-ui/react-accordion", "lucide-react"],
       filePath: "packages/ui/Accordions/Accordion.tsx",
     },
     alert: {
@@ -51,7 +53,7 @@ export const componentConfig: {
     },
     input: {
       name: "input",
-      filePath: "packages/ui/Input.tsx",
+      filePath: "packages/ui/Form/Input.tsx",
     },
     menu: {
       name: "menu",

diff --git a/content/docs/components/accordion.mdx b/content/docs/components/accordion.mdx
@@ -13,6 +13,13 @@ links:
 
 ## Installation
 
+<ComponentInstall>
+  <ComponentInstall.Cli>
+    ```sh
+npx shadcn@latest add "https://retroui.dev/r/accordion.json"
+    ```
+  </ComponentInstall.Cli>
+  <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
 ```sh
@@ -25,6 +32,9 @@ npm install @radix-ui/react-accordion lucide-react
 
 <ComponentSource name="accordion" />
 
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
 <br />
 <br />
 

diff --git a/content/docs/components/alert.mdx b/content/docs/components/alert.mdx
@@ -8,8 +8,13 @@ lastUpdated: 24 Oct, 2024
 <br />
 <br />
 
-## Installation
-
+<ComponentInstall>
+  <ComponentInstall.Cli>
+    ```sh
+npx shadcn@latest add "https://retroui.dev/r/alert.json"
+    ```
+  </ComponentInstall.Cli>
+  <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
 ```sh
@@ -22,6 +27,9 @@ npm install class-variance-authority
 
 <ComponentSource name="alert" />
 
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
 <br />
 <br />
 

diff --git a/content/docs/components/avatar.mdx b/content/docs/components/avatar.mdx
@@ -8,8 +8,13 @@ lastUpdated: 12 Oct, 2024
 <br />
 <br />
 
-## Installation
-
+<ComponentInstall>
+  <ComponentInstall.Cli>
+    ```sh
+npx shadcn@latest add "https://retroui.dev/r/avatar.json"
+    ```
+  </ComponentInstall.Cli>
+  <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
 ```sh
@@ -22,6 +27,9 @@ npm install @radix-ui/react-avatar
 
 <ComponentSource name="avatar" />
 
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
 <br />
 <br />
 

diff --git a/content/docs/components/badge.mdx b/content/docs/components/badge.mdx
@@ -8,8 +8,13 @@ lastUpdated: 30 Oct, 2024
 <br />
 <br />
 
-## Installation
-
+<ComponentInstall>
+  <ComponentInstall.Cli>
+    ```sh
+npx shadcn@latest add "https://retroui.dev/r/badge.json"
+    ```
+  </ComponentInstall.Cli>
+  <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
 ```sh
@@ -21,9 +26,15 @@ npm install class-variance-authority
 #### 2. Copy the code 👇 into your project:
 
 <ComponentSource name="badge" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
 <br />
 <br />
 
+## Examples
+
 ### Default
 
 <hr />

diff --git a/content/docs/components/button.mdx b/content/docs/components/button.mdx
@@ -10,8 +10,13 @@ links:
 <br />
 <br />
 
-## Installation
-
+<ComponentInstall>
+  <ComponentInstall.Cli>
+    ```sh
+npx shadcn@latest add "https://retroui.dev/r/button.json"
+    ```
+  </ComponentInstall.Cli>
+  <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
 ```sh
@@ -23,6 +28,10 @@ npm install class-variance-authority
 #### 2. Copy the code 👇 into your project:
 
 <ComponentSource name="button" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
 <br />
 <br />
 

diff --git a/content/docs/components/card.mdx b/content/docs/components/card.mdx
@@ -8,11 +8,24 @@ lastUpdated: 20 Oct, 2024
 <br />
 <br />
 
+
+
 ## Installation
+<ComponentInstall>
+  <ComponentInstall.Cli>
+    ```sh
+npx shadcn@latest add "https://retroui.dev/r/card.json"
+    ```
+  </ComponentInstall.Cli>
+  <ComponentInstall.Manual>
 
 #### Copy the code 👇 into your project:
 
 <ComponentSource name="card" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
 <br />
 <br />
 

diff --git a/content/docs/components/checkbox.mdx b/content/docs/components/checkbox.mdx
@@ -13,6 +13,14 @@ links:
 
 ## Installation
 
+<ComponentInstall>
+  <ComponentInstall.Cli>
+    ```sh
+npx shadcn@latest add "https://retroui.dev/r/checkbox.json"
+    ```
+  </ComponentInstall.Cli>
+  <ComponentInstall.Manual>
+
 #### 1. Install dependencies:
 
 ```sh
@@ -24,6 +32,10 @@ npm install @radix-ui/react-checkbox class-variance-authority lucide-react
 #### 2. Copy the code 👇 into your project:
 
 <ComponentSource name="checkbox" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
 <br />
 <br />
 

diff --git a/content/docs/components/dialog.mdx b/content/docs/components/dialog.mdx
@@ -13,6 +13,14 @@ links:
 
 ## Instalation
 
+<ComponentInstall>
+  <ComponentInstall.Cli>
+    ```sh
+npx shadcn@latest add "https://retroui.dev/r/dialog.json"
+    ```
+  </ComponentInstall.Cli>
+  <ComponentInstall.Manual>
+
 #### 1. Install dependencies:
 
 ```sh
@@ -33,45 +41,38 @@ npm install @radix-ui/react-dialog @radix-ui/react-visually-hidden tailwindcss-a
 }
 ```
 
-<br />
-<br />
-
 #### 3. Copy the code 👇 into your project:
 
 <ComponentSource name="dialog" />
 
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
 <br />
 <br />
 
 ## Example
 
-#### Confirm dialog message
+### Confirm dialog message
 
 <ComponentShowcase name="dialog-style-default" />
 <br />
 <br />
 
-#### Confirm dialog with footer
+### With footer
 
 <ComponentShowcase name="dialog-style-with-footer" />
 
 <br />
 <br />
 
-#### Dialog `size` variants
+### Size variants
 
 <ComponentShowcase name="dialog-style-width-variant" />
 
 <br />
 <br />
 
-#### Dialog with form
-
-<ComponentShowcase name="dialog-style-with-form" />
-
-<br />
-<br />
-
-## Notes
+### With form
 
-For customize anything on dialog you can change `className` for the component and doas you want.
+<ComponentShowcase name="dialog-style-with-form" />
diff --git a/content/docs/components/input.mdx b/content/docs/components/input.mdx
@@ -9,10 +9,21 @@ lastUpdated: 04 Mar, 2024
 <br />
 
 ## Installation
-
+<ComponentInstall>
+  <ComponentInstall.Cli>
+    ```sh
+npx shadcn@latest add "https://retroui.dev/r/input.json"
+    ```
+  </ComponentInstall.Cli>
+  <ComponentInstall.Manual>
+
 #### 1. Copy the code 👇 into your project:
 
 <ComponentSource name="input" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
 <br />
 <br />
-Original file line number
+Diff line change
@@ Expand Up / @@ -222,7 +222,7 @@ export default async function Home() { @@
                   Github Stars
                 </Text>
                 <Text as="h1" className="text-outlined text-7xl lg:text-8xl">
-+
++
                 </Text>
                 <Image
                   src="/images/shooting_star.svg"
@@ Expand Down @@