new installation guide

Author: ariflogs

CONTRIBUTING.md

@@ -37,15 +37,15 @@ Thank you for your interest in contributing to RetroUI 🙏. I hope this guide t
 
 ## Adding a New Component
 
-1. Create the main component in `/packages/ui/NewComponent/NewComponent.tsx`
+1. Create the main component in `/components/ui/NewComponent/NewComponent.tsx`
 
 ```ts
 export function NewComponent() {
   return <div>This is your component.</div>;
 }
 ```
 
-2. Export your component in `/packages/ui/NewComponent/index.ts` and `/packages/ui/index.ts`
+2. Export your component in `/components/ui/NewComponent/index.ts` and `/components/ui/index.ts`
 
 ```ts
 export * from "./NewComponent";

app/(docs)/docs/[[...slug]]/page.tsx

@@ -47,8 +47,8 @@ export default function page({ params }: IProps) {
   return (
     <div className="space-y-12 py-8">
       <div className="border-b border-black pb-6">
-        <Text as="h2">{doc.title}</Text>
-        <p className="text-lg text-muted">{doc.description}</p>
+        <Text as="h1">{doc.title}</Text>
+        <p className="text-lg text-muted mt-2">{doc.description}</p>
         {doc.links && (
           <div className="flex space-x-4 text-sm mt-4">
             {doc.links?.api_reference && (

app/(marketing)/page.tsx

@@ -73,8 +73,10 @@ export default async function Home() {
               </Badge>
             </Link>
 
-            <Text as="h1">Make your projects</Text>
-            <Text as="h1" className="text-outlined">
+            <Text as="h1" className="text-5xl lg:text-6xl">
+              Make your projects
+            </Text>
+            <Text as="h1" className="text-5xl lg:text-6xl text-outlined">
               stand out!
             </Text>
 

components/MDX.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Text } from "@/components/ui";
+import { Alert, Badge, Card, Text } from "@/components/ui";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
 import { ComponentShowcase } from "./ComponentShowcase";
@@ -9,7 +9,8 @@ import { ComponentSource } from "./ComponentSource";
 import { CodeBlock } from "./CodeBlock";
 import Link from "next/link";
 import { ComponentInstall } from "./ComponentInstall";
-import { TabGroup } from "@headlessui/react";
+import Image from "next/image";
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
 
 const components = (type: "doc" | "blog") => ({
   h1: (props: HTMLAttributes<HTMLHeadingElement>) => (
@@ -89,6 +90,16 @@ const components = (type: "doc" | "blog") => ({
       {children}
     </code>
   ),
+  TabGroup,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+  Link,
+  Badge,
+  Image,
+  Card,
+  Alert,
   ComponentShowcase,
   ComponentSource,
   ComponentInstall,

components/ui/Text/Text.tsx

@@ -8,7 +8,7 @@ const textVariants = cva("font-head", {
       p: "font-sans text-base",
       li: "font-sans text-base",
       a: "font-sans text-base hover:underline underline-offset-2 decoration-primary-500",
-      h1: "text-5xl lg:text-6xl font-bold",
+      h1: "text-4xl lg:text-5xl font-bold",
       h2: "text-3xl lg:text-4xl font-semibold",
       h3: "text-2xl font-medium",
       h4: "text-xl font-normal",

config/components.ts

@@ -21,59 +21,59 @@ export const componentConfig: {
     accordion: {
       name: "accordion",
       dependencies: ["@radix-ui/react-accordion", "lucide-react"],
-      filePath: "packages/ui/Accordions/Accordion.tsx",
+      filePath: "components/ui/Accordions/Accordion.tsx",
     },
     alert: {
       name: "alert",
-      filePath: "packages/ui/Alerts/Alert.tsx",
+      filePath: "components/ui/Alerts/Alert.tsx",
     },
     avatar: {
       name: "avatar",
-      filePath: "packages/ui/Avatars/Avatar.tsx",
+      filePath: "components/ui/Avatars/Avatar.tsx",
     },
     badge: {
       name: "badge",
-      filePath: "packages/ui/Badges/Badge.tsx",
+      filePath: "components/ui/Badges/Badge.tsx",
     },
     button: {
       name: "button",
-      filePath: "packages/ui/Buttons/Button.tsx",
+      filePath: "components/ui/Buttons/Button.tsx",
     },
     card: {
       name: "card",
-      filePath: "packages/ui/Cards/Card.tsx",
+      filePath: "components/ui/Cards/Card.tsx",
     },
     checkbox: {
       name: "checkbox",
-      filePath: "packages/ui/Form/Checkbox.tsx",
+      filePath: "components/ui/Form/Checkbox.tsx",
     },
     dialog: {
       name: "dialog",
-      filePath: "packages/ui/Dialog/Dialog.tsx",
+      filePath: "components/ui/Dialog/Dialog.tsx",
     },
     input: {
       name: "input",
-      filePath: "packages/ui/Form/Input.tsx",
+      filePath: "components/ui/Form/Input.tsx",
     },
     menu: {
       name: "menu",
-      filePath: "packages/ui/Menu/Menu.tsx",
+      filePath: "components/ui/Menu/Menu.tsx",
     },
     radio: {
       name: "radio",
-      filePath: "packages/ui/Form/Radio.tsx",
+      filePath: "components/ui/Form/Radio.tsx",
     },
     select: {
       name: "select",
-      filePath: "packages/ui/Form/Select.tsx",
+      filePath: "components/ui/Form/Select.tsx",
     },
     switch: {
       name: "switch",
-      filePath: "packages/ui/Form/Switch.tsx",
+      filePath: "components/ui/Form/Switch.tsx",
     },
     text: {
       name: "text",
-      filePath: "packages/ui/Text/Text.tsx",
+      filePath: "components/ui/Text/Text.tsx",
     },
   },
   examples: {

config/navigation.ts

@@ -12,7 +12,14 @@ export const navConfig: INavigationConfig = {
   sideNavItems: [
     {
       title: "Getting Started",
-      children: [{ title: "Introduction", href: "/docs", tag: "Updated" }],
+      children: [
+        { title: "Introduction", href: "/docs", tag: "Updated" },
+        {
+          title: "Installation",
+          href: "/docs/install",
+          tag: "New",
+        },
+      ],
     },
     {
       title: "Components",

content/docs/components/accordion.mdx

@@ -4,7 +4,7 @@ description: This collapsible component let's your users read only the content t
 lastUpdated: 19 Oct, 2024
 links:
   api_reference: https://www.radix-ui.com/primitives/docs/components/accordion#api-reference
-  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Accordions/Accordion.tsx
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Accordions/Accordion.tsx
 ---
 
 <ComponentShowcase name="accordion-style-default" />

content/docs/components/button.mdx

@@ -3,7 +3,7 @@ title: Button
 description: This bold button makes sure your users click on it and perform the actions you want! 🚀
 lastUpdated: 04 Nov, 2024
 links:
-  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Buttons/Button.tsx
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Buttons/Button.tsx
 ---
 
 <ComponentShowcase name="button-style-default" />

content/docs/components/checkbox.mdx

@@ -4,7 +4,7 @@ description: Let users confirm or reject an option.
 lastUpdated: 13 Feb, 2024
 links:
   api_reference: https://www.radix-ui.com/primitives/docs/components/checkbox#api-reference
-  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Form/Checkbox.tsx
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Form/Checkbox.tsx
 ---
 
 <ComponentShowcase name="checkbox-style-default" />