From da13a7a25e78f65f9c78cee6f353f5ba8b685578 Mon Sep 17 00:00:00 2001
From: harish-viswa <harish.viswanathan@harness.io>
Date: Tue, 11 Feb 2025 18:32:12 +0530
Subject: [PATCH] docs: added few more docs for ui components

---
 .../src/content/docs/components/no-data.mdx   | 126 ++++++++
 .../content/docs/components/scroll-area.mdx   | 106 +++++++
 .../content/docs/components/search-box.mdx    | 147 +++++++++
 .../src/content/docs/components/select.mdx    | 256 ++++++++++++++++
 .../src/content/docs/components/sha-badge.mdx | 132 ++++++++
 .../src/content/docs/components/spacer.mdx    |  51 ++++
 .../content/docs/components/stacked-list.mdx  | 201 ++++++++++++
 .../content/docs/components/styled-link.mdx   |  48 +++
 .../src/content/docs/components/table.mdx     | 289 ++++++++++++++++++
 .../src/content/docs/components/tabs.mdx      | 237 ++++++++++++++
 .../src/content/docs/components/text.mdx      | 134 ++++++++
 .../src/content/docs/components/textarea.mdx  | 122 ++++++++
 .../src/content/docs/components/topbar.mdx    | 133 ++++++++
 .../src/content/docs/soon/stacked-list.mdx    |  47 ---
 14 files changed, 1982 insertions(+), 47 deletions(-)
 create mode 100644 apps/portal/src/content/docs/components/no-data.mdx
 create mode 100644 apps/portal/src/content/docs/components/scroll-area.mdx
 create mode 100644 apps/portal/src/content/docs/components/search-box.mdx
 create mode 100644 apps/portal/src/content/docs/components/select.mdx
 create mode 100644 apps/portal/src/content/docs/components/sha-badge.mdx
 create mode 100644 apps/portal/src/content/docs/components/spacer.mdx
 create mode 100644 apps/portal/src/content/docs/components/stacked-list.mdx
 create mode 100644 apps/portal/src/content/docs/components/styled-link.mdx
 create mode 100644 apps/portal/src/content/docs/components/table.mdx
 create mode 100644 apps/portal/src/content/docs/components/tabs.mdx
 create mode 100644 apps/portal/src/content/docs/components/text.mdx
 create mode 100644 apps/portal/src/content/docs/components/textarea.mdx
 create mode 100644 apps/portal/src/content/docs/components/topbar.mdx
 delete mode 100644 apps/portal/src/content/docs/soon/stacked-list.mdx

diff --git a/apps/portal/src/content/docs/components/no-data.mdx b/apps/portal/src/content/docs/components/no-data.mdx
new file mode 100644
index 0000000000..7c1c093f6f
--- /dev/null
+++ b/apps/portal/src/content/docs/components/no-data.mdx
@@ -0,0 +1,126 @@
+---
+title: No Data
+description: No Data component documentation
+---
+
+The No Data component provides a UI element for displaying a message when there is no data available. It includes optional features like icons, descriptions, and action buttons.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<NoData 
+    title="No Data Available" 
+    iconName="no-data-folder" 
+    description={["There is no data to display."]} 
+    primaryButton={{ label: "Primary Action", onClick: () => console.log("Primary Action Clicked") }} 
+    secondaryButton={{ label: "Secondary Action", onClick: () => console.log("Secondary Action Clicked") }} 
+  />`}
+/>
+
+## Usage
+
+```typescript jsx
+import { NoData } from '@harnessio/ui/components'
+
+return (
+  <NoData
+    title="No Data Available"
+    iconName="no-data-folder"
+    description={["There is no data to display."]}
+    primaryButton={{ label: "Primary Action", onClick: () => console.log("Primary Action Clicked") }}
+    secondaryButton={{ label: "Secondary Action", onClick: () => console.log("Secondary Action Clicked") }}
+  />
+)
+```
+
+## API Reference
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "title",
+      description: "The title of the no data message",
+      required: true,
+      value: "string",
+    },
+    {
+      name: "iconName",
+      description: "The name of the icon to display",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "iconSize",
+      description: "The size of the icon",
+      required: false,
+      value: "number",
+      defaultValue: "112",
+    },
+    {
+      name: "description",
+      description: "The description text for the no data message",
+      required: true,
+      value: "string[]",
+    },
+    {
+      name: "primaryButton",
+      description: "The primary action button",
+      required: false,
+      value: "{ label: string, onClick?: () => void, to?: string }",
+    },
+    {
+      name: "secondaryButton",
+      description: "The secondary action button",
+      required: false,
+      value: "{ label: string, onClick?: () => void, to?: string }",
+    },
+    {
+      name: "withBorder",
+      description: "Whether to display a border around the no data message",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+    {
+      name: "loadState",
+      description: "The current load state",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "setLoadState",
+      description: "Function to set the load state",
+      required: false,
+      value: "Dispatch<SetStateAction<string>>",
+    },
+    {
+      name: "textWrapperClassName",
+      description: "Additional class names for the text wrapper",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the no data message",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### Supported Icon Names
+
+The `NoData` component supports the following icon names:
+
+- `no-data-folder`
+- `no-search-magnifying-glass`
+- `no-data-merge`
+- `no-data-cog`
+- `no-data-webhooks`
+- `no-data-branches`
+- `no-data-members`
+- `no-repository`
+- `no-data-error`
+- `no-data-commits`
+- `no-data-pr`
diff --git a/apps/portal/src/content/docs/components/scroll-area.mdx b/apps/portal/src/content/docs/components/scroll-area.mdx
new file mode 100644
index 0000000000..24935445ee
--- /dev/null
+++ b/apps/portal/src/content/docs/components/scroll-area.mdx
@@ -0,0 +1,106 @@
+---
+title: Scroll Area
+description: Scroll Area component documentation
+---
+
+The Scroll Area component provides a UI element for creating scrollable areas with custom scrollbars. It includes various customization options.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<ScrollArea className="h-24">
+  <div className="p-4">
+    <p>Scrollable content goes here.</p>
+    <p>Scrollable content goes here.</p>
+    <p>Scrollable content goes here.</p>
+    <p>Scrollable content goes here.</p>
+    <p>Scrollable content goes here.</p>
+  </div>
+</ScrollArea>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { ScrollArea } from '@harnessio/ui/components'
+
+return (
+  <ScrollArea className="h-64 w-64">
+    <div className="p-4">
+      <p>Scrollable content goes here.</p>
+      <p>Scrollable content goes here.</p>
+      <p>Scrollable content goes here.</p>
+      <p>Scrollable content goes here.</p>
+      <p>Scrollable content goes here.</p>
+    </div>
+  </ScrollArea>
+)
+```
+
+## Anatomy
+
+The Scroll Area component can be used to create scrollable areas with custom scrollbars.
+
+```typescript jsx
+<ScrollArea className="h-64 w-64">
+  <div className="p-4">
+    <p>Scrollable content goes here.</p>
+    <p>Scrollable content goes here.</p>
+    <p>Scrollable content goes here.</p>
+    <p>Scrollable content goes here.</p>
+    <p>Scrollable content goes here.</p>
+  </div>
+</ScrollArea>
+```
+
+## API Reference
+
+### ScrollArea
+
+The `ScrollArea` component serves as the main container for the scrollable area.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the scroll area",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the scroll area",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "viewportClassName",
+      description: "Additional class names for the viewport",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### ScrollBar
+
+The `ScrollBar` component is used to display a custom scrollbar inside the scroll area.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "orientation",
+      description: "The orientation of the scrollbar",
+      required: false,
+      value: "'horizontal' | 'vertical'",
+      defaultValue: "'vertical'",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the scrollbar",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/search-box.mdx b/apps/portal/src/content/docs/components/search-box.mdx
new file mode 100644
index 0000000000..67768d8a6c
--- /dev/null
+++ b/apps/portal/src/content/docs/components/search-box.mdx
@@ -0,0 +1,147 @@
+---
+title: Search Box
+description: Search Box component documentation
+---
+
+The Search Box component provides a UI element for entering search queries. It includes optional features like search icon, keyboard shortcuts, and custom content.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<SearchBox.Root
+  placeholder="Search..." 
+  hasSearchIcon={true} 
+  hasShortcut={true} 
+  shortcutLetter="K" 
+  shortcutModifier="alt" 
+/>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { SearchBox } from '@harnessio/ui/components'
+
+return (
+  <SearchBox
+    placeholder="Search..."
+    hasSearchIcon={true}
+    hasShortcut={true}
+    shortcutLetter="K"
+    shortcutModifier="cmd"
+  />
+)
+```
+
+## API Reference
+
+### SearchBox
+
+The `SearchBox` component serves as the main container for the search box element.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "placeholder",
+      description: "The placeholder text for the search box",
+      required: true,
+      value: "string",
+    },
+    {
+      name: "width",
+      description: "The width of the search box",
+      required: false,
+      value: "'full' | 'fixed'",
+      defaultValue: "'fixed'",
+    },
+    {
+      name: "hasShortcut",
+      description: "Whether to enable keyboard shortcuts",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+    {
+      name: "hasSearchIcon",
+      description: "Whether to display the search icon",
+      required: false,
+      value: "boolean",
+      defaultValue: "true",
+    },
+    {
+      name: "shortcutLetter",
+      description: "The letter for the keyboard shortcut",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "shortcutModifier",
+      description: "The modifier key for the keyboard shortcut",
+      required: false,
+      value: "'cmd' | 'ctrl' | 'alt' | 'shift'",
+    },
+    {
+      name: "textSize",
+      description: "The text size of the search box",
+      required: false,
+      value: "TextSize",
+      defaultValue: "TextSize['text-sm']",
+    },
+    {
+      name: "onSearch",
+      description: "Function to handle search action",
+      required: false,
+      value: "() => void",
+    },
+    {
+      name: "onFocus",
+      description: "Function to handle focus action",
+      required: false,
+      value: "() => void",
+    },
+    {
+      name: "handleChange",
+      description: "Function to handle input change",
+      required: false,
+      value: "ChangeEventHandler<HTMLInputElement>",
+    },
+    {
+      name: "showOnFocus",
+      description: "Whether to show the search box on focus",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+    {
+      name: "defaultValue",
+      description: "The default value of the search box",
+      required: false,
+      value: "InputHTMLAttributes<HTMLInputElement>['defaultValue']",
+    },
+    {
+      name: "value",
+      description: "The current value of the search box",
+      required: false,
+      value: "InputHTMLAttributes<HTMLInputElement>['value']",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the search box",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "inputClassName",
+      description: "Additional class names for the input element",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "children",
+      description: "Custom content to display inside the search box",
+      required: false,
+      value: "ReactNode",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/select.mdx b/apps/portal/src/content/docs/components/select.mdx
new file mode 100644
index 0000000000..e97148b30c
--- /dev/null
+++ b/apps/portal/src/content/docs/components/select.mdx
@@ -0,0 +1,256 @@
+---
+title: Select
+description: Select component documentation
+---
+
+The Select component provides a UI element for selecting an option from a dropdown list. It includes optional features like labels, error states, and captions.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<Select placeholder="Select an option" onValueChange={console.log}>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Group 1</SelectLabel>
+        <SelectItem value="option1">Option 1</SelectItem>
+        <SelectItem value="option2">Option 2</SelectItem>
+      </SelectGroup>
+      <SelectSeparator />
+      <SelectGroup>
+        <SelectLabel>Group 2</SelectLabel>
+        <SelectItem value="option3">Option 3</SelectItem>
+        <SelectItem value="option4">Option 4</SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Select, SelectGroup, SelectLabel, SelectItem, SelectSeparator } from '@harnessio/ui/components'
+
+return (
+  <Select placeholder="Select an option" onValueChange={console.log}>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Group 1</SelectLabel>
+        <SelectItem value="option1">Option 1</SelectItem>
+        <SelectItem value="option2">Option 2</SelectItem>
+      </SelectGroup>
+      <SelectSeparator />
+      <SelectGroup>
+        <SelectLabel>Group 2</SelectLabel>
+        <SelectItem value="option3">Option 3</SelectItem>
+        <SelectItem value="option4">Option 4</SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+)
+```
+
+## Anatomy
+
+The Select component can be used to select an option from a dropdown list with optional features like labels, error states, and captions.
+
+```typescript jsx
+<Select placeholder="Select an option" onValueChange={console.log}>
+  <SelectContent>
+    <SelectGroup>
+      <SelectLabel>Group 1</SelectLabel>
+      <SelectItem value="option1">Option 1</SelectItem>
+      <SelectItem value="option2">Option 2</SelectItem>
+    </SelectGroup>
+    <SelectSeparator />
+    <SelectGroup>
+      <SelectLabel>Group 2</SelectLabel>
+      <SelectItem value="option3">Option 3</SelectItem>
+      <SelectItem value="option4">Option 4</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>
+```
+
+## API Reference
+
+### Select
+
+The `Select` component serves as the main container for the select element.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "label",
+      description: "The label text for the select",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "error",
+      description: "The error message for the select",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "caption",
+      description: "The caption text for the select",
+      required: false,
+      value: "ReactNode",
+    },
+    {
+      name: "disabled",
+      description: "Whether the select is disabled",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "placeholder",
+      description: "The placeholder text for the select",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "selectValueChildren",
+      description: "Custom content to display inside the select value",
+      required: false,
+      value: "ReactNode",
+    },
+    {
+      name: "children",
+      description: "The child components to render inside the select",
+      required: true,
+      value: "ReactNode",
+    },
+  ]}
+/>
+
+### SelectTrigger
+
+The `SelectTrigger` component is used to display the trigger button for the select dropdown.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the trigger",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "iconClassName",
+      description: "Additional class names for the icon",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the trigger",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### SelectContent
+
+The `SelectContent` component is used to display the content container for the select dropdown.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the content container",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "position",
+      description: "The position of the content container",
+      required: false,
+      value: "'popper' | 'item'",
+      defaultValue: "'popper'",
+    },
+    {
+      name: "withSearch",
+      description: "Whether to include a search panel for options",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "searchProps",
+      description: "Props for the search panel",
+      required: false,
+      value: "SelectContentSearchProps",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the content container",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### SelectLabel
+
+The `SelectLabel` component is used to display a label for grouping select items.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the label",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the label",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### SelectItem
+
+The `SelectItem` component is used to display an individual selectable item within the dropdown.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the item",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "isItemTextAsChild",
+      description: "Whether to render the item text as a child element",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the item",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### SelectSeparator
+
+The `SelectSeparator` component is used to display a visual separator between select items.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "className",
+      description: "Additional class names for the separator",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/sha-badge.mdx b/apps/portal/src/content/docs/components/sha-badge.mdx
new file mode 100644
index 0000000000..0a6f086391
--- /dev/null
+++ b/apps/portal/src/content/docs/components/sha-badge.mdx
@@ -0,0 +1,132 @@
+---
+title: SHA Badge
+description: SHA Badge component documentation
+---
+
+The SHA Badge component provides a UI element for displaying a commit SHA with optional actions. It includes a root container, content area, and an icon button.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<div className="inline-flex"> 
+    <ShaBadge.Root>
+      <ShaBadge.Content>
+        abc1234
+      </ShaBadge.Content>
+      <ShaBadge.Icon handleClick={() => console.log('Icon clicked')}>
+        <Icon name="clone" size={16} />
+      </ShaBadge.Icon>
+    </ShaBadge.Root>
+  </div>
+  `}
+/>
+
+## Usage
+
+```typescript jsx
+import { ShaBadge } from '@harnessio/ui/components'
+
+return (
+  <ShaBadge.Root>
+    <ShaBadge.Content>
+      abc1234
+    </ShaBadge.Content>
+    <ShaBadge.Icon handleClick={() => console.log('Icon clicked')}>
+      <Icon name="clone" size={16} />
+    </ShaBadge.Icon>
+  </ShaBadge.Root>
+)
+```
+
+## Anatomy
+
+The SHA Badge component can be used to display a commit SHA with optional actions.
+
+```typescript jsx
+<ShaBadge.Root>
+  <ShaBadge.Content>
+    abc1234
+  </ShaBadge.Content>
+  <ShaBadge.Icon handleClick={() => console.log('Icon clicked')}>
+    <Icon name="clone" size={16} />
+  </ShaBadge.Icon>
+</ShaBadge.Root>
+```
+
+## API Reference
+
+### ShaBadge.Root
+
+The `Root` component serves as the main container for the SHA badge.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the root",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the root",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### ShaBadge.Content
+
+The `Content` component is used to display the content of the SHA badge.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the SHA badge",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the content",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "asChild",
+      description: "Whether to render the content as a child element",
+      required: false,
+      value: "boolean",
+    },
+  ]}
+/>
+
+### ShaBadge.Icon
+
+The `Icon` component is used to display an icon button inside the SHA badge.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The icon to display inside the button",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "handleClick",
+      description: "Function to handle the icon button click",
+      required: false,
+      value: "() => void",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the icon button",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/spacer.mdx b/apps/portal/src/content/docs/components/spacer.mdx
new file mode 100644
index 0000000000..a2b85134c2
--- /dev/null
+++ b/apps/portal/src/content/docs/components/spacer.mdx
@@ -0,0 +1,51 @@
+---
+title: Spacer
+description: Spacer component documentation
+---
+
+The Spacer component provides a UI element for adding vertical spacing between elements. It includes various size options.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<>
+    <div>Element 1</div>
+    <Spacer size={4} />
+    <div>Element 2</div>
+</>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Spacer } from '@harnessio/ui/components'
+
+return (
+  <div>
+    <div>Element 1</div>
+    <Spacer size={4} />
+    <div>Element 2</div>
+  </div>
+)
+```
+
+## API Reference
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "size",
+      description: "The size of the spacer",
+      required: false,
+      value:
+        "1 | 1.5 | 2 | 2.5 | 3 | 4 | 4.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the spacer",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/stacked-list.mdx b/apps/portal/src/content/docs/components/stacked-list.mdx
new file mode 100644
index 0000000000..ca65ce626e
--- /dev/null
+++ b/apps/portal/src/content/docs/components/stacked-list.mdx
@@ -0,0 +1,201 @@
+---
+title: Stacked List
+description: Stacked List component documentation
+---
+
+The Stacked List component provides a UI element for displaying a list of items in a stacked layout. It includes various customization options.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<StackedList.Root>
+    <StackedList.Item>
+      <StackedList.Field title="Item 1" description="Description for item 1" />
+    </StackedList.Item>
+    <StackedList.Item thumbnail={<Icon name="clone" />} actions={<Button>Item Action</Button>} >
+      <StackedList.Field title="Item 2" description="Description for item 2" />
+    </StackedList.Item>
+  </StackedList.Root>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { StackedList } from '@harnessio/ui/components'
+
+return (
+  <StackedList.Root>
+    <StackedList.Item>
+      <StackedList.Field title="Item 1" description="Description for item 1" />
+    </StackedList.Item>
+    <StackedList.Item thumbnail={<Icon name="clone" />} actions={<Button>Item Action</Button>} >
+      <StackedList.Field title="Item 2" description="Description for item 2" />
+    </StackedList.Item>
+  </StackedList.Root>
+)
+```
+
+## Anatomy
+
+The Stacked List component can be used to display a list of items in a stacked layout with various customization options.
+
+```typescript jsx
+<StackedList.Root>
+  <StackedList.Item>
+    <StackedList.Field title="Item 1" description="Description for item 1" />
+  </StackedList.Item>
+  <StackedList.Item thumbnail={<Icon name="clone" />} actions={<Button>Item Action</Button>} >
+    <StackedList.Field title="Item 2" description="Description for item 2" />
+  </StackedList.Item>
+</StackedList.Root>
+```
+
+## API Reference
+
+### StackedList.Root
+
+The `Root` component serves as the main container for the stacked list.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the root",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "onlyTopRounded",
+      description: "Whether to apply rounded corners only to the top",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "borderBackground",
+      description: "Whether to apply a border background",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "withoutBorder",
+      description: "Whether to remove the border",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the root",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### StackedList.Item
+
+The `Item` component is used to display an individual item in the stacked list.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the item",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "thumbnail",
+      description: "The thumbnail to display inside the item",
+      required: false,
+      value: "ReactNode",
+    },
+    {
+      name: "actions",
+      description: "The actions to display inside the item",
+      required: false,
+      value: "ReactNode",
+    },
+    {
+      name: "asChild",
+      description: "Whether to render the item as a child element",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "isLast",
+      description: "Whether the item is the last in the list",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "isHeader",
+      description: "Whether the item is a header",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "disableHover",
+      description: "Whether to disable hover effects",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the item",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### StackedList.Field
+
+The `Field` component is used to display a field inside the stacked list item.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "title",
+      description: "The title of the field",
+      required: false,
+      value: "ReactNode",
+    },
+    {
+      name: "description",
+      description: "The description of the field",
+      required: false,
+      value: "ReactNode",
+    },
+    {
+      name: "label",
+      description: "Whether the field is a label",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "primary",
+      description: "Whether the field is primary",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "secondary",
+      description: "Whether the field is secondary",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "right",
+      description: "Whether to align the field to the right",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the field",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/styled-link.mdx b/apps/portal/src/content/docs/components/styled-link.mdx
new file mode 100644
index 0000000000..9e23436fe9
--- /dev/null
+++ b/apps/portal/src/content/docs/components/styled-link.mdx
@@ -0,0 +1,48 @@
+---
+title: Styled Link
+description: Styled Link component documentation
+---
+
+The Styled Link component provides a UI element for creating styled links using `react-router-dom`. It includes optional features like custom class names.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<StyledLink to="/example">Example Link</StyledLink>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { StyledLink } from '@harnessio/ui/components'
+
+return (
+  <StyledLink to="/example">Example Link</StyledLink>
+)
+```
+
+## API Reference
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "to",
+      description: "The destination URL for the link",
+      required: true,
+      value: "string",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the link",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "children",
+      description: "The content to display inside the link",
+      required: true,
+      value: "ReactNode",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/table.mdx b/apps/portal/src/content/docs/components/table.mdx
new file mode 100644
index 0000000000..ddb35c229a
--- /dev/null
+++ b/apps/portal/src/content/docs/components/table.mdx
@@ -0,0 +1,289 @@
+---
+title: Table
+description: Table component documentation
+---
+
+The Table component provides a UI element for displaying tabular data. It includes various subcomponents such as TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption to offer a structured and customizable interface.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<Table variant="asStackedList">
+  <TableHeader>
+    <TableRow>
+      <TableHead>Header 1</TableHead>
+      <TableHead>Header 2</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Data 1</TableCell>
+      <TableCell>Data 2</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Data 3</TableCell>
+      <TableCell>Data 4</TableCell>
+    </TableRow>
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell>Footer 1</TableCell>
+      <TableCell>Footer 2</TableCell>
+    </TableRow>
+  </TableFooter>
+</Table>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell } from '@harnessio/ui/components'
+
+return (
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Header 1</TableHead>
+        <TableHead>Header 2</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell>Data 1</TableCell>
+        <TableCell>Data 2</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Data 3</TableCell>
+        <TableCell>Data 4</TableCell>
+      </TableRow>
+    </TableBody>
+    <TableFooter>
+      <TableRow>
+        <TableCell>Footer 1</TableCell>
+        <TableCell>Footer 2</TableCell>
+      </TableRow>
+    </TableFooter>
+  </Table>
+)
+```
+
+## Anatomy
+
+The Table component can be used to display tabular data with various subcomponents for a structured and customizable interface.
+
+```typescript jsx
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Header 1</TableHead>
+      <TableHead>Header 2</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Data 1</TableCell>
+      <TableCell>Data 2</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Data 3</TableCell>
+      <TableCell>Data 4</TableCell>
+    </TableRow>
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell>Footer 1</TableCell>
+      <TableCell>Footer 2</TableCell>
+    </TableRow>
+  </TableFooter>
+</Table>
+```
+
+## API Reference
+
+### Table
+
+The `Table` component serves as the main container for displaying tabular data.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "variant",
+      description: "The variant of the table",
+      required: false,
+      value: "'default' | 'asStackedList'",
+      defaultValue: "'default'",
+    },
+    {
+      name: "disableXScroll",
+      description: "Whether to disable horizontal scrolling",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "tableClassName",
+      description: "Additional class names for the table",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the table container",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "children",
+      description: "The content to display inside the table",
+      required: true,
+      value: "ReactNode",
+    },
+  ]}
+/>
+
+### TableHeader
+
+The `TableHeader` component is used to define the header section of the table.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the header",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the header",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### TableBody
+
+The `TableBody` component is used to define the body section of the table.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the body",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the body",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### TableFooter
+
+The `TableFooter` component is used to define the footer section of the table.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the footer",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the footer",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### TableRow
+
+The `TableRow` component is used to define a row in the table.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the row",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the row",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### TableHead
+
+The `TableHead` component is used to define a header cell in the table.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the header cell",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the header cell",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### TableCell
+
+The `TableCell` component is used to define a cell in the table.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the cell",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the cell",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### TableCaption
+
+The `TableCaption` component is used to define a caption for the table.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the caption",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the caption",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/tabs.mdx b/apps/portal/src/content/docs/components/tabs.mdx
new file mode 100644
index 0000000000..a2d6e21b9d
--- /dev/null
+++ b/apps/portal/src/content/docs/components/tabs.mdx
@@ -0,0 +1,237 @@
+---
+title: Tabs
+description: Tabs component documentation
+---
+
+The Tabs component provides a UI element for creating tabbed navigation interfaces. It includes various styles and sizes.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<>
+  <div className="mb-8">
+    <h4 className="mb-4">Default Variant</h3>
+    <Tabs defaultValue="tab1">
+      <TabsList variant="default">
+        <TabsTrigger variant="default" value="tab1">Tab 1</TabsTrigger>
+        <TabsTrigger variant="default" value="tab2">Tab 2</TabsTrigger>
+      </TabsList>
+      <TabsContent className="mt-4" value="tab1">Content for Tab 1</TabsContent>
+      <TabsContent className="mt-4" value="tab2">Content for Tab 2</TabsContent>
+    </Tabs>
+  </div>
+  <div className="mb-8">
+    <h4 className="mb-4">Underline Variant</h3>
+    <Separator />
+    <Tabs defaultValue="tab1">
+      <TabsList variant="underline">
+        <TabsTrigger variant="underline" value="tab1">Tab 1</TabsTrigger>
+        <TabsTrigger variant="underline" value="tab2">Tab 2</TabsTrigger>
+      </TabsList>
+      <TabsContent className="mt-4" value="tab1">Content for Tab 1</TabsContent>
+      <TabsContent className="mt-4" value="tab2">Content for Tab 2</TabsContent>
+    </Tabs>
+  </div>
+  <div className="mb-8">
+    <h4 className="mb-4">Navigation Variant</h3>
+    <Separator />
+    <Tabs defaultValue="tab1">
+      <TabsList variant="navigation">
+        <TabsTrigger variant="navigation" value="tab1">Tab 1</TabsTrigger>
+        <TabsTrigger variant="navigation" value="tab2">Tab 2</TabsTrigger>
+      </TabsList>
+      <TabsContent className="mt-4" value="tab1">Content for Tab 1</TabsContent>
+      <TabsContent className="mt-4" value="tab2">Content for Tab 2</TabsContent>
+    </Tabs>
+  </div>
+  <div className="mb-8">
+    <h4 className="mb-4">Tabnav Variant</h3>
+    <Tabs defaultValue="tab1">
+      <TabsList variant="tabnav">
+        <TabsTrigger variant="tabnav" value="tab1">Tab 1</TabsTrigger>
+        <TabsTrigger variant="tabnav" value="tab2">Tab 2</TabsTrigger>
+      </TabsList>
+      <TabsContent className="mt-4" value="tab1">Content for Tab 1</TabsContent>
+      <TabsContent className="mt-4" value="tab2">Content for Tab 2</TabsContent>
+    </Tabs>
+  </div>
+</>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@harnessio/ui/components'
+
+return (
+  <Tabs defaultValue="tab1">
+    <TabsList variant="default">
+      <TabsTrigger variant="default" value="tab1">Tab 1</TabsTrigger>
+      <TabsTrigger variant="default" value="tab2">Tab 2</TabsTrigger>
+    </TabsList>
+    <TabsContent value="tab1">Content for Tab 1</TabsContent>
+    <TabsContent value="tab2">Content for Tab 2</TabsContent>
+  </Tabs>
+)
+```
+
+## Anatomy
+
+The Tabs component can be used to create tabbed navigation interfaces with various styles and sizes.
+
+```typescript jsx
+<Tabs defaultValue="tab1">
+  <TabsList variant="default">
+    <TabsTrigger variant="default" value="tab1">Tab 1</TabsTrigger>
+    <TabsTrigger variant="default" value="tab2">Tab 2</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab1">Content for Tab 1</TabsContent>
+  <TabsContent value="tab2">Content for Tab 2</TabsContent>
+</Tabs>
+```
+
+## API Reference
+
+### Tabs
+
+The `Tabs` component serves as the main container for the tabs element.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "defaultValue",
+      description: "The default value of the tabs",
+      required: false,
+      type: "string",
+    },
+    {
+      name: "value",
+      description: "The current value of the tabs",
+      required: false,
+      type: "string",
+    },
+    {
+      name: "onValueChange",
+      description: "Handler for value change",
+      required: false,
+      type: "(value: string) => void",
+    },
+    {
+      name: "variant",
+      description: "The variant of the tabs",
+      required: false,
+      type: "'default' | 'underline' | 'navigation' | 'tabnav'",
+      defaultValue: "'default'",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the tabs",
+      required: false,
+      type: "string",
+    },
+  ]}
+/>
+
+### TabsList
+
+The `TabsList` component is used to display the list of tab triggers.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the list",
+      required: true,
+      type: "ReactNode",
+    },
+    {
+      name: "variant",
+      description: "The variant of the tabs list",
+      required: false,
+      type: "'default' | 'underline' | 'navigation' | 'tabnav'",
+      defaultValue: "'default'",
+    },
+    {
+      name: "fontSize",
+      description: "The font size of the tabs list",
+      required: false,
+      type: "'xs' | 'sm'",
+      defaultValue: "'sm'",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the tabs list",
+      required: false,
+      type: "string",
+    },
+  ]}
+/>
+
+### TabsTrigger
+
+The `TabsTrigger` component is used to display an individual tab trigger.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the tab trigger",
+      required: true,
+      type: "ReactNode",
+    },
+    {
+      name: "value",
+      description: "The value of the tab trigger",
+      required: true,
+      type: "string",
+    },
+    {
+      name: "variant",
+      description: "The variant of the tab trigger",
+      required: false,
+      type: "'default' | 'underline' | 'navigation' | 'tabnav'",
+      defaultValue: "'default'",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the tab trigger",
+      required: false,
+      type: "string",
+    },
+  ]}
+/>
+
+### TabsContent
+
+The `TabsContent` component is used to display the content of a tab.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the tab",
+      required: true,
+      type: "ReactNode",
+    },
+    {
+      name: "value",
+      description: "The value of the tab content",
+      required: true,
+      type: "string",
+    },
+    {
+      name: "variant",
+      description: "The variant of the tab content",
+      required: false,
+      type: "'default' | 'underline' | 'navigation' | 'tabnav'",
+      defaultValue: "'default'",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the tab content",
+      required: false,
+      type: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/text.mdx b/apps/portal/src/content/docs/components/text.mdx
new file mode 100644
index 0000000000..712b7b6fc3
--- /dev/null
+++ b/apps/portal/src/content/docs/components/text.mdx
@@ -0,0 +1,134 @@
+---
+title: Text
+description: Text component documentation
+---
+
+The Text component provides a UI element for displaying text with various styles and properties. It includes options for alignment, size, weight, color, and more.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<>
+    <Text size={4} weight="bold" color="primary">Example Text</Text>
+    <Separator className="my-4" />
+    <Text size={2} weight="medium" color="secondary">Another Example Text</Text>
+    <Separator className="my-4" />
+    <Text size={3} weight="semibold">Yet Another Example Text</Text>
+</>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Text } from '@harnessio/ui/components'
+
+return (
+  <>
+    <Text size={4} weight="bold" color="primary">Example Text</Text>
+    <hr className="my-4" />
+    <Text size={2} weight="medium" color="secondary">Another Example Text</Text>
+    <hr className="my-4" />
+    <Text size={3} weight="semibold" color="tertiary">Yet Another Example Text</Text>
+  </>
+)
+```
+
+## Anatomy
+
+The Text component can be used to display text with various styles and properties.
+
+```typescript jsx
+<>
+  <Text size={4} weight="bold" color="primary">Example Text</Text>
+  <hr className="my-4" />
+  <Text size={2} weight="medium" color="secondary">Another Example Text</Text>
+  <hr className="my-4" />
+  <Text size={3} weight="semibold" color="tertiary">Yet Another Example Text</Text>
+</>
+```
+
+## API Reference
+
+### Text
+
+The `Text` component serves as the main container for displaying text with various styles and properties.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "as",
+      description:
+        "Shorthand for changing the default rendered element into a semantically appropriate alternative.",
+      required: false,
+      value:
+        "'span' | 'div' | 'label' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+    },
+    {
+      name: "asChild",
+      description:
+        "Change the default rendered element for the one passed as a child, merging their props and behavior.",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "align",
+      description: "Sets the CSS text-align property.",
+      required: false,
+      value: "'left' | 'center' | 'right'",
+    },
+    {
+      name: "size",
+      description: "Sets the text size.",
+      required: false,
+      value: "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13",
+      defaultValue: "2",
+    },
+    {
+      name: "trim",
+      description:
+        "Trims the leading whitespace from the start or end of the text.",
+      required: false,
+      value: "'normal' | 'start' | 'end' | 'both'",
+    },
+    {
+      name: "truncate",
+      description: "Truncates text with an ellipsis.",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "weight",
+      description: "Sets the font-weight property.",
+      required: false,
+      value: "'normal' | 'medium' | 'semibold' | 'bold'",
+      defaultValue: "normal",
+    },
+    {
+      name: "color",
+      description: "Sets the color property.",
+      required: false,
+      value:
+        "'primary' | 'secondary' | 'tertiary' | 'tertiaryBackground' | 'foreground-5' | 'foreground-4' | 'inherit'",
+      defaultValue: "primary",
+    },
+    {
+      name: "wrap",
+      description: "Controls the wrapping behavior of the text.",
+      required: false,
+      value: "'wrap' | 'nowrap' | 'pretty' | 'balance'",
+    },
+    {
+      name: "children",
+      description: "The content to display inside the text component.",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the text component.",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/textarea.mdx b/apps/portal/src/content/docs/components/textarea.mdx
new file mode 100644
index 0000000000..2b1aac7055
--- /dev/null
+++ b/apps/portal/src/content/docs/components/textarea.mdx
@@ -0,0 +1,122 @@
+---
+title: Textarea
+description: Textarea component documentation
+---
+
+The Textarea component provides a UI element for entering multi-line text. It includes optional features like labels, captions, and error messages.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<Textarea 
+    id="example-textarea" 
+    label="Textarea Label" 
+    placeholder="Enter text here" 
+    caption="This is a caption" 
+    optional 
+    resizable 
+  />`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Textarea } from '@harnessio/ui/components'
+
+return (
+  <Textarea
+    id="example-textarea"
+    label="Textarea Label"
+    placeholder="Enter text here"
+    caption="This is a caption"
+    error="This is an error message"
+    optional
+    resizable
+  />
+)
+```
+
+## API Reference
+
+### Textarea
+
+The `Textarea` component serves as the main container for the textarea element.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "id",
+      description: "The id of the textarea",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "label",
+      description: "The label text for the textarea",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "caption",
+      description: "The caption text for the textarea",
+      required: false,
+      value: "ReactNode",
+    },
+    {
+      name: "error",
+      description: "The error message for the textarea",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "optional",
+      description: "Whether the textarea is optional",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "resizable",
+      description: "Whether the textarea is resizable",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the textarea",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "disabled",
+      description: "Whether the textarea is disabled",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "placeholder",
+      description: "The placeholder text for the textarea",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "value",
+      description: "The current value of the textarea",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "defaultValue",
+      description: "The default value of the textarea",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "onChange",
+      description: "Handler for value change",
+      required: false,
+      value: "React.ChangeEventHandler<HTMLTextAreaElement>",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/topbar.mdx b/apps/portal/src/content/docs/components/topbar.mdx
new file mode 100644
index 0000000000..2ce49f2eba
--- /dev/null
+++ b/apps/portal/src/content/docs/components/topbar.mdx
@@ -0,0 +1,133 @@
+---
+title: Topbar
+description: Topbar component documentation
+---
+
+The Topbar component provides a UI element for displaying a top navigation bar. It includes various sections like left, center, and right.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<Topbar.Root>
+    <Topbar.Left>
+      Left Action contents
+    </Topbar.Left>
+    <Topbar.Center>
+      Center Content
+    </Topbar.Center>
+    <Topbar.Right>
+      Right Action contents
+    </Topbar.Right>
+  </Topbar.Root>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Topbar } from '@harnessio/ui/components'
+
+return (
+  <Topbar.Root>
+    <Topbar.Left>
+      <Button>Left Action</Button>
+    </Topbar.Left>
+    <Topbar.Center>
+      <Text>Center Content</Text>
+    </Topbar.Center>
+    <Topbar.Right>
+      <Button>Right Action</Button>
+    </Topbar.Right>
+  </Topbar.Root>
+)
+```
+
+## Anatomy
+
+The Topbar component can be used to display a top navigation bar with various sections like left, center, and right.
+
+```typescript jsx
+<Topbar.Root>
+  <Topbar.Left>
+    <Button>Left Action</Button>
+  </Topbar.Left>
+  <Topbar.Center>
+    <Text>Center Content</Text>
+  </Topbar.Center>
+  <Topbar.Right>
+    <Button>Right Action</Button>
+  </Topbar.Right>
+</Topbar.Root>
+```
+
+## API Reference
+
+### Topbar
+
+The `Topbar` component provides a UI element for displaying a top navigation bar. It consists of the following subcomponents:
+
+### Topbar.Root
+
+The `Root` component serves as the main container for the topbar.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the root",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the root",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### Topbar.Left
+
+The `Left` component is used to display the left section of the topbar.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the left section",
+      required: true,
+      value: "ReactNode",
+    },
+  ]}
+/>
+
+### Topbar.Center
+
+The `Center` component is used to display the center section of the topbar.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the center section",
+      required: true,
+      value: "ReactNode",
+    },
+  ]}
+/>
+
+### Topbar.Right
+
+The `Right` component is used to display the right section of the topbar.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the right section",
+      required: true,
+      value: "ReactNode",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/soon/stacked-list.mdx b/apps/portal/src/content/docs/soon/stacked-list.mdx
deleted file mode 100644
index 576cae42a9..0000000000
--- a/apps/portal/src/content/docs/soon/stacked-list.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: Stacked list
-description: Stacked list component
----
-
-This description and API reference is coming soon
-
-import { DocsPage } from "@/components/docs-page";
-
-<DocsPage.ComponentExample client:only code={`<StackedList></StackedList>`} />
-
-## Usage
-
-```typescript jsx
-import { StackedList } from '@harnessio/ui/components'
-
-//...
-
-return (
-  <StackedList>
-  </StackedList>
-)
-```
-
-## Anatomy
-
-Coming soon.
-
-```typescript jsx
-<></>
-```
-
-## API Reference
-
-### Sub component
-
-Coming soon
-
-<DocsPage.PropsTable
-  props={[
-    {
-      name: "-",
-      description: "-",
-      required: "-",
-    },
-  ]}
-/>