From 3c2e54a70667e5d60e579381e0f4d04aa281c75f Mon Sep 17 00:00:00 2001
From: tszhong0411 <me@honghong.me>
Date: Sun, 19 Jan 2025 01:47:14 +0800
Subject: [PATCH] feat(docs): add doc, api links to different components

---
 apps/docs/mdx.config.ts                       | 16 ++++++++++
 .../src/app/(main)/[...slug]/link-badges.tsx  | 29 +++++++++++++++++++
 apps/docs/src/app/(main)/[...slug]/page.tsx   |  7 ++++-
 apps/docs/src/app/ui/components/accordion.mdx |  3 ++
 .../src/app/ui/components/alert-dialog.mdx    |  3 ++
 .../src/app/ui/components/aspect-ratio.mdx    |  3 ++
 apps/docs/src/app/ui/components/avatar.mdx    |  3 ++
 apps/docs/src/app/ui/components/carousel.mdx  |  3 ++
 apps/docs/src/app/ui/components/checkbox.mdx  |  3 ++
 .../src/app/ui/components/collapsible.mdx     |  3 ++
 apps/docs/src/app/ui/components/combobox.mdx  |  3 ++
 apps/docs/src/app/ui/components/command.mdx   |  1 +
 .../src/app/ui/components/context-menu.mdx    |  3 ++
 .../docs/src/app/ui/components/data-table.mdx |  1 +
 apps/docs/src/app/ui/components/dialog.mdx    |  3 ++
 apps/docs/src/app/ui/components/drawer.mdx    |  1 +
 .../src/app/ui/components/dropdown-menu.mdx   |  3 ++
 apps/docs/src/app/ui/components/form.mdx      |  1 +
 .../docs/src/app/ui/components/hover-card.mdx |  3 ++
 apps/docs/src/app/ui/components/input.mdx     |  3 ++
 apps/docs/src/app/ui/components/menubar.mdx   |  3 ++
 .../src/app/ui/components/navigation-menu.mdx |  3 ++
 .../docs/src/app/ui/components/pagination.mdx |  3 ++
 apps/docs/src/app/ui/components/popover.mdx   |  3 ++
 apps/docs/src/app/ui/components/progress.mdx  |  3 ++
 .../src/app/ui/components/radio-group.mdx     |  3 ++
 apps/docs/src/app/ui/components/resizable.mdx |  3 ++
 .../src/app/ui/components/scroll-area.mdx     |  3 ++
 apps/docs/src/app/ui/components/select.mdx    |  3 ++
 apps/docs/src/app/ui/components/separator.mdx |  3 ++
 apps/docs/src/app/ui/components/sheet.mdx     |  3 ++
 apps/docs/src/app/ui/components/slider.mdx    |  3 ++
 apps/docs/src/app/ui/components/switch.mdx    |  3 ++
 apps/docs/src/app/ui/components/tabs.mdx      |  3 ++
 apps/docs/src/app/ui/components/toaster.mdx   |  3 ++
 .../src/app/ui/components/toggle-group.mdx    |  3 ++
 apps/docs/src/app/ui/components/toggle.mdx    |  3 ++
 apps/docs/src/app/ui/components/tooltip.mdx   |  3 ++
 38 files changed, 148 insertions(+), 1 deletion(-)
 create mode 100644 apps/docs/src/app/(main)/[...slug]/link-badges.tsx

diff --git a/apps/docs/mdx.config.ts b/apps/docs/mdx.config.ts
index dce53a69..9a97da96 100644
--- a/apps/docs/mdx.config.ts
+++ b/apps/docs/mdx.config.ts
@@ -13,6 +13,22 @@ const Doc = defineCollection({
       name: 'description',
       type: 'string',
       required: true
+    },
+    {
+      name: 'link',
+      type: 'nested',
+      of: {
+        fields: [
+          {
+            name: 'doc',
+            type: 'string'
+          },
+          {
+            name: 'api',
+            type: 'string'
+          }
+        ]
+      }
     }
   ],
   computedFields: [
diff --git a/apps/docs/src/app/(main)/[...slug]/link-badges.tsx b/apps/docs/src/app/(main)/[...slug]/link-badges.tsx
new file mode 100644
index 00000000..94276431
--- /dev/null
+++ b/apps/docs/src/app/(main)/[...slug]/link-badges.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import { badgeVariants, Link } from '@tszhong0411/ui'
+import { cn } from '@tszhong0411/utils'
+import { ExternalLinkIcon } from 'lucide-react'
+import type { Link as DocLink } from 'mdx/generated'
+
+const LinkBadges = (props: DocLink) => {
+  const { doc, api } = props
+
+  return (
+    <div className='flex items-center gap-2 pt-4'>
+      {doc ? (
+        <Link href={doc} className={cn(badgeVariants({ variant: 'secondary' }), 'gap-1')}>
+          Docs
+          <ExternalLinkIcon className='size-3' />
+        </Link>
+      ) : null}
+      {api ? (
+        <Link href={api} className={cn(badgeVariants({ variant: 'secondary' }), 'gap-1')}>
+          API Reference
+          <ExternalLinkIcon className='size-3' />
+        </Link>
+      ) : null}
+    </div>
+  )
+}
+
+export default LinkBadges
diff --git a/apps/docs/src/app/(main)/[...slug]/page.tsx b/apps/docs/src/app/(main)/[...slug]/page.tsx
index b97cb3a1..eb0d3168 100644
--- a/apps/docs/src/app/(main)/[...slug]/page.tsx
+++ b/apps/docs/src/app/(main)/[...slug]/page.tsx
@@ -4,6 +4,8 @@ import { notFound } from 'next/navigation'
 
 import Mdx from '@/components/mdx'
 
+import LinkBadges from './link-badges'
+
 type PageProps = {
   params: Promise<{
     slug?: string[]
@@ -68,13 +70,16 @@ const Page = async (props: PageProps) => {
     notFound()
   }
 
-  const { title, description, code } = doc
+  const { title, description, link, code } = doc
+
+  const hasLinks = link?.doc !== undefined || link?.api !== undefined
 
   return (
     <div>
       <div className='space-y-4'>
         <h1 className='relative text-3xl font-extrabold tracking-tight md:text-4xl'>{title}</h1>
         <p className='text-muted-foreground'>{description}</p>
+        {hasLinks ? <LinkBadges {...link} /> : null}
       </div>
       <Mdx className='mt-8' code={code} />
     </div>
diff --git a/apps/docs/src/app/ui/components/accordion.mdx b/apps/docs/src/app/ui/components/accordion.mdx
index 751634b6..42d9ea4b 100644
--- a/apps/docs/src/app/ui/components/accordion.mdx
+++ b/apps/docs/src/app/ui/components/accordion.mdx
@@ -1,6 +1,9 @@
 ---
 title: Accordion
 description: A vertically stacked set of interactive headings that each reveal a section of content.
+link:
+  doc: https://www.radix-ui.com/primitives/docs/components/accordion
+  api: https://www.radix-ui.com/primitives/docs/components/accordion#api-reference
 ---
 
 <ComponentPreview name='accordion/accordion' />
diff --git a/apps/docs/src/app/ui/components/alert-dialog.mdx b/apps/docs/src/app/ui/components/alert-dialog.mdx
index b64bfae4..3f354d34 100644
--- a/apps/docs/src/app/ui/components/alert-dialog.mdx
+++ b/apps/docs/src/app/ui/components/alert-dialog.mdx
@@ -1,6 +1,9 @@
 ---
 title: Alert Dialog
 description: A modal dialog that interrupts the user with important content and expects a response.
+link:
+  doc: https://www.radix-ui.com/primitives/docs/components/alert-dialog
+  api: https://www.radix-ui.com/primitives/docs/components/alert-dialog#api-reference
 ---
 
 <ComponentPreview name='alert-dialog/alert-dialog' />
diff --git a/apps/docs/src/app/ui/components/aspect-ratio.mdx b/apps/docs/src/app/ui/components/aspect-ratio.mdx
index 9ba4ac67..6c47b86c 100644
--- a/apps/docs/src/app/ui/components/aspect-ratio.mdx
+++ b/apps/docs/src/app/ui/components/aspect-ratio.mdx
@@ -1,6 +1,9 @@
 ---
 title: Aspect Ratio
 description: Displays content within a desired ratio.
+link:
+  doc: https://www.radix-ui.com/primitives/docs/components/aspect-ratio
+  api: https://www.radix-ui.com/primitives/docs/components/aspect-ratio#api-reference
 ---
 
 <ComponentPreview name='aspect-ratio/aspect-ratio' />
diff --git a/apps/docs/src/app/ui/components/avatar.mdx b/apps/docs/src/app/ui/components/avatar.mdx
index 96dd2708..85996445 100644
--- a/apps/docs/src/app/ui/components/avatar.mdx
+++ b/apps/docs/src/app/ui/components/avatar.mdx
@@ -1,6 +1,9 @@
 ---
 title: Avatar
 description: An image element with a fallback for representing the user.
+link:
+  doc: https://www.radix-ui.com/primitives/docs/components/avatar
+  api: https://www.radix-ui.com/primitives/docs/components/avatar#api-reference
 ---
 
 <ComponentPreview name='avatar/avatar' />
diff --git a/apps/docs/src/app/ui/components/carousel.mdx b/apps/docs/src/app/ui/components/carousel.mdx
index 37a09b41..2c80ecc9 100644
--- a/apps/docs/src/app/ui/components/carousel.mdx
+++ b/apps/docs/src/app/ui/components/carousel.mdx
@@ -1,6 +1,9 @@
 ---
 title: Carousel
 description: A carousel with motion and swipe built using Embla.
+link:
+  doc: https://www.embla-carousel.com/get-started/react
+  api: https://www.embla-carousel.com/api
 ---
 
 <ComponentPreview name='carousel/carousel' />
diff --git a/apps/docs/src/app/ui/components/checkbox.mdx b/apps/docs/src/app/ui/components/checkbox.mdx
index 71a80f39..0804d417 100644
--- a/apps/docs/src/app/ui/components/checkbox.mdx
+++ b/apps/docs/src/app/ui/components/checkbox.mdx
@@ -1,6 +1,9 @@
 ---
 title: Checkbox
 description: A control that allows the user to toggle between checked and not checked.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/checkbox
+  api: https://www.radix-ui.com/docs/primitives/components/checkbox#api-reference
 ---
 
 <ComponentPreview name='checkbox/checkbox' />
diff --git a/apps/docs/src/app/ui/components/collapsible.mdx b/apps/docs/src/app/ui/components/collapsible.mdx
index 9403870b..7e55e5fe 100644
--- a/apps/docs/src/app/ui/components/collapsible.mdx
+++ b/apps/docs/src/app/ui/components/collapsible.mdx
@@ -1,6 +1,9 @@
 ---
 title: Collapsible
 description: An interactive component which expands/collapses a panel.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/collapsible
+  api: https://www.radix-ui.com/docs/primitives/components/collapsible#api-reference
 ---
 
 <ComponentPreview name='collapsible/collapsible' />
diff --git a/apps/docs/src/app/ui/components/combobox.mdx b/apps/docs/src/app/ui/components/combobox.mdx
index bb6c04db..53627872 100644
--- a/apps/docs/src/app/ui/components/combobox.mdx
+++ b/apps/docs/src/app/ui/components/combobox.mdx
@@ -1,6 +1,9 @@
 ---
 title: Combobox
 description: Autocomplete input and command palette with a list of suggestions.
+link:
+  doc: https://ark-ui.com/react/docs/components/combobox
+  api: https://ark-ui.com/react/docs/components/combobox#api-reference
 ---
 
 <ComponentPreview name='combobox/combobox' />
diff --git a/apps/docs/src/app/ui/components/command.mdx b/apps/docs/src/app/ui/components/command.mdx
index e67f6a0b..3000179a 100644
--- a/apps/docs/src/app/ui/components/command.mdx
+++ b/apps/docs/src/app/ui/components/command.mdx
@@ -1,6 +1,7 @@
 ---
 title: Command
 description: Provides a flexible and styled interface for displaying a list of commands or options.
+doc: https://cmdk.paco.me
 ---
 
 <ComponentPreview name='command/command' />
diff --git a/apps/docs/src/app/ui/components/context-menu.mdx b/apps/docs/src/app/ui/components/context-menu.mdx
index adb3aa0e..0b71f103 100644
--- a/apps/docs/src/app/ui/components/context-menu.mdx
+++ b/apps/docs/src/app/ui/components/context-menu.mdx
@@ -1,6 +1,9 @@
 ---
 title: Context Menu
 description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/context-menu
+  api: https://www.radix-ui.com/docs/primitives/components/context-menu#api-reference
 ---
 
 <ComponentPreview name='context-menu/context-menu' />
diff --git a/apps/docs/src/app/ui/components/data-table.mdx b/apps/docs/src/app/ui/components/data-table.mdx
index 6324d907..38976f55 100644
--- a/apps/docs/src/app/ui/components/data-table.mdx
+++ b/apps/docs/src/app/ui/components/data-table.mdx
@@ -1,6 +1,7 @@
 ---
 title: Data Table
 description: Powerful table and datagrids built using TanStack Table.
+doc: https://tanstack.com/table/v8/docs/introduction
 ---
 
 <ComponentPreview name='data-table/data-table' />
diff --git a/apps/docs/src/app/ui/components/dialog.mdx b/apps/docs/src/app/ui/components/dialog.mdx
index bfa8108f..70952e41 100644
--- a/apps/docs/src/app/ui/components/dialog.mdx
+++ b/apps/docs/src/app/ui/components/dialog.mdx
@@ -1,6 +1,9 @@
 ---
 title: Dialog
 description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/dialog
+  api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference
 ---
 
 <ComponentPreview name='dialog/dialog' />
diff --git a/apps/docs/src/app/ui/components/drawer.mdx b/apps/docs/src/app/ui/components/drawer.mdx
index bd6858af..58ff73af 100644
--- a/apps/docs/src/app/ui/components/drawer.mdx
+++ b/apps/docs/src/app/ui/components/drawer.mdx
@@ -1,6 +1,7 @@
 ---
 title: Drawer
 description: A drawer component for React.
+doc: https://github.com/emilkowalski/vaul
 ---
 
 <ComponentPreview name='drawer/drawer' />
diff --git a/apps/docs/src/app/ui/components/dropdown-menu.mdx b/apps/docs/src/app/ui/components/dropdown-menu.mdx
index b0b3bbe8..c7163a2d 100644
--- a/apps/docs/src/app/ui/components/dropdown-menu.mdx
+++ b/apps/docs/src/app/ui/components/dropdown-menu.mdx
@@ -1,6 +1,9 @@
 ---
 title: Dropdown Menu
 description: Displays a menu to the user—such as a set of actions or functions—triggered by a button.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/dropdown-menu
+  api: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#api-reference
 ---
 
 <ComponentPreview name='dropdown-menu/dropdown-menu' />
diff --git a/apps/docs/src/app/ui/components/form.mdx b/apps/docs/src/app/ui/components/form.mdx
index a5ac0b88..03454c24 100644
--- a/apps/docs/src/app/ui/components/form.mdx
+++ b/apps/docs/src/app/ui/components/form.mdx
@@ -1,6 +1,7 @@
 ---
 title: Form
 description: Building forms with React Hook Form and Zod.
+doc: https://react-hook-form.com
 ---
 
 <ComponentPreview name='form/form' />
diff --git a/apps/docs/src/app/ui/components/hover-card.mdx b/apps/docs/src/app/ui/components/hover-card.mdx
index aa004703..3312ab87 100644
--- a/apps/docs/src/app/ui/components/hover-card.mdx
+++ b/apps/docs/src/app/ui/components/hover-card.mdx
@@ -1,6 +1,9 @@
 ---
 title: Hover Card
 description: For sighted users to preview content available behind a link.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/hover-card
+  api: https://www.radix-ui.com/docs/primitives/components/hover-card#api-reference
 ---
 
 <ComponentPreview name='hover-card/hover-card' />
diff --git a/apps/docs/src/app/ui/components/input.mdx b/apps/docs/src/app/ui/components/input.mdx
index 235ae0d7..4261c371 100644
--- a/apps/docs/src/app/ui/components/input.mdx
+++ b/apps/docs/src/app/ui/components/input.mdx
@@ -1,6 +1,9 @@
 ---
 title: Input
 description: A field where users can enter text or data.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/label
+  api: https://www.radix-ui.com/docs/primitives/components/label#api-reference
 ---
 
 <ComponentPreview name='input/input' />
diff --git a/apps/docs/src/app/ui/components/menubar.mdx b/apps/docs/src/app/ui/components/menubar.mdx
index 72747bfb..5cc4be74 100644
--- a/apps/docs/src/app/ui/components/menubar.mdx
+++ b/apps/docs/src/app/ui/components/menubar.mdx
@@ -1,6 +1,9 @@
 ---
 title: Menubar
 description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/menubar
+  api: https://www.radix-ui.com/docs/primitives/components/menubar#api-reference
 ---
 
 <ComponentPreview name='menubar/menubar' />
diff --git a/apps/docs/src/app/ui/components/navigation-menu.mdx b/apps/docs/src/app/ui/components/navigation-menu.mdx
index 30171d7f..3c4d49c3 100644
--- a/apps/docs/src/app/ui/components/navigation-menu.mdx
+++ b/apps/docs/src/app/ui/components/navigation-menu.mdx
@@ -1,6 +1,9 @@
 ---
 title: Navigation Menu
 description: A collection of links for navigating websites.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/navigation-menu
+  api: https://www.radix-ui.com/docs/primitives/components/navigation-menu#api-reference
 ---
 
 <ComponentPreview name='navigation-menu/navigation-menu' />
diff --git a/apps/docs/src/app/ui/components/pagination.mdx b/apps/docs/src/app/ui/components/pagination.mdx
index 880f69ce..cc7fc45f 100644
--- a/apps/docs/src/app/ui/components/pagination.mdx
+++ b/apps/docs/src/app/ui/components/pagination.mdx
@@ -1,6 +1,9 @@
 ---
 title: Pagination
 description: Pagination with page navigation, next and previous links.
+link:
+  doc: https://ark-ui.com/react/docs/components/pagination
+  api: https://ark-ui.com/react/docs/components/pagination#api-reference
 ---
 
 <ComponentPreview name='pagination/pagination' />
diff --git a/apps/docs/src/app/ui/components/popover.mdx b/apps/docs/src/app/ui/components/popover.mdx
index c407a6e4..73a78ee4 100644
--- a/apps/docs/src/app/ui/components/popover.mdx
+++ b/apps/docs/src/app/ui/components/popover.mdx
@@ -1,6 +1,9 @@
 ---
 title: Popover
 description: Displays rich content in a portal, triggered by a button.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/popover
+  api: https://www.radix-ui.com/docs/primitives/components/popover#api-reference
 ---
 
 <ComponentPreview name='popover/popover' />
diff --git a/apps/docs/src/app/ui/components/progress.mdx b/apps/docs/src/app/ui/components/progress.mdx
index 73006eb5..20b58aa9 100644
--- a/apps/docs/src/app/ui/components/progress.mdx
+++ b/apps/docs/src/app/ui/components/progress.mdx
@@ -1,6 +1,9 @@
 ---
 title: Progress
 description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+link:
+  doc: https://ark-ui.com/react/docs/components/progress-linear
+  api: https://ark-ui.com/react/docs/components/progress-linear#api-reference
 ---
 
 <ComponentPreview name='progress/progress' />
diff --git a/apps/docs/src/app/ui/components/radio-group.mdx b/apps/docs/src/app/ui/components/radio-group.mdx
index a8958ab8..251c240e 100644
--- a/apps/docs/src/app/ui/components/radio-group.mdx
+++ b/apps/docs/src/app/ui/components/radio-group.mdx
@@ -1,6 +1,9 @@
 ---
 title: Radio Group
 description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/radio-group
+  api: https://www.radix-ui.com/docs/primitives/components/radio-group#api-reference
 ---
 
 <ComponentPreview name='radio-group/radio-group' />
diff --git a/apps/docs/src/app/ui/components/resizable.mdx b/apps/docs/src/app/ui/components/resizable.mdx
index 3467636f..7e0790d1 100644
--- a/apps/docs/src/app/ui/components/resizable.mdx
+++ b/apps/docs/src/app/ui/components/resizable.mdx
@@ -1,6 +1,9 @@
 ---
 title: Resizable
 description: Accessible resizable panel groups and layouts with keyboard support.
+link:
+  doc: https://github.com/bvaughn/react-resizable-panels
+  api: https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels
 ---
 
 <ComponentPreview name='resizable/resizable' />
diff --git a/apps/docs/src/app/ui/components/scroll-area.mdx b/apps/docs/src/app/ui/components/scroll-area.mdx
index ae3cdccf..5d1abeef 100644
--- a/apps/docs/src/app/ui/components/scroll-area.mdx
+++ b/apps/docs/src/app/ui/components/scroll-area.mdx
@@ -1,6 +1,9 @@
 ---
 title: Scroll Area
 description: Augments native scroll functionality for custom, cross-browser styling.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/scroll-area
+  api: https://www.radix-ui.com/docs/primitives/components/scroll-area#api-reference
 ---
 
 <ComponentPreview name='scroll-area/scroll-area' />
diff --git a/apps/docs/src/app/ui/components/select.mdx b/apps/docs/src/app/ui/components/select.mdx
index 2e6e98ae..f319d024 100644
--- a/apps/docs/src/app/ui/components/select.mdx
+++ b/apps/docs/src/app/ui/components/select.mdx
@@ -1,6 +1,9 @@
 ---
 title: Select
 description: Displays a list of options for the user to pick from—triggered by a button.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/select
+  api: https://www.radix-ui.com/docs/primitives/components/select#api-reference
 ---
 
 <ComponentPreview name='select/select' />
diff --git a/apps/docs/src/app/ui/components/separator.mdx b/apps/docs/src/app/ui/components/separator.mdx
index 202e5e6f..fb0faec0 100644
--- a/apps/docs/src/app/ui/components/separator.mdx
+++ b/apps/docs/src/app/ui/components/separator.mdx
@@ -1,6 +1,9 @@
 ---
 title: Separator
 description: Visually or semantically separates content.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/separator
+  api: https://www.radix-ui.com/docs/primitives/components/separator#api-reference
 ---
 
 <ComponentPreview name='separator/separator' />
diff --git a/apps/docs/src/app/ui/components/sheet.mdx b/apps/docs/src/app/ui/components/sheet.mdx
index 040d49c3..c394ded5 100644
--- a/apps/docs/src/app/ui/components/sheet.mdx
+++ b/apps/docs/src/app/ui/components/sheet.mdx
@@ -1,6 +1,9 @@
 ---
 title: Sheet
 description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/dialog
+  api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference
 ---
 
 <ComponentPreview name='sheet/sheet' />
diff --git a/apps/docs/src/app/ui/components/slider.mdx b/apps/docs/src/app/ui/components/slider.mdx
index 8680f539..92a4b3b1 100644
--- a/apps/docs/src/app/ui/components/slider.mdx
+++ b/apps/docs/src/app/ui/components/slider.mdx
@@ -1,6 +1,9 @@
 ---
 title: Slider
 description: An input where the user selects a value from within a given range.
+link:
+  doc: https://ark-ui.com/react/docs/components/slider
+  api: https://ark-ui.com/react/docs/components/slider#api-reference
 ---
 
 <ComponentPreview name='slider/slider' />
diff --git a/apps/docs/src/app/ui/components/switch.mdx b/apps/docs/src/app/ui/components/switch.mdx
index 5b7ba414..e25fe3b5 100644
--- a/apps/docs/src/app/ui/components/switch.mdx
+++ b/apps/docs/src/app/ui/components/switch.mdx
@@ -1,6 +1,9 @@
 ---
 title: Switch
 description: A control that allows the user to toggle between checked and not checked.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/switch
+  api: https://www.radix-ui.com/docs/primitives/components/switch#api-reference
 ---
 
 <ComponentPreview name='switch/switch' />
diff --git a/apps/docs/src/app/ui/components/tabs.mdx b/apps/docs/src/app/ui/components/tabs.mdx
index de7e5439..e4fedd7f 100644
--- a/apps/docs/src/app/ui/components/tabs.mdx
+++ b/apps/docs/src/app/ui/components/tabs.mdx
@@ -1,6 +1,9 @@
 ---
 title: Tabs
 description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/tabs
+  api: https://www.radix-ui.com/docs/primitives/components/tabs#api-reference
 ---
 
 <ComponentPreview name='tabs/tabs' />
diff --git a/apps/docs/src/app/ui/components/toaster.mdx b/apps/docs/src/app/ui/components/toaster.mdx
index 053e6554..267ba5bf 100644
--- a/apps/docs/src/app/ui/components/toaster.mdx
+++ b/apps/docs/src/app/ui/components/toaster.mdx
@@ -1,6 +1,9 @@
 ---
 title: Toaster
 description: A notification component for displaying brief, non-intrusive messages to the user.
+link:
+  doc: https://sonner.emilkowal.ski/getting-started
+  api: https://sonner.emilkowal.ski/toast
 ---
 
 <ComponentPreview name='toaster/toaster' />
diff --git a/apps/docs/src/app/ui/components/toggle-group.mdx b/apps/docs/src/app/ui/components/toggle-group.mdx
index fba2f481..305161f2 100644
--- a/apps/docs/src/app/ui/components/toggle-group.mdx
+++ b/apps/docs/src/app/ui/components/toggle-group.mdx
@@ -1,6 +1,9 @@
 ---
 title: Toggle Group
 description: A set of two-state buttons that can be toggled on or off.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/toggle-group
+  api: https://www.radix-ui.com/docs/primitives/components/toggle-group#api-reference
 ---
 
 <ComponentPreview name='toggle-group/toggle-group' />
diff --git a/apps/docs/src/app/ui/components/toggle.mdx b/apps/docs/src/app/ui/components/toggle.mdx
index a9770328..63b07f31 100644
--- a/apps/docs/src/app/ui/components/toggle.mdx
+++ b/apps/docs/src/app/ui/components/toggle.mdx
@@ -1,6 +1,9 @@
 ---
 title: Toggle
 description: A two-state button that can be either on or off.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/toggle
+  api: https://www.radix-ui.com/docs/primitives/components/toggle#api-reference
 ---
 
 <ComponentPreview name='toggle/toggle' />
diff --git a/apps/docs/src/app/ui/components/tooltip.mdx b/apps/docs/src/app/ui/components/tooltip.mdx
index 7c05146e..62982a5d 100644
--- a/apps/docs/src/app/ui/components/tooltip.mdx
+++ b/apps/docs/src/app/ui/components/tooltip.mdx
@@ -1,6 +1,9 @@
 ---
 title: Tooltip
 description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
+link:
+  doc: https://www.radix-ui.com/docs/primitives/components/tooltip
+  api: https://www.radix-ui.com/docs/primitives/components/tooltip#api-reference
 ---
 
 <ComponentPreview name='tooltip/tooltip' />