we can now install from shadcn

Author: ariflogs

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"

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 };

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>

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({

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",

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 />
 

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 />
 

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 />
 

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 />

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 />