From d9306b60cf7922665ff85ec91b0bb9b87ee8ab65 Mon Sep 17 00:00:00 2001
From: harish-viswa <harish.viswanathan@harness.io>
Date: Mon, 10 Feb 2025 21:38:09 +0530
Subject: [PATCH] docs: added docs for ui components

---
 .../docs/components/branch-chooser.mdx        |  92 +++++
 .../docs/components/commit-copy-action.mdx    |  59 ++++
 .../content/docs/components/dropdown-menu.mdx | 334 ++++++++++++++++++
 .../components/file-additions-trigger.mdx     |  69 ++++
 .../content/docs/components/file-explorer.mdx | 167 +++++++++
 .../docs/components/file-toolbar-actions.mdx  |  67 ++++
 .../docs/components/image-carousel.mdx        |  80 +++++
 .../src/content/docs/components/input-otp.mdx | 197 +++++++++++
 .../content/docs/components/label-marker.mdx  |  84 +++++
 .../content/docs/components/list-actions.mdx  | 168 +++++++++
 .../src/content/docs/components/meter.mdx     |  72 ++++
 .../docs/components/more-actions-tooltip.mdx  |  91 +++++
 .../content/docs/components/pagination.mdx    | 258 ++++++++++++++
 .../src/content/docs/components/progress.mdx  |  58 +++
 .../src/content/docs/components/radio.mdx     | 168 +++++++++
 .../src/content/docs/components/separator.mdx |  83 +++++
 .../src/content/docs/components/switch.mdx    |  75 ++++
 .../src/content/docs/components/tabnav.mdx    |  74 ++--
 .../src/content/docs/components/toggle.mdx    |  56 +++
 packages/ui/src/components/index.ts           |   1 +
 20 files changed, 2220 insertions(+), 33 deletions(-)
 create mode 100644 apps/portal/src/content/docs/components/branch-chooser.mdx
 create mode 100644 apps/portal/src/content/docs/components/commit-copy-action.mdx
 create mode 100644 apps/portal/src/content/docs/components/dropdown-menu.mdx
 create mode 100644 apps/portal/src/content/docs/components/file-additions-trigger.mdx
 create mode 100644 apps/portal/src/content/docs/components/file-explorer.mdx
 create mode 100644 apps/portal/src/content/docs/components/file-toolbar-actions.mdx
 create mode 100644 apps/portal/src/content/docs/components/image-carousel.mdx
 create mode 100644 apps/portal/src/content/docs/components/input-otp.mdx
 create mode 100644 apps/portal/src/content/docs/components/label-marker.mdx
 create mode 100644 apps/portal/src/content/docs/components/list-actions.mdx
 create mode 100644 apps/portal/src/content/docs/components/meter.mdx
 create mode 100644 apps/portal/src/content/docs/components/more-actions-tooltip.mdx
 create mode 100644 apps/portal/src/content/docs/components/pagination.mdx
 create mode 100644 apps/portal/src/content/docs/components/progress.mdx
 create mode 100644 apps/portal/src/content/docs/components/radio.mdx
 create mode 100644 apps/portal/src/content/docs/components/separator.mdx
 create mode 100644 apps/portal/src/content/docs/components/switch.mdx
 create mode 100644 apps/portal/src/content/docs/components/toggle.mdx

diff --git a/apps/portal/src/content/docs/components/branch-chooser.mdx b/apps/portal/src/content/docs/components/branch-chooser.mdx
new file mode 100644
index 0000000000..3d2c8f5fd3
--- /dev/null
+++ b/apps/portal/src/content/docs/components/branch-chooser.mdx
@@ -0,0 +1,92 @@
+---
+title: Branch Chooser
+description: Branch Chooser component documentation
+---
+
+The Branch Chooser component provides a UI element for selecting a branch from a list of branches. It includes a dropdown menu for branch selection.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<BranchSelector 
+  name="mains" 
+  branchList={[{ name: 'main' }, { name: 'develop' }]} 
+  selectBranch={(branch) => console.log('Selected branch:', branch)} 
+/>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { BranchSelector } from '@harnessio/ui/components'
+
+return (
+  <BranchSelector
+    name="main"
+    branchList={[{ name: 'main' }, { name: 'develop' }]}
+    selectBranch={(branch) => console.log('Selected branch:', branch)}
+  />
+)
+```
+
+## Anatomy
+
+The Branch Chooser component can be used to select a branch from a list of branches with a dropdown menu.
+
+```typescript jsx
+<BranchSelector
+  name="main"
+  branchList={[{ name: 'main' }, { name: 'develop' }]}
+  selectBranch={(branch) => console.log('Selected branch:', branch)}
+/>
+```
+
+## API Reference
+
+### BranchSelector
+
+The `BranchSelector` component serves as the main container for the branch chooser element.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "name",
+      description: "The name of the selected branch",
+      required: true,
+      value: "string",
+    },
+    {
+      name: "branchList",
+      description: "The list of branches to choose from",
+      required: false,
+      value: "BranchListProps[]",
+    },
+    {
+      name: "size",
+      description: "The size of the branch chooser",
+      required: false,
+      value: "'default' | 'sm'",
+      defaultValue: "'default'",
+    },
+    {
+      name: "width",
+      description: "The width of the branch chooser",
+      required: false,
+      value: "'auto' | 'sm' | 'md' | 'lg' | 'full'",
+      defaultValue: "'auto'",
+    },
+    {
+      name: "selectBranch",
+      description: "Function to handle branch selection",
+      required: true,
+      value: "(branch: string) => void",
+    },
+    {
+      name: "prefix",
+      description: "Optional prefix to display before the branch name",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/commit-copy-action.mdx b/apps/portal/src/content/docs/components/commit-copy-action.mdx
new file mode 100644
index 0000000000..dd2876289c
--- /dev/null
+++ b/apps/portal/src/content/docs/components/commit-copy-action.mdx
@@ -0,0 +1,59 @@
+---
+title: Commit Copy Action
+description: Commit Copy Action component documentation
+---
+
+The Commit Copy Action component provides a UI element for displaying a commit SHA and copying it to the clipboard. It also allows navigation to the commit details page.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`
+  <div className="flex">
+    <CommitCopyActions sha="abc1234" toCommitDetails={({ sha }) => \`/commit/\${sha}\`} />
+  </div>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { CommitCopyActions } from '@harnessio/ui/components'
+
+return (
+  <div className="flex">
+    <CommitCopyActions sha="abc1234" toCommitDetails={({ sha }) => \`/commit/\${sha}\`} />
+  </div>
+)
+```
+
+## Anatomy
+
+The Commit Copy Action component can be used to display a commit SHA and provide copy and navigation functionalities.
+
+```typescript jsx
+<div className="flex">
+  <CommitCopyActions sha="abc1234" toCommitDetails={({ sha }) => \`/commit/\${sha}\`} />
+</div>
+```
+
+## API Reference
+
+### CommitCopyActions
+
+The `CommitCopyActions` component serves as the main container for displaying the commit SHA and providing copy and navigation functionalities.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "sha",
+      description: "The commit SHA to display and copy",
+      required: true,
+    },
+    {
+      name: "toCommitDetails",
+      description: "Function to generate the URL for commit details",
+      required: false,
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/dropdown-menu.mdx b/apps/portal/src/content/docs/components/dropdown-menu.mdx
new file mode 100644
index 0000000000..e4aa839186
--- /dev/null
+++ b/apps/portal/src/content/docs/components/dropdown-menu.mdx
@@ -0,0 +1,334 @@
+---
+title: Dropdown Menu
+description: A vertically stacked menu that appears when triggered by a button.
+---
+
+The Dropdown Menu component provides a flexible menu interface that appears when triggered by a button. It's built on top of Radix UI's dropdown menu primitive and includes various subcomponents for creating rich menu structures.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    <Button>
+      Options
+      <Icon name="chevron-down" className="ml-2 h-4 w-4" />
+    </Button>
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content>
+    <DropdownMenu.Item>New File</DropdownMenu.Item>
+    <DropdownMenu.Item>Open</DropdownMenu.Item>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Sub>
+      <DropdownMenu.SubTrigger>
+        More Options
+      </DropdownMenu.SubTrigger>
+      <DropdownMenu.SubContent>
+        <DropdownMenu.Item>Save As...</DropdownMenu.Item>
+        <DropdownMenu.Item>Export</DropdownMenu.Item>
+      </DropdownMenu.SubContent>
+    </DropdownMenu.Sub>
+    <DropdownMenu.Separator />
+    <DropdownMenu.CheckboxItem checked={true}>
+      Show Line Numbers
+    </DropdownMenu.CheckboxItem>
+    <DropdownMenu.CheckboxItem checked={false}>
+      Word Wrap
+    </DropdownMenu.CheckboxItem>
+    <DropdownMenu.Separator />
+    <DropdownMenu.RadioGroup value="vscode">
+      <DropdownMenu.RadioItem value="vscode">
+        VS Code Theme
+      </DropdownMenu.RadioItem>
+      <DropdownMenu.RadioItem value="atom">
+        Atom Theme
+      </DropdownMenu.RadioItem>
+      <DropdownMenu.RadioItem value="sublime">
+        Sublime Theme
+      </DropdownMenu.RadioItem>
+    </DropdownMenu.RadioGroup>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { DropdownMenu } from '@harnessio/ui/components'
+
+return (
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      <Button>
+        Options
+        <Icon name="chevron-down" className="ml-2 h-4 w-4" />
+      </Button>
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content>
+      <DropdownMenu.Item>New File</DropdownMenu.Item>
+      <DropdownMenu.Item>Open</DropdownMenu.Item>
+      <DropdownMenu.Separator />
+      <DropdownMenu.Sub>
+        <DropdownMenu.SubTrigger>
+          More Options
+          <Icon name="chevron-right" className="ml-auto h-4 w-4" />
+        </DropdownMenu.SubTrigger>
+        <DropdownMenu.SubContent>
+          <DropdownMenu.Item>Save As...</DropdownMenu.Item>
+          <DropdownMenu.Item>Export</DropdownMenu.Item>
+        </DropdownMenu.SubContent>
+      </DropdownMenu.Sub>
+      <DropdownMenu.Separator />
+      <DropdownMenu.CheckboxItem checked={true}>
+        Show Line Numbers
+      </DropdownMenu.CheckboxItem>
+      <DropdownMenu.CheckboxItem checked={false}>
+        Word Wrap
+      </DropdownMenu.CheckboxItem>
+      <DropdownMenu.Separator />
+      <DropdownMenu.RadioGroup value="vscode">
+        <DropdownMenu.RadioItem value="vscode">
+          VS Code Theme
+        </DropdownMenu.RadioItem>
+        <DropdownMenu.RadioItem value="atom">
+          Atom Theme
+        </DropdownMenu.RadioItem>
+        <DropdownMenu.RadioItem value="sublime">
+          Sublime Theme
+        </DropdownMenu.RadioItem>
+      </DropdownMenu.RadioGroup>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+)
+```
+
+## Anatomy
+
+The Dropdown Menu is composed of several subcomponents that can be imported and used as needed:
+
+```typescript jsx
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger />
+  <DropdownMenu.Content>
+    <DropdownMenu.Item />
+    <DropdownMenu.Group>
+      <DropdownMenu.Item />
+    </DropdownMenu.Group>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Sub>
+      <DropdownMenu.SubTrigger />
+      <DropdownMenu.SubContent />
+    </DropdownMenu.Sub>
+    <DropdownMenu.CheckboxItem />
+    <DropdownMenu.RadioGroup>
+      <DropdownMenu.RadioItem />
+    </DropdownMenu.RadioGroup>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
+```
+
+## API Reference
+
+### Root
+
+The main container for the dropdown menu.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "Must contain a Trigger and Content component",
+      required: true,
+      value: "React.ReactNode",
+    },
+    {
+      name: "defaultOpen",
+      description:
+        "The open state of the dropdown menu when it is initially rendered",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "open",
+      description: "The controlled open state of the dropdown menu",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "onOpenChange",
+      description: "Event handler called when the open state changes",
+      required: false,
+      value: "(open: boolean) => void",
+    },
+    {
+      name: "modal",
+      description: "The modality of the dropdown menu",
+      required: false,
+      value: "boolean",
+    },
+  ]}
+/>
+
+### Trigger
+
+The button that triggers the dropdown menu.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "asChild",
+      description:
+        "Change the component to the HTML tag or custom component of the only child",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "insideSplitButton",
+      description: "Whether the trigger is part of a split button",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "disabled",
+      description:
+        "When true, prevents the user from interacting with the item",
+      required: false,
+      value: "boolean",
+    },
+  ]}
+/>
+
+### Content
+
+The content container for the dropdown menu items.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "sideOffset",
+      description: "Distance in pixels from the trigger",
+      required: false,
+      value: "number",
+      defaultValue: "4",
+    },
+    {
+      name: "align",
+      description: "Preferred alignment against the trigger",
+      required: false,
+      value: "'start' | 'center' | 'end'",
+    },
+    {
+      name: "side",
+      description: "Preferred side of the trigger to render against",
+      required: false,
+      value: "'top' | 'right' | 'bottom' | 'left'",
+    },
+    {
+      name: "collisionPadding",
+      description: "The padding between the arrow and the edges of the content",
+      required: false,
+      value:
+        "number | { top?: number; right?: number; bottom?: number; left?: number }",
+    },
+  ]}
+/>
+
+### Item
+
+An individual menu item.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "inset",
+      description: "Whether the item should be inset",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "disabled",
+      description:
+        "When true, prevents the user from interacting with the item",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "onSelect",
+      description: "Event handler called when the user selects an item",
+      required: false,
+      value: "(event: Event) => void",
+    },
+  ]}
+/>
+
+### CheckboxItem
+
+A menu item that can be checked/unchecked.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "checked",
+      description: "The controlled checked state of the item",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "onCheckedChange",
+      description: "Event handler called when the checked state changes",
+      required: false,
+      value: "(checked: boolean) => void",
+    },
+    {
+      name: "disabled",
+      description:
+        "When true, prevents the user from interacting with the item",
+      required: false,
+      value: "boolean",
+    },
+  ]}
+/>
+
+### RadioGroup
+
+A group of radio items where only one can be checked.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "value",
+      description: "The controlled value of the radio group",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "onValueChange",
+      description: "Event handler called when the value changes",
+      required: false,
+      value: "(value: string) => void",
+    },
+  ]}
+/>
+
+### RadioItem
+
+A menu item that can be selected as part of a radio group.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "value",
+      description: "The unique value of the radio item",
+      required: true,
+      value: "string",
+    },
+    {
+      name: "disabled",
+      description:
+        "When true, prevents the user from interacting with the item",
+      required: false,
+      value: "boolean",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/file-additions-trigger.mdx b/apps/portal/src/content/docs/components/file-additions-trigger.mdx
new file mode 100644
index 0000000000..99d1d99f93
--- /dev/null
+++ b/apps/portal/src/content/docs/components/file-additions-trigger.mdx
@@ -0,0 +1,69 @@
+---
+title: File Additions Trigger
+description: File Additions Trigger component documentation
+---
+
+The File Additions Trigger component provides a UI element for creating new files or uploading files. It uses a dropdown menu to offer these options.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<FileAdditionsTrigger 
+  useTranslationStore={() => ({ t: (key, fallback) => fallback })} 
+  pathNewFile="/new-file" 
+  pathUploadFiles="/upload-files" 
+/>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { FileAdditionsTrigger } from '@harnessio/ui/components'
+
+return (
+  <FileAdditionsTrigger
+    useTranslationStore={() => ({ t: (key, fallback) => fallback })}
+    pathNewFile="/new-file"
+    pathUploadFiles="/upload-files"
+  />
+)
+```
+
+## Anatomy
+
+The File Additions Trigger component can be used to provide options for creating new files or uploading files.
+
+```typescript jsx
+<FileAdditionsTrigger
+  useTranslationStore={() => ({ t: (key, fallback) => fallback })}
+  pathNewFile="/new-file"
+  pathUploadFiles="/upload-files"
+/>
+```
+
+## API Reference
+
+### FileAdditionsTrigger
+
+The `FileAdditionsTrigger` component serves as the main container for the dropdown menu options to create new files or upload files.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "useTranslationStore",
+      description: "Function to get the translation store",
+      required: true,
+    },
+    {
+      name: "pathNewFile",
+      description: "Path to navigate for creating a new file",
+      required: true,
+    },
+    {
+      name: "pathUploadFiles",
+      description: "Path to navigate for uploading files",
+      required: true,
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/file-explorer.mdx b/apps/portal/src/content/docs/components/file-explorer.mdx
new file mode 100644
index 0000000000..9deab620f0
--- /dev/null
+++ b/apps/portal/src/content/docs/components/file-explorer.mdx
@@ -0,0 +1,167 @@
+---
+title: File Explorer
+description: File Explorer component documentation
+---
+
+The File Explorer component provides a UI element for browsing and selecting files or directories. It displays a hierarchical view of the file system.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<FileExplorer.Root
+  value={['src']}
+  onValueChange={(value) => console.log('Value changed:', value)}
+>
+  <FileExplorer.FolderItem content={
+    <div className="flex flex-col">
+      <FileExplorer.FileItem link="/src/index.tsx">index.tsx</FileExplorer.FileItem>
+      <FileExplorer.FileItem link="/src/file-explorer.tsx">FileExplorer.tsx</FileExplorer.FileItem>
+      <FileExplorer.FileItem link="/src/type.ts">type.ts</FileExplorer.FileItem>
+    </div>
+  } value="src" link="/src">
+    src
+  </FileExplorer.FolderItem>
+
+  <FileExplorer.FolderItem content={
+    <div className="flex flex-col">
+      <FileExplorer.FileItem link="/src/index.tsx">index.tsx</FileExplorer.FileItem>
+      <FileExplorer.FileItem link="/src/file-explorer.tsx">FileExplorer.tsx</FileExplorer.FileItem>
+      <FileExplorer.FileItem link="/src/type.ts">type.ts</FileExplorer.FileItem>
+    </div>
+  } value="assets" link="/assets">
+    assets
+  </FileExplorer.FolderItem>
+  <FileExplorer.FileItem link="/package.json">package.json</FileExplorer.FileItem>
+</FileExplorer.Root>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Root, FileItem, FolderItem } from '@harnessio/ui/components/file-explorer'
+
+return (
+  <Root value={['src']} onValueChange={(value) => console.log('Value changed:', value)}>
+    <FolderItem value="src" link="/src">
+      src
+      <FileItem link="/src/index.tsx">index.tsx</FileItem>
+    </FolderItem>
+    <FileItem link="/package.json">package.json</FileItem>
+  </Root>
+)
+```
+
+## Anatomy
+
+The File Explorer component can be used to display a hierarchical view of the file system and handle file or directory selection.
+
+```typescript jsx
+<Root value={['src']} onValueChange={(value) => console.log('Value changed:', value)}>
+  <FolderItem value="src" link="/src">
+    src
+    <FileItem link="/src/index.tsx">index.tsx</FileItem>
+  </FolderItem>
+  <FileItem link="/package.json">package.json</FileItem>
+</Root>
+```
+
+## API Reference
+
+### Root
+
+The `Root` component serves as the main container for displaying the file system hierarchy and handling file or directory selection.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the root",
+      required: true,
+    },
+    {
+      name: "onValueChange",
+      description: "Handler for value change",
+      required: true,
+      value: "(value: string | string[]) => void",
+    },
+    {
+      name: "value",
+      description: "The current value of the selected items",
+      required: true,
+      value: "string[]",
+    },
+  ]}
+/>
+
+### FolderItem
+
+The `FolderItem` component is used to display a folder in the file explorer.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the folder",
+      required: true,
+    },
+    {
+      name: "value",
+      description: "The value of the folder item",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "isActive",
+      description: "Whether the folder item is active",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+    {
+      name: "content",
+      description: "Additional content to render inside the folder",
+      required: false,
+      value: "ReactNode",
+    },
+    {
+      name: "chevronClassName",
+      description: "Additional class names for the chevron icon",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "link",
+      description: "The link to navigate to when the folder item is clicked",
+      required: true,
+      value: "string",
+    },
+  ]}
+/>
+
+### FileItem
+
+The `FileItem` component is used to display a file in the file explorer.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the file item",
+      required: true,
+    },
+    {
+      name: "isActive",
+      description: "Whether the file item is active",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+    {
+      name: "link",
+      description: "The link to navigate to when the file item is clicked",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/file-toolbar-actions.mdx b/apps/portal/src/content/docs/components/file-toolbar-actions.mdx
new file mode 100644
index 0000000000..f6ba245042
--- /dev/null
+++ b/apps/portal/src/content/docs/components/file-toolbar-actions.mdx
@@ -0,0 +1,67 @@
+---
+title: File Toolbar Actions
+description: File Toolbar Actions component documentation
+---
+
+The File Toolbar Actions component provides a set of actions for file management, including copying, editing, and downloading files.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<div className="inline-flex"> 
+    <FileToolbarActions 
+      onDownloadClick={() => console.log('Download clicked')} 
+      onEditClick={() => console.log('Edit clicked')} 
+      copyContent="Sample content to copy" 
+      showEdit={true} 
+    />
+  </div>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { FileToolbarActions } from '@harnessio/ui/components'
+
+return (
+  <FileToolbarActions
+    onDownloadClick={() => console.log('Download clicked')}
+    onEditClick={() => console.log('Edit clicked')}
+    copyContent="Sample content to copy"
+    showEdit={true}
+  />
+)
+```
+
+## API Reference
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "onDownloadClick",
+      description: "Handler for the download button click",
+      required: true,
+      value: "() => void",
+    },
+    {
+      name: "onEditClick",
+      description: "Handler for the edit button click",
+      required: true,
+      value: "() => void",
+    },
+    {
+      name: "copyContent",
+      description: "Content to be copied to the clipboard",
+      required: true,
+      value: "string",
+    },
+    {
+      name: "showEdit",
+      description: "Whether to show the edit button",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/image-carousel.mdx b/apps/portal/src/content/docs/components/image-carousel.mdx
new file mode 100644
index 0000000000..d6f6f25e73
--- /dev/null
+++ b/apps/portal/src/content/docs/components/image-carousel.mdx
@@ -0,0 +1,80 @@
+---
+title: Image Carousel
+description: Image Carousel component documentation
+---
+
+The Image Carousel component provides a UI element for displaying a series of images in a carousel format. It includes zoom in and zoom out functionalities.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`() => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return <>
+    <ImageCarousel 
+      isOpen={isOpen} 
+      setIsOpen={(value) => setIsOpen(value)} 
+      imgEvent={['https://picsum.photos/1240/800', 'https://picsum.photos/seed/picsum/1240/800']} 
+      title="Image Carousel" 
+      initialSlide={1} 
+    />
+
+    <Button onClick={() => setIsOpen(true)}>Open Image Carousel</Button>
+
+</>}`}
+/>
+
+## Usage
+
+```typescript jsx
+import { ImageCarousel } from '@harnessio/ui/components'
+
+return (
+  <ImageCarousel
+    isOpen={true}
+    setIsOpen={(value) => console.log('Set isOpen:', value)}
+    imgEvent={['/path/to/image1.jpg', '/path/to/image2.jpg']}
+    title="Image Carousel"
+    initialSlide={0}
+  />
+)
+```
+
+## API Reference
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "isOpen",
+      description: "Whether the carousel is open",
+      required: true,
+      value: "boolean",
+    },
+    {
+      name: "setIsOpen",
+      description: "Function to set the open state of the carousel",
+      required: true,
+      value: "(value: boolean) => void",
+    },
+    {
+      name: "imgEvent",
+      description: "Array of image URLs to display in the carousel",
+      required: true,
+      value: "string[]",
+    },
+    {
+      name: "title",
+      description: "Title of the carousel",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "initialSlide",
+      description: "Index of the initial slide to display",
+      required: false,
+      value: "number",
+      defaultValue: "0",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/input-otp.mdx b/apps/portal/src/content/docs/components/input-otp.mdx
new file mode 100644
index 0000000000..1eb33d289e
--- /dev/null
+++ b/apps/portal/src/content/docs/components/input-otp.mdx
@@ -0,0 +1,197 @@
+---
+title: Input OTP
+description: Input OTP component documentation
+---
+
+The Input OTP component provides a UI element for entering one-time passwords (OTPs). It includes slots for each digit and supports custom separators.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<InputOTP.Root maxLength={6}>
+  <InputOTP.Group>
+    <InputOTP.Slot index={0} />
+    <InputOTP.Slot index={1} />
+    <InputOTP.Slot index={2} />
+  </InputOTP.Group>
+  <InputOTP.Separator />
+  <InputOTP.Group>
+    <InputOTP.Slot index={3} />
+    <InputOTP.Slot index={4} />
+    <InputOTP.Slot index={5} />
+  </InputOTP.Group>
+</InputOTP.Root>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { InputOTP } from '@harnessio/ui/components'
+
+return (
+  <InputOTP.Root maxLength={6}>
+    <InputOTP.Group>
+      <InputOTP.Slot index={0} />
+      <InputOTP.Slot index={1} />
+      <InputOTP.Slot index={2} />
+    </InputOTP.Group>
+    <InputOTP.Separator />
+    <InputOTP.Group>
+      <InputOTP.Slot index={3} />
+      <InputOTP.Slot index={4} />
+      <InputOTP.Slot index={5} />
+    </InputOTP.Group>
+  </InputOTP.Root>
+)
+```
+
+## Anatomy
+
+The Input OTP component can be used to enter one-time passwords with custom separators.
+
+```typescript jsx
+<InputOTP.Root maxLength={6}>
+  <InputOTP.Group>
+    <InputOTP.Slot index={0} />
+    <InputOTP.Slot index={1} />
+    <InputOTP.Slot index={2} />
+    <InputOTP.Separator />
+    <InputOTP.Slot index={3} />
+    <InputOTP.Slot index={4} />
+    <InputOTP.Slot index={5} />
+  </InputOTP.Group>
+</InputOTP.Root>
+```
+
+## API Reference
+
+### InputOTP
+
+The `InputOTP` component serves as the main container for entering one-time passwords.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the root",
+      required: true,
+    },
+    {
+      name: "className",
+      description: "Additional class names for the root",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "containerClassName",
+      description: "Additional class names for the container",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "value",
+      description: "The current value of the OTP input",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "onChange",
+      description: "Handler for value change",
+      required: false,
+      value: "(newValue: string) => unknown",
+    },
+    {
+      name: "maxLength",
+      description: "Maximum length of the OTP input",
+      required: true,
+      value: "number",
+    },
+    {
+      name: "textAlign",
+      description: "Text alignment within the OTP input",
+      required: false,
+      value: "'left' | 'center' | 'right'",
+    },
+    {
+      name: "onComplete",
+      description: "Handler for when the OTP input is complete",
+      required: false,
+      value: "(...args: any[]) => unknown",
+    },
+    {
+      name: "pushPasswordManagerStrategy",
+      description: "Strategy for handling password managers",
+      required: false,
+      value: "'increase-width' | 'none'",
+    },
+    {
+      name: "pasteTransformer",
+      description: "Function to transform pasted content",
+      required: false,
+      value: "(pasted: string) => string",
+    },
+    {
+      name: "noScriptCSSFallback",
+      description: "Fallback CSS for no-script scenarios",
+      required: false,
+      value: "string | null",
+    },
+  ]}
+/>
+
+### InputOTPGroup
+
+The `InputOTPGroup` component is used to group the OTP slots.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the group",
+      required: true,
+    },
+    {
+      name: "className",
+      description: "Additional class names for the group",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### InputOTPSlot
+
+The `InputOTPSlot` component is used to display an individual OTP slot.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "index",
+      description: "The index of the OTP slot",
+      required: true,
+      value: "number",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the slot",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### InputOTPSeparator
+
+The `InputOTPSeparator` component is used to display a separator between OTP slots.
+
+<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/label-marker.mdx b/apps/portal/src/content/docs/components/label-marker.mdx
new file mode 100644
index 0000000000..b1b9e60379
--- /dev/null
+++ b/apps/portal/src/content/docs/components/label-marker.mdx
@@ -0,0 +1,84 @@
+---
+title: Label Marker
+description: Label Marker component documentation
+---
+
+The Label Marker component provides a UI element for displaying labels with optional values and color coding.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<div className="inline-flex flex-wrap gap-10">
+  <LabelMarker label="Bug" value="High Priority" color="red" inTable={false} />
+  <LabelMarker label="Feature" value="New" color="blue" inTable={false} />
+  <LabelMarker label="Improvement" value="Medium Priority" color="green" inTable={false} />
+  <LabelMarker label="Task" value="Low Priority" color="yellow" inTable={false} />
+  <LabelMarker label="Research" value="Optional" color="purple" inTable={false} />
+</div>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { LabelMarker } from '@harnessio/ui/components'
+
+return (
+  <div className="inline-flex flex-wrap gap-10">
+    <LabelMarker label="Bug" value="High Priority" color="red" inTable={false} />
+    <LabelMarker label="Feature" value="New" color="blue" inTable={false} />
+    <LabelMarker label="Improvement" value="Medium Priority" color="green" inTable={false} />
+    <LabelMarker label="Task" value="Low Priority" color="yellow" inTable={false} />
+    <LabelMarker label="Research" value="Optional" color="purple" inTable={false} />
+  </div>
+)
+```
+
+## Anatomy
+
+The Label Marker component can be used to display labels with optional values and color coding.
+
+```typescript jsx
+<LabelMarker
+  label="Bug"
+  value="High Priority"
+  color="red"
+  inTable={false}
+/>
+```
+
+## API Reference
+
+### LabelMarker
+
+The `LabelMarker` component serves as the main container for displaying labels with optional values and color coding.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "label",
+      description: "The label text to display",
+      required: true,
+      value: "string",
+    },
+    {
+      name: "value",
+      description: "Optional value to display next to the label",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "color",
+      description: "Color of the label",
+      required: true,
+      value: "ColorsEnum",
+    },
+    {
+      name: "inTable",
+      description: "Whether the label is displayed in a table",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/list-actions.mdx b/apps/portal/src/content/docs/components/list-actions.mdx
new file mode 100644
index 0000000000..fad55ab026
--- /dev/null
+++ b/apps/portal/src/content/docs/components/list-actions.mdx
@@ -0,0 +1,168 @@
+---
+title: List Actions
+description: List Actions component documentation
+---
+
+The List Actions component provides a UI element for displaying actions that can be performed on a list of items. It includes dropdown menus for selecting actions.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<ListActions.Root>
+  <ListActions.Left>
+    <ListActions.Dropdown 
+      title="Actions" 
+      items={[
+        { name: 'Edit', value: 'edit' },
+        { name: 'Delete', value: 'delete' }
+      ]}
+      onChange={(value) => console.log('Selected:', value)}
+    />
+  </ListActions.Left>
+  <ListActions.Right>
+    <button className="btn">Add Item</button>
+  </ListActions.Right>
+</ListActions.Root>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { ListActions } from '@harnessio/ui/components'
+
+return (
+  <ListActions.Root>
+    <ListActions.Left>
+      <ListActions.Dropdown
+        title="Actions"
+        items={[
+          { name: 'Edit', value: 'edit' },
+          { name: 'Delete', value: 'delete' }
+        ]}
+        onChange={(value) => console.log('Selected:', value)}
+      />
+    </ListActions.Left>
+    <ListActions.Right>
+      <button className="btn">Add Item</button>
+    </ListActions.Right>
+  </ListActions.Root>
+)
+```
+
+## Anatomy
+
+The List Actions component can be used to display actions that can be performed on a list of items.
+
+```typescript jsx
+<ListActions.Root>
+  <ListActions.Left>
+    <ListActions.Dropdown
+      title="Actions"
+      items={[
+        { name: 'Edit', value: 'edit' },
+        { name: 'Delete', value: 'delete' }
+      ]}
+      onChange={(value) => console.log('Selected:', value)}
+    />
+  </ListActions.Left>
+  <ListActions.Right>
+    <button className="btn">Add Item</button>
+  </ListActions.Right>
+</ListActions.Root>
+```
+
+## API Reference
+
+### ListActions
+
+The `ListActions` component serves as the main container for displaying actions that can be performed on a list of items.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the root",
+      required: true,
+    },
+    {
+      name: "className",
+      description: "Additional class names for the root",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### ListActions.Left
+
+The `ListActions.Left` component is used to group the actions on the left side.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the left group",
+      required: true,
+    },
+    {
+      name: "className",
+      description: "Additional class names for the left group",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### ListActions.Right
+
+The `ListActions.Right` component is used to group the actions on the right side.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the right group",
+      required: true,
+    },
+    {
+      name: "className",
+      description: "Additional class names for the right group",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### ListActions.Dropdown
+
+The `ListActions.Dropdown` component is used to display a dropdown menu for selecting actions.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "title",
+      description: "The title of the dropdown menu",
+      required: true,
+      value: "string",
+    },
+    {
+      name: "items",
+      description: "The items to display in the dropdown menu",
+      required: true,
+      value: "Array<{ name: string; value?: string }>",
+    },
+    {
+      name: "onChange",
+      description: "Handler for when an item is selected",
+      required: false,
+      value: "(value: string) => void",
+    },
+    {
+      name: "selectedValue",
+      description: "The currently selected value",
+      required: false,
+      value: "string | null",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/meter.mdx b/apps/portal/src/content/docs/components/meter.mdx
new file mode 100644
index 0000000000..fd19fa8dbc
--- /dev/null
+++ b/apps/portal/src/content/docs/components/meter.mdx
@@ -0,0 +1,72 @@
+---
+title: Meter
+description: Meter component documentation
+---
+
+The Meter component provides a UI element for displaying progress or performance metrics. It includes a visual representation of the metric.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<Meter 
+    data={[
+      { id: '1', state: MeterState.Success },
+      { id: '2', state: MeterState.Warning },
+      { id: '3', state: MeterState.Error },
+    ]}
+/>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Meter, MeterState } from '@harnessio/ui/components'
+
+return (
+  <Meter
+    data={[
+      { id: '1', state: MeterState.Success },
+      { id: '2', state: MeterState.Warning },
+      { id: '3', state: MeterState.Error },
+    ]}
+  />
+)
+```
+
+## Anatomy
+
+The Meter component can be used to display progress or performance metrics with a visual representation.
+
+```typescript jsx
+<Meter
+  data={[
+    { id: '1', state: MeterState.Success },
+    { id: '2', state: MeterState.Warning },
+    { id: '3', state: MeterState.Error },
+  ]}
+/>
+```
+
+## API Reference
+
+### Meter
+
+The `Meter` component serves as the main container for displaying progress or performance metrics.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "data",
+      description: "Array of data objects representing the meter states",
+      required: false,
+      value: "{ id?: string; state: MeterState }[]",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the meter",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/more-actions-tooltip.mdx b/apps/portal/src/content/docs/components/more-actions-tooltip.mdx
new file mode 100644
index 0000000000..dbc6e434bb
--- /dev/null
+++ b/apps/portal/src/content/docs/components/more-actions-tooltip.mdx
@@ -0,0 +1,91 @@
+---
+title: More Actions Tooltip
+description: More Actions Tooltip component documentation
+---
+
+The More Actions Tooltip component provides a UI element for displaying a button that, when clicked, shows a tooltip with a list of actions.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<MoreActionsTooltip 
+    actions={[
+      { title: 'Edit', onClick: () => console.log('Edit clicked') },
+      { title: 'Delete', onClick: () => console.log('Delete clicked'), isDanger: true }
+    ]}
+/>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { MoreActionsTooltip } from '@harnessio/ui/components'
+
+return (
+  <MoreActionsTooltip
+    actions={[
+      { title: 'Edit', onClick: () => console.log('Edit clicked') },
+      { title: 'Delete', onClick: () => console.log('Delete clicked'), isDanger: true }
+    ]}
+  />
+)
+```
+
+## API Reference
+
+### MoreActionsTooltip
+
+The `MoreActionsTooltip` component serves as the main container for displaying a button that shows a tooltip with a list of actions.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "actions",
+      description:
+        "Array of action objects representing the actions to display",
+      required: true,
+      value: "ActionData[]",
+    },
+    {
+      name: "isInTable",
+      description: "Whether the tooltip is displayed in a table",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+  ]}
+/>
+
+### ActionData
+
+The `ActionData` type represents an action to display in the tooltip.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "to",
+      description: "The link to navigate to when the action is clicked",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "title",
+      description: "The title of the action",
+      required: true,
+      value: "string",
+    },
+    {
+      name: "onClick",
+      description: "Handler for when the action is clicked",
+      required: false,
+      value: "() => void",
+    },
+    {
+      name: "isDanger",
+      description: "Whether the action is a dangerous action",
+      required: false,
+      value: "boolean",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/pagination.mdx b/apps/portal/src/content/docs/components/pagination.mdx
new file mode 100644
index 0000000000..2235c105c6
--- /dev/null
+++ b/apps/portal/src/content/docs/components/pagination.mdx
@@ -0,0 +1,258 @@
+---
+title: Pagination
+description: Pagination component documentation
+---
+
+The Pagination component provides a UI element for navigating through pages. It includes links for previous, next, and specific pages.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<Pagination>
+  <PaginationContent>
+    <PaginationItem>
+      <PaginationPrevious t={(key) => "Previous"} disabled={false} />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#" isActive={true}>1</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#">2</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#">3</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationEllipsis />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#">10</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationNext t={(key) => "Next"} disabled={false} />
+    </PaginationItem>
+  </PaginationContent>
+</Pagination>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext } from '@harnessio/ui/components'
+
+return (
+  <Pagination>
+    <PaginationContent>
+      <PaginationItem>
+        <PaginationPrevious t={(key) => key} disabled={false} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" isActive={true}>1</PaginationLink>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#">2</PaginationLink>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationNext t={(key) => key} disabled={false} />
+      </PaginationItem>
+    </PaginationContent>
+  </Pagination>
+)
+```
+
+## Anatomy
+
+The Pagination component can be used to navigate through pages with links for previous, next, and specific pages.
+
+```typescript jsx
+<Pagination>
+  <PaginationContent>
+    <PaginationItem>
+      <PaginationPrevious t={(key) => key} disabled={false} />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#" isActive={true}>1</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#">2</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationNext t={(key) => key} disabled={false} />
+    </PaginationItem>
+  </PaginationContent>
+</Pagination>
+```
+
+## API Reference
+
+### Pagination
+
+The `Pagination` component serves as the main container for pagination elements.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "className",
+      description: "Additional class names for the pagination container",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### PaginationContent
+
+The `PaginationContent` component is used to group pagination items.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "className",
+      description: "Additional class names for the pagination content",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### PaginationItem
+
+The `PaginationItem` component is used to display an individual pagination item.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "className",
+      description: "Additional class names for the pagination item",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### PaginationLink
+
+The `PaginationLink` component is used to display a link for a specific page.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "isActive",
+      description: "Whether the link is active",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "disabled",
+      description: "Whether the link is disabled",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "t",
+      description: "Translation function",
+      required: true,
+      value: "TFunction",
+    },
+    {
+      name: "size",
+      description: "Size of the link",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "isFullRounded",
+      description: "Whether the link is fully rounded",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the link",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### PaginationPrevious
+
+The `PaginationPrevious` component is used to display a link for the previous page.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "t",
+      description: "Translation function",
+      required: true,
+      value: "TFunction",
+    },
+    {
+      name: "disabled",
+      description: "Whether the link is disabled",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the link",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "href",
+      description: "The URL to navigate to",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### PaginationNext
+
+The `PaginationNext` component is used to display a link for the next page.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "t",
+      description: "Translation function",
+      required: true,
+      value: "TFunction",
+    },
+    {
+      name: "disabled",
+      description: "Whether the link is disabled",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the link",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "href",
+      description: "The URL to navigate to",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### PaginationEllipsis
+
+The `PaginationEllipsis` component is used to display an ellipsis indicating more pages.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "className",
+      description: "Additional class names for the ellipsis",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/progress.mdx b/apps/portal/src/content/docs/components/progress.mdx
new file mode 100644
index 0000000000..c5b59729cb
--- /dev/null
+++ b/apps/portal/src/content/docs/components/progress.mdx
@@ -0,0 +1,58 @@
+---
+title: Progress
+description: Progress component documentation
+---
+
+The Progress component provides a UI element for displaying progress or performance metrics. It includes a visual representation of the metric.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<Progress value={75} max={100} />`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Progress } from '@harnessio/ui/components'
+
+return (
+  <Progress value={75} max={100} />
+)
+```
+
+## API Reference
+
+### Progress
+
+The `Progress` component serves as the main container for displaying progress or performance metrics.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "value",
+      description: "The current value of the progress",
+      required: false,
+      value: "number",
+    },
+    {
+      name: "max",
+      description: "The maximum value of the progress",
+      required: false,
+      value: "number",
+    },
+    {
+      name: "getValueLabel",
+      description: "Function to get the value label",
+      required: false,
+      value: "(value: number, max: number) => string",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the progress",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/radio.mdx b/apps/portal/src/content/docs/components/radio.mdx
new file mode 100644
index 0000000000..520e0f93b6
--- /dev/null
+++ b/apps/portal/src/content/docs/components/radio.mdx
@@ -0,0 +1,168 @@
+---
+title: Radio
+description: Radio component documentation
+---
+
+The Radio component provides a UI element for selecting a single option from a list of options. It includes a radio button and a label.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<RadioGroup defaultValue="option1">
+    <div className="flex items-center gap-4">
+      <RadioButton value="option1" id="option1" />
+      <Label htmlFor="option1">Option 1</Label>
+    </div>
+    <div className="flex items-center gap-4">
+      <RadioButton value="option2" id="option2" />
+      <Label htmlFor="option2">Option 2</Label>
+    </div>
+</RadioGroup>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { RadioGroup, RadioButton, Label } from '@harnessio/ui/components'
+
+return (
+  <RadioGroup>
+    <div className="flex items-center gap-4">
+      <RadioButton value="option1" id="option1" />
+      <Label htmlFor="option1">Option 1</Label>
+    </div>
+    <div className="flex items-center gap-4">
+      <RadioButton value="option2" id="option2" />
+      <Label htmlFor="option2">Option 2</Label>
+    </div>
+  </RadioGroup>
+)
+```
+
+## Anatomy
+
+The Radio component can be used to select a single option from a list of options.
+
+```typescript jsx
+<RadioGroup>
+  <div>
+    <RadioButton value="option1" id="option1" />
+    <Label htmlFor="option1">Option 1</Label>
+  </div>
+  <div>
+    <RadioButton value="option2" id="option2" />
+    <Label htmlFor="option2">Option 2</Label>
+  </div>
+</RadioGroup>
+```
+
+## API Reference
+
+### RadioGroup
+
+The `RadioGroup` component serves as the main container for radio group items.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "name",
+      description: "The name of the radio group",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "required",
+      description: "Whether the radio group is required",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "disabled",
+      description: "Whether the radio group is disabled",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "orientation",
+      description: "The orientation of the radio group",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "loop",
+      description: "Whether the radio group should loop while navigating",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "defaultValue",
+      description: "The default value of the radio group",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "value",
+      description: "The current value of the radio group",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "onValueChange",
+      description: "Handler for value change",
+      required: false,
+      value: "(value: string) => void",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the radio group",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### RadioButton
+
+The `RadioButton` component is used to display an individual radio button.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "value",
+      description: "The value of the radio button",
+      required: true,
+      value: "string",
+    },
+    {
+      name: "checked",
+      description: "Whether the radio button is checked",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "required",
+      description: "Whether the radio button is required",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "disabled",
+      description: "Whether the radio button is disabled",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "onChange",
+      description: "Handler for when the radio button is checked/unchecked",
+      required: false,
+      value: "(value: boolean) => void",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the radio button",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/separator.mdx b/apps/portal/src/content/docs/components/separator.mdx
new file mode 100644
index 0000000000..0e40c1b848
--- /dev/null
+++ b/apps/portal/src/content/docs/components/separator.mdx
@@ -0,0 +1,83 @@
+---
+title: Separator
+description: Separator component documentation
+---
+
+The Separator component provides a UI element for creating a visual separation between content. It supports both horizontal and vertical orientations.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<div>
+      <div className="space-y-1">
+        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+        <p className="text-sm text-muted-foreground">
+          An open-source UI component library.
+        </p>
+      </div>
+
+      <Separator className="my-4" />
+
+      <div className="flex h-5 items-center space-x-4 text-sm">
+        <div>Blog</div>
+        <Separator orientation="vertical" />
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>`}
+
+/>
+
+## Usage
+
+```typescript jsx
+import { Separator } from '@harnessio/ui/components'
+
+return (
+  <div>
+    <div className="space-y-1">
+      <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+      <p className="text-sm text-muted-foreground">
+        An open-source UI component library.
+      </p>
+    </div>
+    <Separator className="my-4" />
+    <div className="flex h-5 items-center space-x-4 text-sm">
+      <div>Blog</div>
+      <Separator orientation="vertical" />
+      <div>Docs</div>
+      <Separator orientation="vertical" />
+      <div>Source</div>
+    </div>
+  </div>
+)
+```
+
+## API Reference
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "orientation",
+      description: "The orientation of the separator",
+      required: false,
+      value: "'horizontal' | 'vertical'",
+      defaultValue: "'horizontal'",
+    },
+    {
+      name: "decorative",
+      description: "Whether the separator is decorative",
+      required: false,
+      value: "boolean",
+      defaultValue: "true",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the separator",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/switch.mdx b/apps/portal/src/content/docs/components/switch.mdx
new file mode 100644
index 0000000000..aa8eaf2273
--- /dev/null
+++ b/apps/portal/src/content/docs/components/switch.mdx
@@ -0,0 +1,75 @@
+---
+title: Switch
+description: Switch component documentation
+---
+
+The Switch component provides a UI element for toggling between two states. It includes a thumb that moves when the switch is toggled.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample client:only code={`<Switch defaultChecked />`} />
+
+## Usage
+
+```typescript jsx
+import { Switch } from '@harnessio/ui/components'
+
+return (
+  <Switch defaultChecked />
+)
+```
+
+## Anatomy
+
+The Switch component can be used to toggle between two states.
+
+```typescript jsx
+<Switch defaultChecked />
+```
+
+## API Reference
+
+### Switch
+
+The `Switch` component serves as the main container for the switch element.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "checked",
+      description: "Whether the switch is checked",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "defaultChecked",
+      description: "Whether the switch is checked by default",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "required",
+      description: "Whether the switch is required",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "disabled",
+      description: "Whether the switch is disabled",
+      required: false,
+      value: "boolean",
+    },
+    {
+      name: "onCheckedChange",
+      description: "Handler for when the switch is toggled",
+      required: false,
+      value: "(checked: boolean) => void",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the switch",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/tabnav.mdx b/apps/portal/src/content/docs/components/tabnav.mdx
index 717afb9c5b..9bd407aa4b 100644
--- a/apps/portal/src/content/docs/components/tabnav.mdx
+++ b/apps/portal/src/content/docs/components/tabnav.mdx
@@ -1,9 +1,9 @@
 ---
 title: TabNav
-description: TabNav component
+description: TabNav component documentation
 ---
 
-The `TabNav` component is used to create a tabbed navigation interface. It consists of a root container and individual tab items that can be linked to different routes.
+The `TabNav` component provides a tabbed navigation interface. It consists of a root container and individual tab items that can be linked to different routes.
 
 import { DocsPage } from "@/components/docs-page";
 
@@ -21,8 +21,6 @@ import { DocsPage } from "@/components/docs-page";
 ```typescript jsx
 import { TabNav } from '@harnessio/ui/components'
 
-//...
-
 return (
   <TabNav.Root>
     <TabNav.Item to="/home">Home</TabNav.Item>
@@ -34,6 +32,8 @@ return (
 
 ## Anatomy
 
+The TabNav component can be used to create a tabbed navigation interface.
+
 ```typescript jsx
 <TabNav.Root>
   <TabNav.Item to="/home">Home</TabNav.Item>
@@ -44,35 +44,43 @@ return (
 
 ## API Reference
 
-### [`TabNav`](packages/ui/src/components/tabnav.tsx)
-
-The [`TabNav`](packages/ui/src/components/tabnav.tsx) component provides a tabbed navigation interface. It consists of the following subcomponents:
-
-### [`TabNav.Root`](packages/ui/src/components/tabnav.tsx)
-
-The root container for the tab navigation. It wraps the individual tab items.
-
-```typescript jsx
-<TabNav.Root>
-  {/* TabNav.Item elements as children */}
-</TabNav.Root>
-```
-
-### [`TabNav.Item`](packages/ui/src/components/tabnav.tsx)
-
-An individual tab item that links to a specific route. It accepts the same props as `NavLink` from `react-router-dom`:
+### TabNav.Root
 
-```typescript jsx
-<TabNav.Item
-  to="/path"              // The route path to link to
-  activeClassname="..."   // [OPTIONAL] Additional class names for the active state
->
-  {label}
-</TabNav.Item>
-```
+The `Root` component serves as the main container for the tab navigation.
 
-### Props
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The child components to render inside the root",
+      required: true,
+    },
+  ]}
+/>
 
-- `to`: A string representing the route path to link to.
-- `label`: A string or ReactNode representing the label to display for the tab.
-- `activeClassname`: An optional string for additional class names to apply when the tab is active.
+### TabNav.Item
+
+The `Item` component is used to display an individual tab item.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "to",
+      description: "The route path to link to",
+      required: true,
+      value: "string",
+    },
+    {
+      name: "children",
+      description: "The label to display for the tab",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "activeClassName",
+      description: "Additional class names for the active state",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/apps/portal/src/content/docs/components/toggle.mdx b/apps/portal/src/content/docs/components/toggle.mdx
new file mode 100644
index 0000000000..6065454e01
--- /dev/null
+++ b/apps/portal/src/content/docs/components/toggle.mdx
@@ -0,0 +1,56 @@
+---
+title: Toggle
+description: Toggle component documentation
+---
+
+The Toggle component provides a UI element for toggling between two states. It includes various styles and sizes.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<Toggle variant="default" size="default">Toggle</Toggle>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Toggle } from '@harnessio/ui/components'
+
+return (
+  <Toggle variant="default" size="default">Toggle</Toggle>
+)
+```
+
+## API Reference
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "variant",
+      description: "The variant of the toggle",
+      required: false,
+      value: "'default' | 'outline' | 'compact'",
+      defaultValue: "'default'",
+    },
+    {
+      name: "size",
+      description: "The size of the toggle",
+      required: false,
+      value: "'default' | 'sm' | 'lg' | 'xs' | 'icon'",
+      defaultValue: "'default'",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the toggle",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "children",
+      description: "The content to display inside the toggle",
+      required: true,
+      value: "ReactNode",
+    },
+  ]}
+/>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 5910e61efa..71f99f87c4 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -22,6 +22,7 @@ export * from './theme-selector'
 export * from './theme-selector/types'
 export * from './theme-selector/utils'
 export * from './no-data'
+export * from './branch-chooser'
 export * from './tabs'
 export * from './tabnav'
 export * from './command'