From 8bff09b88bf9363571e8a4e450d3137e4f9ca888 Mon Sep 17 00:00:00 2001
From: Luminessa Starlight <git@samsch.org>
Date: Wed, 29 Oct 2025 09:11:23 -0400
Subject: [PATCH] Docs: Add storybook links to components (#113102)

* for every storybook component, a storybook link

* typo fix

* text improvements
---
 .../grafana-ui/src/components/Alert/Alert.tsx |  5 +++
 .../AutoSaveField/AutoSaveField.tsx           |  6 ++++
 .../grafana-ui/src/components/Badge/Badge.tsx |  5 +++
 .../src/components/BarGauge/BarGauge.tsx      |  3 ++
 .../src/components/BigValue/BigValue.tsx      |  5 +++
 .../src/components/Button/Button.tsx          |  3 ++
 .../ButtonCascader/ButtonCascader.tsx         |  3 ++
 .../CallToActionCard/CallToActionCard.tsx     |  6 +++-
 .../grafana-ui/src/components/Card/Card.tsx   |  1 +
 .../src/components/Carousel/Carousel.tsx      |  5 +++
 .../src/components/Cascader/Cascader.tsx      |  5 +++
 .../ClickOutsideWrapper.tsx                   |  5 +++
 .../ClipboardButton/ClipboardButton.tsx       |  5 +++
 .../Collapse/CollapsableSection.tsx           |  5 +++
 .../src/components/Collapse/Collapse.tsx      |  5 +++
 .../components/ColorPicker/ColorPicker.tsx    |  3 ++
 .../ColorPicker/ColorPickerInput.tsx          |  3 ++
 .../ColorPicker/SeriesColorPickerPopover.tsx  |  3 ++
 .../src/components/Combobox/Combobox.tsx      |  4 ++-
 .../src/components/Combobox/MultiCombobox.tsx |  5 +++
 .../ConfirmButton/ConfirmButton.tsx           |  5 +++
 .../components/ConfirmModal/ConfirmModal.tsx  |  5 +++
 .../components/ContextMenu/ContextMenu.tsx    |  5 +++
 .../DataSourceHttpSettings.mdx                |  2 ++
 .../DataSourceHttpSettings.tsx                |  2 ++
 .../DateTimePickers/DatePicker/DatePicker.tsx |  7 +++-
 .../DatePickerWithInput.tsx                   |  7 +++-
 .../DateTimePicker/DateTimePicker.tsx         |  5 +++
 .../RelativeTimeRangePicker.tsx               |  1 +
 .../DateTimePickers/TimeRangeInput.tsx        |  5 +++
 .../DateTimePickers/TimeRangePicker.tsx       |  3 ++
 .../DateTimePickers/TimeZonePicker.tsx        |  3 ++
 .../DateTimePickers/WeekStartPicker.tsx       |  3 ++
 .../src/components/Divider/Divider.tsx        |  3 ++
 .../src/components/Drawer/Drawer.tsx          |  5 +++
 .../src/components/Dropdown/ButtonSelect.tsx  |  2 ++
 .../src/components/Dropdown/Dropdown.tsx      |  5 +++
 .../EmptySearchResult/EmptySearchResult.tsx   |  6 +++-
 .../src/components/EmptyState/EmptyState.tsx  |  5 +++
 .../ErrorBoundary/ErrorBoundary.tsx           |  5 +++
 .../components/FeatureBadge/FeatureBadge.tsx  |  5 +++
 .../components/FileDropzone/FileDropzone.tsx  |  5 +++
 .../components/FileDropzone/FileListItem.tsx  |  5 +++
 .../src/components/FileUpload/FileUpload.tsx  |  5 +++
 .../src/components/FilterPill/FilterPill.tsx  |  5 +++
 .../src/components/FormField/FormField.tsx    |  2 ++
 .../FormattedValueDisplay.tsx                 |  5 +++
 .../src/components/Forms/Checkbox.tsx         |  3 ++
 .../grafana-ui/src/components/Forms/Field.tsx |  5 +++
 .../src/components/Forms/FieldArray.tsx       |  2 ++
 .../src/components/Forms/FieldSet.tsx         |  5 +++
 .../Forms/FieldValidationMessage.tsx          |  5 +++
 .../grafana-ui/src/components/Forms/Form.tsx  |  2 ++
 .../src/components/Forms/InlineField.mdx      |  2 +-
 .../src/components/Forms/InlineField.tsx      |  5 +++
 .../src/components/Forms/InlineFieldRow.tsx   |  5 +++
 .../src/components/Forms/InlineLabel.mdx      |  2 +-
 .../src/components/Forms/InlineLabel.tsx      |  5 +++
 .../grafana-ui/src/components/Forms/Label.tsx |  5 +++
 .../src/components/Forms/Legend.tsx           |  5 +++
 .../RadioButtonGroup/RadioButtonGroup.tsx     |  5 +++
 .../Forms/RadioButtonList/RadioButtonList.tsx |  5 +++
 .../grafana-ui/src/components/Icon/Icon.tsx   |  5 +++
 .../src/components/IconButton/IconButton.tsx  |  5 +++
 .../src/components/InfoBox/InfoBox.tsx        |  6 +++-
 .../components/InfoTooltip/InfoTooltip.tsx    |  6 +++-
 .../components/InlineToast/InlineToast.tsx    |  5 +++
 .../src/components/Input/AutoSizeInput.tsx    |  5 +++
 .../grafana-ui/src/components/Input/Input.tsx |  5 +++
 .../InteractiveTable/InteractiveTable.tsx     |  8 ++++-
 .../src/components/Layout/Box/Box.tsx         |  5 +++
 .../src/components/Layout/Grid/Grid.tsx       |  5 +++
 .../src/components/Layout/Layout.tsx          |  2 ++
 .../src/components/Layout/Space.mdx           |  2 +-
 .../src/components/Layout/Space.tsx           |  5 +++
 .../src/components/Layout/Stack/Stack.tsx     |  3 +-
 .../src/components/Link/TextLink.tsx          |  5 +++
 .../grafana-ui/src/components/List/List.tsx   |  6 +++-
 .../src/components/LoadingBar/LoadingBar.tsx  |  5 +++
 .../LoadingPlaceholder/LoadingPlaceholder.tsx |  3 ++
 .../grafana-ui/src/components/Menu/Menu.tsx   |  3 ++
 .../grafana-ui/src/components/Modal/Modal.tsx |  3 ++
 .../src/components/Monaco/CodeEditor.tsx      |  5 +++
 .../src/components/PageLayout/PageToolbar.tsx |  6 +++-
 .../src/components/Pagination/Pagination.tsx  |  5 +++
 .../components/PanelChrome/PanelChrome.tsx    |  4 +++
 .../PanelContainer/PanelContainer.tsx         |  6 +++-
 .../PluginSignatureBadge.tsx                  |  2 ++
 .../src/components/QueryField/QueryField.tsx  | 16 +++++----
 .../components/RadialGauge/RadialGauge.tsx    |  3 ++
 .../RefreshPicker/RefreshPicker.tsx           |  5 +++
 .../RenderUserContentAsHTML.tsx               |  5 +++
 .../ScrollContainer/ScrollContainer.tsx       |  5 +++
 .../SecretFormField/SecretFormField.tsx       |  2 ++
 .../components/SecretInput/SecretInput.tsx    |  5 +++
 .../SecretTextArea/SecretTextArea.tsx         |  2 ++
 .../src/components/Segment/Segment.tsx        |  3 ++
 .../src/components/Segment/SegmentAsync.tsx   |  3 ++
 .../src/components/Segment/SegmentInput.tsx   |  3 ++
 .../src/components/Select/Select.tsx          | 34 ++++++++++++++++---
 .../src/components/Slider/RangeSlider.tsx     |  2 ++
 .../src/components/Slider/Slider.tsx          |  2 ++
 .../src/components/Spinner/Spinner.tsx        |  4 +++
 .../src/components/Splitter/useSplitter.ts    |  5 +++
 .../src/components/Switch/Switch.tsx          |  5 +++
 .../src/components/Table/TableRT/Table.tsx    |  5 +++
 .../TableInputCSV/TableInputCSV.tsx           |  6 +++-
 .../grafana-ui/src/components/Tabs/Tab.tsx    |  3 ++
 .../src/components/Tabs/TabContent.tsx        |  3 ++
 .../src/components/Tabs/TabsBar.tsx           |  5 +++
 .../grafana-ui/src/components/Tags/Tag.tsx    |  5 +++
 .../src/components/Tags/TagList.tsx           |  5 +++
 .../src/components/TagsInput/TagsInput.tsx    |  5 +++
 .../grafana-ui/src/components/Text/Text.tsx   |  5 +++
 .../src/components/TextArea/TextArea.tsx      |  5 +++
 .../src/components/Toggletip/Toggletip.tsx    |  5 +++
 .../ToolbarButton/ToolbarButton.tsx           |  5 +++
 .../ToolbarButton/ToolbarButtonRow.tsx        |  5 +++
 .../src/components/Tooltip/Tooltip.tsx        |  3 ++
 .../src/components/UnitPicker/UnitPicker.tsx  |  3 ++
 .../components/UsersIndicator/UserIcon.tsx    |  5 +++
 .../UsersIndicator/UsersIndicator.tsx         |  6 ++++
 .../components/ValuePicker/ValuePicker.tsx    |  5 +++
 .../src/components/VizLayout/VizLayout.tsx    |  2 ++
 .../src/components/VizLegend/VizLegend.tsx    |  2 ++
 125 files changed, 548 insertions(+), 26 deletions(-)

diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx
index 56b81d14351..8b3b55a41cc 100644
--- a/packages/grafana-ui/src/components/Alert/Alert.tsx
+++ b/packages/grafana-ui/src/components/Alert/Alert.tsx
@@ -26,6 +26,11 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
   topSpacing?: number;
 }
 
+/**
+ * An alert displays an important message in a way that attracts the user's attention without interrupting the user's task.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-alert--docs
+ */
 export const Alert = React.forwardRef<HTMLDivElement, Props>(
   (
     {
diff --git a/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx b/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx
index f53670b73a6..f78262d0548 100644
--- a/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx
+++ b/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx
@@ -21,6 +21,12 @@ export interface Props<T = string> extends Omit<FieldProps, 'children'> {
   /** Input that will save its value on change  */
   children: (onChange: (newValue: T) => void) => React.ReactElement;
 }
+
+/**
+ * Used for form inputs that should save its content automatically.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-autosavefield--docs
+ */
 export function AutoSaveField<T = string>(props: Props<T>) {
   const {
     invalid,
diff --git a/packages/grafana-ui/src/components/Badge/Badge.tsx b/packages/grafana-ui/src/components/Badge/Badge.tsx
index 201957ab534..53bcabc646d 100644
--- a/packages/grafana-ui/src/components/Badge/Badge.tsx
+++ b/packages/grafana-ui/src/components/Badge/Badge.tsx
@@ -47,6 +47,11 @@ const BadgeSkeleton: SkeletonComponent = ({ rootProps }) => {
   return <Skeleton width={60} height={22} containerClassName={styles.container} {...rootProps} />;
 };
 
+/**
+ * The badge component adds meta information to other content, for example about release status or new elements. You can add any `Icon` component or use the badge without an icon.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-badge--docs
+ */
 export const Badge = attachSkeleton(BadgeComponent, BadgeSkeleton);
 
 const getSkeletonStyles = () => ({
diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
index 3392f059662..639bf41ca13 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
@@ -56,6 +56,9 @@ export interface Props extends Themeable2 {
   isOverflow: boolean;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-bargauge--docs
+ */
 export class BarGauge extends PureComponent<Props> {
   static defaultProps: Partial<Props> = {
     lcdCellWidth: 12,
diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.tsx
index 08bacf3e2af..870d350ba95 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValue.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValue.tsx
@@ -82,6 +82,11 @@ export interface Props extends Themeable2 {
   disableWideLayout?: boolean;
 }
 
+/**
+ * Component for showing a value based on a [DisplayValue](https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/types/displayValue.ts#L5).
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-bigvalue--docs
+ */
 export const BigValue = memo<Props>((props) => {
   const { onClick, className, hasLinks, theme, justifyMode = BigValueJustifyMode.Auto } = props;
 
diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx
index c596904a39b..9e1d1c4a1a9 100644
--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -51,6 +51,9 @@ type CommonProps = BasePropsWithChildren | NoChildrenTooltip | NoChildrenAriaLab
 
 export type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-button--docs
+ */
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
index 43aaff2bee2..e52b368f759 100644
--- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
+++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
@@ -28,6 +28,9 @@ export interface ButtonCascaderProps {
   hideDownIcon?: boolean;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-buttoncascader--docs
+ */
 export const ButtonCascader = (props: ButtonCascaderProps) => {
   const { onChange, className, loadData, icon, buttonProps, hideDownIcon, variant, disabled, ...rest } = props;
   const styles = useStyles2(getStyles);
diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
index ca3348c2b54..cd859f77256 100644
--- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
+++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
@@ -11,7 +11,11 @@ export interface CallToActionCardProps {
   className?: string;
 }
 
-/** @deprecated Use <EmptyState variant="call-to-action" /> instead */
+/**
+ * @deprecated Use `<EmptyState variant="call-to-action" />` instead.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-deprecated-calltoactioncard--docs
+ */
 export const CallToActionCard = ({ message, callToActionElement, footer, className }: CallToActionCardProps) => {
   const css = useStyles2(getStyles);
 
diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index 80194b56136..f1514f6f60e 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -51,6 +51,7 @@ const CardContext = React.createContext<{
 /**
  * Generic card component
  *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-card--docs
  * @public
  */
 export const Card: CardInterface = ({
diff --git a/packages/grafana-ui/src/components/Carousel/Carousel.tsx b/packages/grafana-ui/src/components/Carousel/Carousel.tsx
index f3cc7892293..57f4ed59005 100644
--- a/packages/grafana-ui/src/components/Carousel/Carousel.tsx
+++ b/packages/grafana-ui/src/components/Carousel/Carousel.tsx
@@ -22,6 +22,11 @@ export interface CarouselProps {
   images: CarouselImage[];
 }
 
+/**
+ * The Carousel component displays a grid of image thumbnails that can be clicked to view full-sized images in a modal with navigation controls. It provides an elegant way to present collections of images or screenshots with fullscreen preview capabilities.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-carousel--docs
+ */
 export const Carousel: React.FC<CarouselProps> = ({ images }) => {
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [imageErrors, setImageErrors] = useState<Record<string, boolean>>({});
diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
index ed8c1af953d..8f80b3b6093 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
@@ -321,4 +321,9 @@ class UnthemedCascader extends PureComponent<CascaderProps, CascaderState> {
   }
 }
 
+/**
+ * The cascader component is a Select with a cascading flyout menu. When you have lots of options in your select, they can be hard to navigate from a regular dropdown list. In that case you can use the cascader to organize your options into groups hierarchically. Just like in the Select component, the cascader input doubles as a search field to quickly jump to a selection without navigating the list.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-cascader--docs
+ */
 export const Cascader = withTheme2(UnthemedCascader);
diff --git a/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx b/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
index 4a3b9e9b88a..1e9ab3e6de1 100644
--- a/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
+++ b/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
@@ -13,6 +13,11 @@ export interface Props {
   children: React.ReactNode;
 }
 
+/**
+ * A wrapper component that detects clicks outside of the elements by attaching event listener to `window` or `document` objects. Useful for components that require an action being triggered when a click outside has occurred, for example closing an overlay or popup.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/utilities-clickoutsidewrapper--docs
+ */
 export function ClickOutsideWrapper({
   includeButtonPress = true,
   parent = window,
diff --git a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx
index a42871dcde0..f1f00cdb25e 100644
--- a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx
+++ b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx
@@ -21,6 +21,11 @@ export type Props = ButtonProps & {
 
 const SHOW_SUCCESS_DURATION = 2 * 1000;
 
+/**
+ * A control for allowing the user to copy text to their clipboard. Uses native APIs on modern browsers, falling back to the old `document.execCommand('copy')` API on other browsers. The text to be copied should be provided via `getText` prop.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-clipboardbutton--docs
+ */
 export function ClipboardButton({
   onClipboardCopy,
   onClipboardError,
diff --git a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
index 12c00333dfd..936d9837813 100644
--- a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
+++ b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
@@ -25,6 +25,11 @@ export interface Props {
   unmountContentWhenClosed?: boolean;
 }
 
+/**
+ * A simple container for enabling collapsing/expanding of content.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-collapsablesection--docs
+ */
 export const CollapsableSection = ({
   label,
   isOpen,
diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
index 57aec7a3ed4..d0f8757e1ca 100644
--- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx
+++ b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
@@ -128,6 +128,11 @@ export const ControlledCollapse = ({ isOpen, onToggle, ...otherProps }: React.Pr
   );
 };
 
+/**
+ * A content area, which can be horizontally collapsed and expanded. Can be used to hide extra information on the page.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-collapse--docs
+ */
 export const Collapse = ({
   isOpen,
   label,
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
index 819d60746db..f44b3f00fa4 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
@@ -84,6 +84,9 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
   };
 };
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-colorpicker--docs
+ */
 export const ColorPicker = withTheme2(colorPickerFactory(ColorPickerPopover, 'ColorPicker'));
 export const SeriesColorPicker = withTheme2(colorPickerFactory(SeriesColorPickerPopover, 'SeriesColorPicker'));
 
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx
index 27f807051a8..5dd4e2acb25 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx
@@ -19,6 +19,9 @@ export interface ColorPickerInputProps extends Omit<InputProps, 'value' | 'onCha
   returnColorAs?: 'rgb' | 'hex';
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-colorpickerinput--docs
+ */
 export const ColorPickerInput = forwardRef<HTMLInputElement, ColorPickerInputProps>(
   ({ value = '', onChange, returnColorAs = 'rgb', ...inputProps }, ref) => {
     const [currentColor, setColor] = useState(value);
diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
index 2c0350d9329..6e38fa3148e 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
@@ -12,6 +12,9 @@ export interface SeriesColorPickerPopoverProps extends ColorPickerProps, Popover
   onToggleAxis?: () => void;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-seriescolorpicker--docs
+ */
 export const SeriesColorPickerPopover = (props: SeriesColorPickerPopoverProps) => {
   const { yaxis, onToggleAxis, color, ...colorPickerProps } = props;
   const yAxisLabel = t('grafana-ui.series-color-picker-popover.y-axis-usage', 'Use right y-axis');
diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.tsx
index 9c4de9c2d8b..a4664c62441 100644
--- a/packages/grafana-ui/src/components/Combobox/Combobox.tsx
+++ b/packages/grafana-ui/src/components/Combobox/Combobox.tsx
@@ -119,8 +119,10 @@ const noop = () => {};
 export const VIRTUAL_OVERSCAN_ITEMS = 4;
 
 /**
- * A performant Select replacement.
+ * A performant and accessible combobox component that supports both synchronous and asynchronous options loading. It provides type-ahead filtering, keyboard navigation, and virtual scrolling for handling large datasets efficiently.
+ * Replaces the Select component, and has better performance.
  *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-combobox--docs
  * @alpha
  */
 export const Combobox = <T extends string | number>(props: ComboboxProps<T>) => {
diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
index 989bf3d0e2e..3a1e2856a68 100644
--- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
+++ b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
@@ -35,6 +35,11 @@ interface MultiComboboxBaseProps<T extends string | number>
 
 export type MultiComboboxProps<T extends string | number> = MultiComboboxBaseProps<T> & AutoSizeConditionals;
 
+/**
+ * The behavior of the MultiCombobox is similar to that of the Combobox, but it allows you to select multiple options. For all non-multi behaviors, see the Combobox documentation.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-multicombobox--docs
+ */
 export const MultiCombobox = <T extends string | number>(props: MultiComboboxProps<T>) => {
   const {
     placeholder,
diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
index 5ddfd473700..0a5e3db8688 100644
--- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
+++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
@@ -31,6 +31,11 @@ export interface Props {
   onCancel?(): void;
 }
 
+/**
+ * The ConfirmButton is an interactive component that adds a double-confirm option to a clickable action. When clicked, the action is replaced by an inline confirmation with the option to cancel. In Grafana, this is used, for example, for editing values in settings tables.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-confirmbutton--docs
+ */
 export const ConfirmButton = ({
   children,
   className,
diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
index ffcffa96f58..b57f9d8557b 100644
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
@@ -48,6 +48,11 @@ export interface ConfirmModalProps {
   disabled?: boolean;
 }
 
+/**
+ * Used to request user for action confirmation, e.g. deleting items. Triggers provided `onConfirm` callback.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-confirmmodal--docs
+ */
 export const ConfirmModal = ({
   isOpen,
   title,
diff --git a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
index 86802d58743..5a96497cdef 100644
--- a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
+++ b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
@@ -22,6 +22,11 @@ export interface ContextMenuProps {
   renderHeader?: () => React.ReactNode;
 }
 
+/**
+ * A menu displaying additional options when it's not possible to show them at all times due to a space constraint.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-contextmenu--docs
+ */
 export const ContextMenu = React.memo(
   ({ x, y, onClose, focusOnOpen = true, renderMenuItems, renderHeader }: ContextMenuProps) => {
     const menuRef = useRef<HTMLDivElement>(null);
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.mdx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.mdx
index 08671fcb108..f241ced1384 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.mdx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.mdx
@@ -5,6 +5,8 @@ import { DataSourceHttpSettings } from './DataSourceHttpSettings';
 
 # DataSourceHttpSettings
 
+> **Deprecated!** Use components from `@grafana/plugin-ui` instead, according to the [migration guide](https://github.com/grafana/plugin-ui/blob/main/src/components/ConfigEditor/migrating-from-datasource-http-settings.md)
+
 Component for displaying the configuration options for a data source plugin.
 
 ### When to use
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
index e57f7747494..65f6ff77259 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
@@ -72,6 +72,8 @@ const LABEL_WIDTH = 26;
 
 /**
  * @deprecated Use components from `@grafana/plugin-ui` instead, according to the [migration guide](https://github.com/grafana/plugin-ui/blob/main/src/components/ConfigEditor/migrating-from-datasource-http-settings.md).
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-datasourcehttpsettings--docs
  */
 export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
   const {
diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx
index 28c88547023..a69a6d9fb18 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx
@@ -19,7 +19,12 @@ export interface DatePickerProps {
   maxDate?: Date;
 }
 
-/** @public */
+/**
+ * A component with a calendar view for selecting a date.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-datepicker--docs
+ * @public
+ * */
 export const DatePicker = memo<DatePickerProps>((props) => {
   const styles = useStyles2(getStyles);
   const { isOpen, onClose } = props;
diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
index 4d2d6533a31..0103a1d21a5 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
@@ -27,7 +27,12 @@ export interface DatePickerWithInputProps extends Omit<InputProps, 'value' | 'on
   placeholder?: string;
 }
 
-/** @public */
+/**
+ * An input with a calendar view, used to select a date.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-datepickerwithinput--docs
+ * @public
+ */
 export const DatePickerWithInput = forwardRef<HTMLInputElement, DatePickerWithInputProps>(
   ({ value, minDate, maxDate, onChange, closeOnSelect, placeholder = 'Date', ...rest }, ref) => {
     const [open, setOpen] = useState(false);
diff --git a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
index 1f4eb4da47d..a7024681d42 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
@@ -60,6 +60,11 @@ export interface Props {
   timeZone?: TimeZone;
 }
 
+/**
+ * A component for selecting a date *and* time.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-datetimepicker--docs
+ */
 export const DateTimePicker = ({
   date,
   maxDate,
diff --git a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
index 74a19dd6efd..e07345bf111 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
@@ -41,6 +41,7 @@ type InputState = {
 };
 
 /**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-relativetimerangepicker--docs
  * @internal
  */
 export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
index 67d3af9496a..90666dad8b3 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
@@ -36,6 +36,11 @@ export interface TimeRangeInputProps {
 
 const noop = () => {};
 
+/**
+ * A variant of TimeRangePicker for use in forms.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-timerangeinput--docs
+ */
 export const TimeRangeInput = ({
   value,
   onChange,
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
index 3157b6ca837..b26a6e4c36d 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
@@ -73,6 +73,9 @@ export interface State {
   isOpen: boolean;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-timerangepicker--docs
+ */
 export function TimeRangePicker(props: TimeRangePickerProps) {
   const [isOpen, setOpen] = useState(false);
 
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
index f41279cb983..464dcc9fb24 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
@@ -31,6 +31,9 @@ export interface Props {
   openMenuOnFocus?: boolean;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-timezonepicker--docs
+ */
 export const TimeZonePicker = (props: Props) => {
   const {
     onChange,
diff --git a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
index 0207dcb67a8..2fe37d06d3f 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
@@ -39,6 +39,9 @@ export function getWeekStart(override?: string): WeekStart {
   return 'monday';
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-weekstartpicker--docs
+ */
 export const WeekStartPicker = (props: Props) => {
   const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props;
   const weekStarts: ComboboxOption[] = useMemo(
diff --git a/packages/grafana-ui/src/components/Divider/Divider.tsx b/packages/grafana-ui/src/components/Divider/Divider.tsx
index b9f5f580183..721ea8b58dc 100644
--- a/packages/grafana-ui/src/components/Divider/Divider.tsx
+++ b/packages/grafana-ui/src/components/Divider/Divider.tsx
@@ -9,6 +9,9 @@ interface DividerProps {
   spacing?: ThemeSpacingTokens;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-divider--docs
+ */
 export const Divider = ({ direction = 'horizontal', spacing = 2 }: DividerProps) => {
   const styles = useStyles2(getStyles, spacing);
 
diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index b81a3784b72..b7ee0252bfc 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -62,6 +62,11 @@ const drawerSizes = {
   lg: { width: '75vw', minWidth: 744 },
 };
 
+/**
+ * Drawer is a slide in overlay that can be used to display additional information without hiding the main page content. It can be anchored to the left or right edge of the screen.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-drawer--docs
+ */
 export function Drawer({
   children,
   onClose,
diff --git a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
index a2e23e78575..99f4db3b56b 100644
--- a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
@@ -25,6 +25,8 @@ export interface Props<T> extends HTMLAttributes<HTMLButtonElement> {
 
 /**
  * @deprecated Use Combobox or Dropdown instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-buttonselect--docs
  */
 const ButtonSelectComponent = <T,>(props: Props<T>) => {
   const { className, options, value, onChange, narrow, variant, root, ...restProps } = props;
diff --git a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
index 77cdcc92519..b098665db7b 100644
--- a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
@@ -31,6 +31,11 @@ export interface Props {
   onVisibleChange?: (state: boolean) => void;
 }
 
+/**
+ * Hook up a menu or other overlay to any trigger.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-dropdown--docs
+ */
 export const Dropdown = React.memo(({ children, overlay, placement, offset, root, onVisibleChange }: Props) => {
   const [show, setShow] = useState(false);
   const transitionRef = useRef(null);
diff --git a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
index 2ddafbf865b..72f353b4ed7 100644
--- a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
+++ b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
@@ -8,7 +8,11 @@ export interface Props {
   children: JSX.Element | string;
 }
 
-/** @deprecated Use <EmptyState variant="not-found" /> instead */
+/**
+ * @deprecated Use `<EmptyState variant="not-found" />` instead.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-deprecated-emptysearchresult--docs
+ */
 const EmptySearchResult = ({ children }: Props) => {
   const styles = useStyles2(getStyles);
   return <div className={styles.container}>{children}</div>;
diff --git a/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx b/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
index a7ee3774666..7e9c73fb0f1 100644
--- a/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
+++ b/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
@@ -38,6 +38,11 @@ interface Props {
   role?: AriaRole;
 }
 
+/**
+ * The EmptyState component consists of a message and optionally an image, button, and additional information.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-emptystate--docs
+ */
 export const EmptyState = ({
   button,
   children,
diff --git a/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx b/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx
index 63044d76d2f..dd49f34b985 100644
--- a/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -33,6 +33,11 @@ interface State {
   errorInfo: ErrorInfo | null;
 }
 
+/**
+ * A React component that catches errors in child components. Useful for logging or displaying a fallback UI in case of errors. More information about error boundaries is available at [React documentation website](https://reactjs.org/docs/error-boundaries.html).
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/utilities-errorboundary--docs
+ */
 export class ErrorBoundary extends PureComponent<Props, State> {
   readonly state: State = {
     error: null,
diff --git a/packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.tsx b/packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.tsx
index 6a67913e453..f1af47396f3 100644
--- a/packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.tsx
@@ -8,6 +8,11 @@ export interface FeatureBadgeProps {
   tooltip?: string;
 }
 
+/**
+ * A component for displaying information about different release stages of features, in accordance with the guidelines provided at [Grafana's Release Life Cycle](https://grafana.com/docs/release-life-cycle).
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-featurebadge--docs
+ */
 export const FeatureBadge = ({ featureState, tooltip }: FeatureBadgeProps) => {
   const display = getPanelStateBadgeDisplayModel(featureState);
   return <Badge text={display.text} color={display.color} icon={display.icon} tooltip={tooltip} />;
diff --git a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx
index 120c7e08a09..ad1fa0b8b49 100644
--- a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx
+++ b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx
@@ -63,6 +63,11 @@ export interface DropzoneFile {
   retryUpload?: () => void;
 }
 
+/**
+ * A dropzone component to use for file uploads.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-filedropzone--docs
+ */
 export function FileDropzone({
   options,
   children,
diff --git a/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx b/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx
index b13066621c6..e54d66b34b5 100644
--- a/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx
+++ b/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx
@@ -17,6 +17,11 @@ export interface FileListItemProps {
   removeFile?: (file: DropzoneFile) => void;
 }
 
+/**
+ * A FileListItem component used for the FileDropzone component to show uploaded files.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-filelistitem--docs
+ */
 export function FileListItem({ file: customFile, removeFile }: FileListItemProps) {
   const styles = useStyles2(getStyles);
   const { file, progress, error, abortUpload, retryUpload } = customFile;
diff --git a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
index 528d4a7e193..5ad7662ff56 100644
--- a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
+++ b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
@@ -27,6 +27,11 @@ export interface Props {
   showFileName?: boolean;
 }
 
+/**
+ * A button-styled input that triggers file upload popup. Button text and accepted file extensions can be customized via `label` and `accepted` props respectively.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-fileupload--docs
+ */
 export const FileUpload = ({
   onFileUpload,
   className,
diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
index 48140e3940d..6fdbaa2e76d 100644
--- a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
+++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
@@ -15,6 +15,11 @@ export interface FilterPillProps {
   icon?: IconName;
 }
 
+/**
+ * A component used for quick toggling on/off filters. Mostly used in inline form components and transformation/query editors.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-filterpill--docs
+ */
 export const FilterPill = ({ label, selected, onClick, icon = 'check' }: FilterPillProps) => {
   const styles = useStyles2(getStyles);
   const clearButton = useStyles2(clearButtonStyles);
diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx
index 4d9bca9ded8..c4663db842e 100644
--- a/packages/grafana-ui/src/components/FormField/FormField.tsx
+++ b/packages/grafana-ui/src/components/FormField/FormField.tsx
@@ -24,6 +24,8 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
  *
  * For inline fields, use {@link InlineField}, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-inlinefield--basic See Storybook}.
  * @deprecated Please use the {@link Field} component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-field--simple See Storybook}.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-deprecated-formfield--docs
  */
 export const FormField = ({
   label,
diff --git a/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.tsx b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.tsx
index 6c9d6dd5334..f2e0527939a 100644
--- a/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.tsx
+++ b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.tsx
@@ -18,6 +18,11 @@ function fontSizeReductionFactor(fontSize: number) {
   return 0.6;
 }
 
+/**
+ * Used to display a value, which also supports prefix and suffix.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-formattedvaluedisplay--docs
+ */
 export const FormattedValueDisplay = ({ value, className, style, ...htmlProps }: Props) => {
   const hasPrefix = (value.prefix ?? '').length > 0;
   const hasSuffix = (value.suffix ?? '').length > 0;
diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
index 173f821e287..c20b0892e21 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
@@ -24,6 +24,9 @@ export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, 'value'
   invalid?: boolean;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-checkbox--docs
+ */
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (
     { label, description, value, htmlValue, onChange, disabled, className, indeterminate, invalid, ...inputProps },
diff --git a/packages/grafana-ui/src/components/Forms/Field.tsx b/packages/grafana-ui/src/components/Forms/Field.tsx
index 1c80a2caf81..6c5884e04c9 100644
--- a/packages/grafana-ui/src/components/Forms/Field.tsx
+++ b/packages/grafana-ui/src/components/Forms/Field.tsx
@@ -43,6 +43,11 @@ export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   noMargin?: boolean;
 }
 
+/**
+ * Field is the basic component for rendering form elements together with labels and description.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-field--docs
+ */
 export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
   (
     {
diff --git a/packages/grafana-ui/src/components/Forms/FieldArray.tsx b/packages/grafana-ui/src/components/Forms/FieldArray.tsx
index fc0cda3b7ff..5c21767ab84 100644
--- a/packages/grafana-ui/src/components/Forms/FieldArray.tsx
+++ b/packages/grafana-ui/src/components/Forms/FieldArray.tsx
@@ -9,6 +9,8 @@ export interface FieldArrayProps extends UseFieldArrayProps {
 
 /**
  * @deprecated use the `useFieldArray` hook from react-hook-form instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-fieldarray--docs
  */
 export const FieldArray: FC<FieldArrayProps> = ({ name, control, children, ...rest }) => {
   const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
diff --git a/packages/grafana-ui/src/components/Forms/FieldSet.tsx b/packages/grafana-ui/src/components/Forms/FieldSet.tsx
index 421ba3a5ad3..4f42cb96f8e 100644
--- a/packages/grafana-ui/src/components/Forms/FieldSet.tsx
+++ b/packages/grafana-ui/src/components/Forms/FieldSet.tsx
@@ -14,6 +14,11 @@ export interface Props extends Omit<HTMLProps<HTMLFieldSetElement>, 'label'> {
   label?: React.ReactNode;
 }
 
+/**
+ * Component used to group form elements inside a form, equivalent to HTML's [fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) tag. Accepts optional label, which, if provided, is used as a text for the set's legend.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-fieldset--docs
+ */
 export const FieldSet = ({ label, children, className, ...rest }: Props) => {
   const styles = useStyles2(getStyles);
 
diff --git a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
index 78f1aeab79e..3a3fd5b078b 100644
--- a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
+++ b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
@@ -12,6 +12,11 @@ export interface FieldValidationMessageProps {
   horizontal?: boolean;
 }
 
+/**
+ * Component for displaying a validation error message under an element.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-fieldvalidationmessage--docs
+ */
 export const FieldValidationMessage = ({
   children,
   horizontal,
diff --git a/packages/grafana-ui/src/components/Forms/Form.tsx b/packages/grafana-ui/src/components/Forms/Form.tsx
index 2eb45c69a0e..c251780be96 100644
--- a/packages/grafana-ui/src/components/Forms/Form.tsx
+++ b/packages/grafana-ui/src/components/Forms/Form.tsx
@@ -18,6 +18,8 @@ interface FormProps<T extends FieldValues> extends Omit<HTMLProps<HTMLFormElemen
 
 /**
  * @deprecated use the `useForm` hook from react-hook-form instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-form--docs
  */
 export function Form<T extends FieldValues>({
   defaultValues,
diff --git a/packages/grafana-ui/src/components/Forms/InlineField.mdx b/packages/grafana-ui/src/components/Forms/InlineField.mdx
index 1b13b8d3811..b08be513645 100644
--- a/packages/grafana-ui/src/components/Forms/InlineField.mdx
+++ b/packages/grafana-ui/src/components/Forms/InlineField.mdx
@@ -3,7 +3,7 @@ import { InlineField } from './InlineField';
 
 # InlineField
 
-A basic component for rendering form elements, like `Input`, `Select`, `Checkbox`, etc, inline together with `InlineLabel`. If the child element has `id` specified, the label's `htmlFor` attribute, pointing to the id, will be added.
+A basic component for rendering form elements, like `Input`, `Checkbox`, `Combobox`, etc, inline together with `InlineLabel`. If the child element has `id` specified, the label's `htmlFor` attribute, pointing to the id, will be added.
 
 The width of the `InlineLabel` can be modified via `labelWidth` prop, which is a multiple of 8px. For example, an `InlineField` with `labelWidth={20}` will have a label 160px wide.
 
diff --git a/packages/grafana-ui/src/components/Forms/InlineField.tsx b/packages/grafana-ui/src/components/Forms/InlineField.tsx
index c63d87b585b..a2e7bd4f9e7 100644
--- a/packages/grafana-ui/src/components/Forms/InlineField.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineField.tsx
@@ -29,6 +29,11 @@ export interface Props extends Omit<FieldProps, 'css' | 'horizontal' | 'descript
   interactive?: boolean;
 }
 
+/**
+ * A basic component for rendering form elements, like `Input`, `Checkbox`, `Combobox`, etc, inline together with `InlineLabel`. If the child element has `id` specified, the label's `htmlFor` attribute, pointing to the id, will be added.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-inlinefield--docs
+ */
 export const InlineField = ({
   children,
   label,
diff --git a/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx b/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx
index f75ec503007..b73b538956f 100644
--- a/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx
@@ -9,6 +9,11 @@ export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'css'> {
   children: ReactNode | ReactNode[];
 }
 
+/**
+ * Used to align multiple InlineField components in one row. The row will wrap if the width of the children exceeds its own. Equivalent to the div with gf-form-inline class name. Multiple InlineFieldRows vertically stack on each other.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-inlinefieldrow--docs
+ */
 export const InlineFieldRow = ({ children, className, ...htmlProps }: Props) => {
   const styles = useStyles2(getStyles);
   return (
diff --git a/packages/grafana-ui/src/components/Forms/InlineLabel.mdx b/packages/grafana-ui/src/components/Forms/InlineLabel.mdx
index 9a451f07922..be5b5766a9d 100644
--- a/packages/grafana-ui/src/components/Forms/InlineLabel.mdx
+++ b/packages/grafana-ui/src/components/Forms/InlineLabel.mdx
@@ -3,7 +3,7 @@ import { InlineLabel } from './InlineLabel';
 
 # InlineLabel
 
-A horizontal variant of `Label`, primarily used in query editors. Can be combined with form components that expect a label, eg. `Input`, `Select`, `Checkbox`.
+A horizontal variant of `Label`, primarily used in query editors. Can be combined with form components that expect a label, eg. `Input`, `Checkbox`, `Combobox`.
 If you need to add additional explanation, use the tooltip prop, which will render an info icon with tooltip inside the label.
 For query editor readability, the label text should be as short as possible (4 words or fewer).
 
diff --git a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx
index fef27352c7f..63b7b7ccb46 100644
--- a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx
@@ -25,6 +25,11 @@ export interface Props extends Omit<LabelProps, 'css' | 'description' | 'categor
   as?: React.ElementType;
 }
 
+/**
+ * A horizontal variant of Label, primarily used in query editors. Can be combined with form components that expect a label, eg. `Input`, `Checkbox`, `Combobox`.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-inlinelabel--docs
+ */
 export const InlineLabel = ({
   children,
   className,
diff --git a/packages/grafana-ui/src/components/Forms/Label.tsx b/packages/grafana-ui/src/components/Forms/Label.tsx
index be9cfaf6475..46e6899b4fa 100644
--- a/packages/grafana-ui/src/components/Forms/Label.tsx
+++ b/packages/grafana-ui/src/components/Forms/Label.tsx
@@ -12,6 +12,11 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
   category?: React.ReactNode[];
 }
 
+/**
+ * The label component can be used to label form inputs with a heading/"Option name" and a description. To automatically have the right arrangement of this component with a form input, use the `Field` component.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-label--docs
+ */
 export const Label = ({ children, description, className, category, ...labelProps }: LabelProps) => {
   const styles = useStyles2(getLabelStyles);
   const categories = category?.map((c, i) => {
diff --git a/packages/grafana-ui/src/components/Forms/Legend.tsx b/packages/grafana-ui/src/components/Forms/Legend.tsx
index 7b48c149b7b..90af8e1229e 100644
--- a/packages/grafana-ui/src/components/Forms/Legend.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legend.tsx
@@ -21,6 +21,11 @@ export const getLegendStyles = (theme: GrafanaTheme2) => {
   };
 };
 
+/**
+ * Legend should be used to add a caption to a group of related form elements that have been grouped toegheter into a `FieldSet`.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-legend--docs
+ */
 export const Legend = ({ children, className, ...legendProps }: LabelProps) => {
   const styles = useStyles2(getLegendStyles);
 
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
index b47ff9913d3..ebef41cbed8 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
@@ -24,6 +24,11 @@ export interface RadioButtonGroupProps<T> {
   invalid?: boolean;
 }
 
+/**
+ * RadioButtonGroup is used to select a single value from multiple mutually exclusive options.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-radiobuttongroup--docs
+ */
 export function RadioButtonGroup<T>({
   options,
   value,
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.tsx
index a6366c64756..6127d143438 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.tsx
@@ -22,6 +22,11 @@ export interface RadioButtonListProps<T> {
   className?: string;
 }
 
+/**
+ * RadioButtonList is used to select a single value from multiple mutually exclusive options usually in a vertical manner.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-radiobuttonlist--docs
+ */
 export function RadioButtonList<T extends string | number | readonly string[]>({
   name,
   id,
diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx
index ed987489f14..fa4e1fac6d3 100644
--- a/packages/grafana-ui/src/components/Icon/Icon.tsx
+++ b/packages/grafana-ui/src/components/Icon/Icon.tsx
@@ -42,6 +42,11 @@ const getIconStyles = (theme: GrafanaTheme2) => {
   };
 };
 
+/**
+ * Grafana's icon wrapper component.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/iconography-icon--docs
+ */
 export const Icon = React.memo(
   React.forwardRef<SVGElement, IconProps>(
     ({ size = 'md', type = 'default', name, className, style, title = '', ...rest }, ref) => {
diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
index bbc4519f71f..d4d77c33fab 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
@@ -43,6 +43,11 @@ interface BasePropsWithAriaLabel extends BaseProps {
 
 export type Props = BasePropsWithTooltip | BasePropsWithAriaLabel;
 
+/**
+ * This component looks just like an icon but behaves like a button.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-iconbutton--docs
+ */
 export const IconButton = React.forwardRef<HTMLButtonElement, Props>((props, ref) => {
   const { size = 'md', variant = 'secondary' } = props;
   let limitedIconSize: LimitedIconSize;
diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
index cb445321333..bf3e0e7f69c 100644
--- a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
+++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
@@ -23,7 +23,11 @@ export interface InfoBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   onDismiss?: () => void;
 }
 
-/** @deprecated use Alert with severity info */
+/**
+ * @deprecated use Alert with severity info.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-deprecated-infobox--docs
+ * */
 export const InfoBox = React.memo(
   React.forwardRef<HTMLDivElement, InfoBoxProps>(
     ({ title, className, children, branded, url, urlTitle, onDismiss, severity = 'info', ...otherProps }, ref) => {
diff --git a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx
index 6f189837c43..9af5cadaa74 100644
--- a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx
+++ b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx
@@ -6,7 +6,11 @@ interface InfoTooltipProps extends Omit<TooltipProps, 'children' | 'content'> {
   children: PopoverContent;
 }
 
-/** @deprecated Use <IconButton name="info-circle" tooltip={children} /> instead */
+/**
+ * @deprecated Use <IconButton name="info-circle" tooltip={children} /> instead.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-deprecated-infotooltip--docs
+ */
 export const InfoTooltip = ({ children, ...restProps }: InfoTooltipProps) => {
   return <IconButton name="info-circle" tooltip={children} {...restProps} />;
 };
diff --git a/packages/grafana-ui/src/components/InlineToast/InlineToast.tsx b/packages/grafana-ui/src/components/InlineToast/InlineToast.tsx
index 178b0032b1e..de79c028d9f 100644
--- a/packages/grafana-ui/src/components/InlineToast/InlineToast.tsx
+++ b/packages/grafana-ui/src/components/InlineToast/InlineToast.tsx
@@ -24,6 +24,11 @@ export interface InlineToastProps {
   alternativePlacement?: Side;
 }
 
+/**
+ * Used to indicate temporal status near fields/components, such as a *Saved* indicator next to a field, or a little *Copied!* indicator above a button.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-inlinetoast--docs
+ */
 export function InlineToast({ referenceElement, children, suffixIcon, placement }: InlineToastProps) {
   const styles = useStyles2(getStyles);
   const theme = useTheme2();
diff --git a/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx b/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
index 2cf17612d99..2e533cf065f 100644
--- a/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
+++ b/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
@@ -20,6 +20,11 @@ export interface Props extends InputProps {
   defaultValue?: string | number | readonly string[];
 }
 
+/**
+ * You can use it or regular text input. When used, AutoSizeInput resizes itself to the current content. For an array of data or tree-structured data, consider using `Combobox` or `Cascader` respectively.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-autosizeinput--docs
+ */
 export const AutoSizeInput = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
   const {
     defaultValue = '',
diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx
index 62aca888d03..4da6c9c22c7 100644
--- a/packages/grafana-ui/src/components/Input/Input.tsx
+++ b/packages/grafana-ui/src/components/Input/Input.tsx
@@ -34,6 +34,11 @@ interface StyleDeps {
   width?: number;
 }
 
+/**
+ * Used for regular text input. For an array of data or tree-structured data, consider using `Combobox` or `Cascader` respectively.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-input--docs
+ */
 export const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
   const {
     className,
diff --git a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx
index 4c0faebccf5..a046f24b89c 100644
--- a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx
+++ b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx
@@ -172,7 +172,13 @@ interface WithoutExpandableRow<TableData extends object> extends BaseProps<Table
 
 type Props<TableData extends object> = WithExpandableRow<TableData> | WithoutExpandableRow<TableData>;
 
-/** @alpha */
+/**
+ * The InteractiveTable is used to display and select data efficiently. It allows for the display and modification of detailed information.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-interactivetable--docs
+ *
+ * @alpha
+ */
 export function InteractiveTable<TableData extends object>({
   className,
   columns,
diff --git a/packages/grafana-ui/src/components/Layout/Box/Box.tsx b/packages/grafana-ui/src/components/Layout/Box/Box.tsx
index c012eb9d5f3..a7d10e4c746 100644
--- a/packages/grafana-ui/src/components/Layout/Box/Box.tsx
+++ b/packages/grafana-ui/src/components/Layout/Box/Box.tsx
@@ -70,6 +70,11 @@ export interface BoxProps extends FlexProps, SizeProps, Omit<React.HTMLAttribute
   position?: ResponsiveProp<Property.Position>;
 }
 
+/**
+ * The Box Component is the most basic layout component. It can be used to build more complex components and layouts with properties that use our design tokens instead of using CSS.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-box--docs
+ */
 export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props, ref) => {
   const {
     children,
diff --git a/packages/grafana-ui/src/components/Layout/Grid/Grid.tsx b/packages/grafana-ui/src/components/Layout/Grid/Grid.tsx
index 1573f881a04..ffba1eb88de 100644
--- a/packages/grafana-ui/src/components/Layout/Grid/Grid.tsx
+++ b/packages/grafana-ui/src/components/Layout/Grid/Grid.tsx
@@ -34,6 +34,11 @@ interface PropsWithMinColumnWidth extends GridPropsBase {
 /** 'columns' and 'minColumnWidth' are mutually exclusive */
 type GridProps = PropsWithColumns | PropsWithMinColumnWidth;
 
+/**
+ * The Grid component is a layout component that allows you to create a grid of columns and rows to organize content and elements. It is a wrapper around the [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) specification.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-grid--docs
+ */
 export const Grid = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const { alignItems, children, gap, rowGap, columnGap, columns, minColumnWidth, ...rest } = props;
   const styles = useStyles2(getGridStyles, gap, rowGap, columnGap, columns, minColumnWidth, alignItems);
diff --git a/packages/grafana-ui/src/components/Layout/Layout.tsx b/packages/grafana-ui/src/components/Layout/Layout.tsx
index a2f34d44d06..71fe0803b83 100644
--- a/packages/grafana-ui/src/components/Layout/Layout.tsx
+++ b/packages/grafana-ui/src/components/Layout/Layout.tsx
@@ -33,6 +33,8 @@ export interface ContainerProps {
 
 /**
  * @deprecated use Stack component instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-deprecated-groups--docs
  */
 export const Layout = ({
   children,
diff --git a/packages/grafana-ui/src/components/Layout/Space.mdx b/packages/grafana-ui/src/components/Layout/Space.mdx
index 47bc0cb8e54..dd5182a8cea 100644
--- a/packages/grafana-ui/src/components/Layout/Space.mdx
+++ b/packages/grafana-ui/src/components/Layout/Space.mdx
@@ -5,7 +5,7 @@ import { Space } from './Space';
 
 # Space
 
-The `Space` component is a component used to add space between elements. Horizontal space is added using the `h` prop, while vertical space is added using the `v` prop. When adding horizontal space between inline or inline-block elements, the `layout` props should be set to `inline`, otherwise the `block` value of the prop can be used.
+The `Space` component is a component used to add space between elements. Horizontal space is added using the `h` prop, while vertical space is added using the `v` prop. When adding horizontal space between inline or inline-block elements, the `layout` prop should be set to `inline`, otherwise the `block` value of the prop can be used.
 
 ### Usage
 
diff --git a/packages/grafana-ui/src/components/Layout/Space.tsx b/packages/grafana-ui/src/components/Layout/Space.tsx
index 2df48501ea4..8a81bcb1eed 100644
--- a/packages/grafana-ui/src/components/Layout/Space.tsx
+++ b/packages/grafana-ui/src/components/Layout/Space.tsx
@@ -19,6 +19,11 @@ export interface SpaceProps {
   layout?: 'block' | 'inline';
 }
 
+/**
+ * The Space component is a component used to add space between elements. Horizontal space is added using the `h` prop, while vertical space is added using the `v` prop. When adding horizontal space between inline or inline-block elements, the `layout` prop should be set to `"inline"`, otherwise the `"block"` value of the prop can be used.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-space--docs
+ */
 export const Space = ({ v = 0, h = 0, layout }: SpaceProps) => {
   return <Box paddingRight={h} paddingBottom={v} display={layout === 'inline' ? 'inline-block' : 'block'} />;
 };
diff --git a/packages/grafana-ui/src/components/Layout/Stack/Stack.tsx b/packages/grafana-ui/src/components/Layout/Stack/Stack.tsx
index e54cc724f2d..b3a4984b110 100644
--- a/packages/grafana-ui/src/components/Layout/Stack/Stack.tsx
+++ b/packages/grafana-ui/src/components/Layout/Stack/Stack.tsx
@@ -21,7 +21,8 @@ interface StackProps extends FlexProps, SizeProps, Omit<React.HTMLAttributes<HTM
 
 /**
  * The Stack component is a simple wrapper around the flexbox layout model that allows to easily create responsive and flexible layouts. It provides a simple and intuitive way to align and distribute items within a container either horizontally or vertically.
- * Storybook: https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-stack--docs
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-stack--docs
  */
 export const Stack = React.forwardRef<HTMLDivElement, StackProps>((props, ref) => {
   const {
diff --git a/packages/grafana-ui/src/components/Link/TextLink.tsx b/packages/grafana-ui/src/components/Link/TextLink.tsx
index d46a1ba3bc3..1f7ec1e16de 100644
--- a/packages/grafana-ui/src/components/Link/TextLink.tsx
+++ b/packages/grafana-ui/src/components/Link/TextLink.tsx
@@ -43,6 +43,11 @@ const svgSizes: {
   bodySmall: 'xs',
 };
 
+/**
+ * The TextLink component renders an anchor tag `<a>` that takes users to another page, external or internal to Grafana.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/foundations-textlink--docs
+ */
 export const TextLink = forwardRef<HTMLAnchorElement, TextLinkProps>(
   (
     { href, color = 'link', external = false, inline = true, variant = 'body', weight, icon, children, ...rest },
diff --git a/packages/grafana-ui/src/components/List/List.tsx b/packages/grafana-ui/src/components/List/List.tsx
index a58bb3c5d4e..d4b86807a7b 100644
--- a/packages/grafana-ui/src/components/List/List.tsx
+++ b/packages/grafana-ui/src/components/List/List.tsx
@@ -2,7 +2,11 @@ import { PureComponent } from 'react';
 
 import { ListProps, AbstractList } from './AbstractList';
 
-/** @deprecated Use ul/li/arr.map directly instead */
+/**
+ * @deprecated Use ul/li/arr.map directly instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-deprecated-list--docs
+ */
 // no point converting, this is deprecated
 // eslint-disable-next-line react-prefer-function-component/react-prefer-function-component
 export class List<T> extends PureComponent<ListProps<T>> {
diff --git a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
index 213f39b4243..1ac038fe75f 100644
--- a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
+++ b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
@@ -18,6 +18,11 @@ const MAX_DURATION_MS = 4000;
 const DEFAULT_ANIMATION_DELAY = 300;
 const MAX_TRANSLATE_X = (100 / BAR_WIDTH) * 100;
 
+/**
+ * The LoadingBar is used as a simple loading slider animation in the top of its container.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-loadingbar--docs
+ */
 export function LoadingBar({ width, delay = DEFAULT_ANIMATION_DELAY, ariaLabel = 'Loading bar' }: LoadingBarProps) {
   const durationMs = Math.min(Math.max(Math.round(width * MILLISECONDS_PER_PIXEL), MIN_DURATION_MS), MAX_DURATION_MS);
   const styles = useStyles2(getStyles, delay, durationMs);
diff --git a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
index fb3ec626437..9f50ed9d072 100644
--- a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
+++ b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
@@ -15,6 +15,9 @@ export interface LoadingPlaceholderProps extends HTMLAttributes<HTMLDivElement>
 }
 
 /**
+ * Loading indicator with a text. Used to alert a user to wait for an activity to complete.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-loadingplaceholder--docs
  * @public
  */
 export const LoadingPlaceholder = ({ text, className, ...rest }: LoadingPlaceholderProps) => {
diff --git a/packages/grafana-ui/src/components/Menu/Menu.tsx b/packages/grafana-ui/src/components/Menu/Menu.tsx
index f77a26bb0e7..a1439aa5356 100644
--- a/packages/grafana-ui/src/components/Menu/Menu.tsx
+++ b/packages/grafana-ui/src/components/Menu/Menu.tsx
@@ -22,6 +22,9 @@ export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
   onKeyDown?: React.KeyboardEventHandler;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-menu--docs
+ */
 const MenuComp = React.forwardRef<HTMLDivElement, MenuProps>(
   ({ header, children, ariaLabel, onOpen, onClose, onKeyDown, ...otherProps }, forwardedRef) => {
     const styles = useStyles2(getStyles);
diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx
index 9937fe93f9f..fc00bc9e562 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.tsx
@@ -48,6 +48,9 @@ interface WithCustomTitleProps extends BaseProps {
 
 export type Props = WithStringTitleProps | WithCustomTitleProps;
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-modal--docs
+ */
 export function Modal(props: PropsWithChildren<Props>) {
   const {
     title,
diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
index 276520b873d..a0e17c92b1d 100644
--- a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
+++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
@@ -196,6 +196,11 @@ class UnthemedCodeEditor extends PureComponent<Props> {
   }
 }
 
+/**
+ * Monaco Code editor.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-codeeditor--docs
+ */
 export const CodeEditor = withTheme2(UnthemedCodeEditor);
 
 const getStyles = (theme: GrafanaTheme2) => {
diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
index 296d79212f6..93e59296166 100644
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
@@ -34,7 +34,11 @@ export interface Props {
   forceShowLeftItems?: boolean;
 }
 
-/** @deprecated Use Page instead */
+/**
+ * @deprecated Use Page instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-deprecated-pagetoolbar--docs
+ */
 export const PageToolbar = memo(
   ({
     title,
diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
index 70c447e059c..c0c25d4186b 100644
--- a/packages/grafana-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
@@ -21,6 +21,11 @@ export interface Props {
   className?: string;
 }
 
+/**
+ * Component used for rendering a page selector below paginated content.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-pagination--docs
+ */
 export const Pagination = ({
   currentPage,
   numberOfPages,
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index 16d67ea51db..05d3ae406e5 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
@@ -116,6 +116,10 @@ interface HoverHeader {
 export type PanelPadding = 'none' | 'md';
 
 /**
+ * Component used for rendering content wrapped in the same style as grafana panels.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-panelchrome--docs
+ *
  * @internal
  */
 export function PanelChrome({
diff --git a/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx b/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx
index 5279c363675..fd68335b2a7 100644
--- a/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx
+++ b/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx
@@ -8,7 +8,11 @@ import { useStyles2 } from '../../themes/ThemeContext';
 type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
 // TODO: Reimplement this with Box
-/** @deprecated Use Box instead */
+/**
+ * @deprecated Use Box instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-deprecated-panelcontainer--docs
+ */
 export const PanelContainer = ({ children, className, ...props }: Props) => {
   const styles = useStyles2(getStyles);
   return (
diff --git a/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx b/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx
index 698e61c466b..9935f2323d1 100644
--- a/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx
+++ b/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx
@@ -22,6 +22,8 @@ export interface PluginSignatureBadgeProps extends HTMLAttributes<HTMLDivElement
 }
 
 /**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-pluginsignaturebadge--docs
+ *
  * @public
  */
 export const PluginSignatureBadge = ({
diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
index 9b5133ac830..053bddb3ad3 100644
--- a/packages/grafana-ui/src/components/QueryField/QueryField.tsx
+++ b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
@@ -53,12 +53,6 @@ export interface QueryFieldState {
   value: Value;
 }
 
-/**
- * Renders an editor field.
- * Pass initial value as initialQuery and listen to changes in props.onValueChanged.
- * This component can only process strings. Internally it uses Slate Value.
- * Implement props.onTypeahead to use suggestions, see PromQueryField.tsx as an example.
- */
 export class UnThemedQueryField extends PureComponent<QueryFieldProps, QueryFieldState> {
   plugins: Array<Plugin<Editor>>;
   runOnChangeDebounced: Function;
@@ -238,6 +232,16 @@ export class UnThemedQueryField extends PureComponent<QueryFieldProps, QueryFiel
   }
 }
 
+/**
+ * Renders an editor field.
+ * Pass initial value as initialQuery and listen to changes in props.onValueChanged.
+ * This component can only process strings. Internally it uses Slate Value.
+ * Implement props.onTypeahead to use suggestions.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-queryfield--docs
+ *
+ * @deprecated
+ */
 export const QueryField = withTheme2(UnThemedQueryField);
 
 const getStyles = (theme: GrafanaTheme2) => {
diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx
index 128c56b1cb6..3dcc25e8875 100644
--- a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx
@@ -72,6 +72,9 @@ export type RadialGradientMode = 'none' | 'auto';
 export type RadialTextMode = 'auto' | 'value_and_name' | 'value' | 'name' | 'none';
 export type RadialShape = 'circle' | 'gauge';
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-radialgauge--docs
+ */
 export function RadialGauge(props: RadialGaugeProps) {
   const {
     width = 256,
diff --git a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx
index d99958e88d1..363222fcad6 100644
--- a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx
+++ b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx
@@ -29,6 +29,11 @@ export interface Props {
   isOnCanvas?: boolean;
 }
 
+/**
+ * This component is used on dashboards to refresh visualizations.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-refreshpicker--docs
+ */
 export class RefreshPicker extends PureComponent<Props> {
   static offOption = {
     label: 'Off',
diff --git a/packages/grafana-ui/src/components/RenderUserContentAsHTML/RenderUserContentAsHTML.tsx b/packages/grafana-ui/src/components/RenderUserContentAsHTML/RenderUserContentAsHTML.tsx
index d5ec22c2440..3fb806bc162 100644
--- a/packages/grafana-ui/src/components/RenderUserContentAsHTML/RenderUserContentAsHTML.tsx
+++ b/packages/grafana-ui/src/components/RenderUserContentAsHTML/RenderUserContentAsHTML.tsx
@@ -9,6 +9,11 @@ export interface RenderUserContentAsHTMLProps<T = HTMLSpanElement>
   content: string;
 }
 
+/**
+ * Abstraction layer component for sanitizing and rendering an html content.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/utilities-renderusercontentashtml--docs
+ */
 export function RenderUserContentAsHTML<T>({
   component,
   content,
diff --git a/packages/grafana-ui/src/components/ScrollContainer/ScrollContainer.tsx b/packages/grafana-ui/src/components/ScrollContainer/ScrollContainer.tsx
index af7907b9562..60da6f97a8d 100644
--- a/packages/grafana-ui/src/components/ScrollContainer/ScrollContainer.tsx
+++ b/packages/grafana-ui/src/components/ScrollContainer/ScrollContainer.tsx
@@ -17,6 +17,11 @@ interface Props extends Omit<BoxProps, 'display' | 'direction' | 'element' | 'fl
   scrollbarWidth?: Property.ScrollbarWidth;
 }
 
+/**
+ * This component is used to create a scrollable container. It uses native scrollbars, has an option to show scroll indicators, and supports most `Box` properties.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-scrollcontainer--docs
+ */
 export const ScrollContainer = forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
   (
     {
diff --git a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx
index 4bfaac7c603..238d3adf3ea 100644
--- a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx
+++ b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx
@@ -32,6 +32,8 @@ export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onRe
  * to the user (like datasource passwords).
  *
  * @deprecated Please use the {@link SecretInput} component with a {@link Field} instead, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-secretinput--basic as seen in Storybook}
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-deprecated-secretformfield--docs
  */
 export const SecretFormField = ({
   label = 'Password',
diff --git a/packages/grafana-ui/src/components/SecretInput/SecretInput.tsx b/packages/grafana-ui/src/components/SecretInput/SecretInput.tsx
index b7cc7b41a72..23286c5a393 100644
--- a/packages/grafana-ui/src/components/SecretInput/SecretInput.tsx
+++ b/packages/grafana-ui/src/components/SecretInput/SecretInput.tsx
@@ -14,6 +14,11 @@ export type Props = React.ComponentProps<typeof Input> & {
 export const CONFIGURED_TEXT = 'configured';
 export const RESET_BUTTON_TEXT = 'Reset';
 
+/**
+ * Used for secret/password input.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-secretinput--docs
+ */
 export const SecretInput = ({ isConfigured, onReset, ...props }: Props) => (
   <Stack>
     {!isConfigured && <Input {...props} type="password" />}
diff --git a/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx b/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx
index b7196732660..a10ad157120 100644
--- a/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx
+++ b/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx
@@ -32,6 +32,8 @@ const getStyles = (theme: GrafanaTheme2) => {
 /**
  * Text area that does not disclose an already configured value but lets the user reset the current value and enter a new one.
  * Typically useful for asymmetric cryptography keys.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-secrettextarea--docs
  */
 export const SecretTextArea = ({ isConfigured, onReset, ...props }: Props) => {
   const styles = useStyles2(getStyles);
diff --git a/packages/grafana-ui/src/components/Segment/Segment.tsx b/packages/grafana-ui/src/components/Segment/Segment.tsx
index 3abec60b774..b39399965c4 100644
--- a/packages/grafana-ui/src/components/Segment/Segment.tsx
+++ b/packages/grafana-ui/src/components/Segment/Segment.tsx
@@ -20,6 +20,9 @@ export interface SegmentSyncProps<T> extends SegmentProps, Omit<HTMLProps<HTMLDi
   inputMinWidth?: number;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-segment--docs
+ */
 export function Segment<T>({
   options,
   value,
diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
index 804b1bbe92f..8a3caf6e73e 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
@@ -29,6 +29,9 @@ export interface SegmentAsyncProps<T> extends SegmentProps, Omit<HTMLProps<HTMLD
   inputMinWidth?: number;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-segmentasync--docs
+ */
 export function SegmentAsync<T>({
   value,
   onChange,
diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx
index 22e9411297e..bcb46c93f04 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx
@@ -20,6 +20,9 @@ export interface SegmentInputProps
 
 const FONT_SIZE = 14;
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-segmentinput--docs
+ */
 export function SegmentInput({
   value: initialValue,
   onChange,
diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx
index f543fa5dab5..7aaa338ae1c 100644
--- a/packages/grafana-ui/src/components/Select/Select.tsx
+++ b/packages/grafana-ui/src/components/Select/Select.tsx
@@ -10,11 +10,20 @@ import {
   VirtualizedSelectAsyncProps,
 } from './types';
 
-/** @deprecated Use Combobox component instead */
+/**
+ * @deprecated Use Combobox component instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-select--docs
+ */
 export function Select<T, Rest = {}>(props: SelectCommonProps<T> & Rest) {
   return <SelectBase {...props} />;
 }
 
+/**
+ * @deprecated Use Combobox component instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-select--docs
+ */
 export function MultiSelect<T, Rest = {}>(props: MultiSelectCommonProps<T> & Rest) {
   // @ts-ignore
   return <SelectBase {...props} isMulti />;
@@ -25,17 +34,29 @@ export interface AsyncSelectProps<T> extends Omit<SelectCommonProps<T>, 'options
   value?: T | SelectableValue<T> | null;
 }
 
-/** @deprecated Use Combobox component instead */
+/**
+ * @deprecated Use Combobox component instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-select--docs
+ */
 export function AsyncSelect<T, Rest = {}>(props: AsyncSelectProps<T> & Rest) {
   return <SelectBase {...props} />;
 }
 
-/** @deprecated Use Combobox component instead - it's virtualised by default! */
+/**
+ * @deprecated Use Combobox component instead - it's virtualised by default!
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-select--docs
+ */
 export function VirtualizedSelect<T, Rest = {}>(props: VirtualizedSelectProps<T> & Rest) {
   return <SelectBase virtualized {...props} />;
 }
 
-/** @deprecated Use Combobox component instead - it's virtualised by default! */
+/**
+ * @deprecated Use Combobox component instead - it's virtualised by default!
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-select--docs
+ */
 export function AsyncVirtualizedSelect<T, Rest = {}>(props: VirtualizedSelectAsyncProps<T> & Rest) {
   return <SelectBase virtualized {...props} />;
 }
@@ -45,6 +66,11 @@ interface AsyncMultiSelectProps<T> extends Omit<MultiSelectCommonProps<T>, 'opti
   value?: Array<SelectableValue<T>>;
 }
 
+/**
+ * @deprecated Use Combobox component instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-select--docs
+ */
 export function AsyncMultiSelect<T, Rest = {}>(props: AsyncMultiSelectProps<T> & Rest) {
   // @ts-ignore
   return <SelectBase {...props} isMulti />;
diff --git a/packages/grafana-ui/src/components/Slider/RangeSlider.tsx b/packages/grafana-ui/src/components/Slider/RangeSlider.tsx
index 794ea5b795f..6b791fd7211 100644
--- a/packages/grafana-ui/src/components/Slider/RangeSlider.tsx
+++ b/packages/grafana-ui/src/components/Slider/RangeSlider.tsx
@@ -15,6 +15,8 @@ import { RangeSliderProps } from './types';
  * @public
  *
  * RichHistoryQueriesTab uses this Range Component
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-rangeslider--docs
  */
 export const RangeSlider = ({
   min,
diff --git a/packages/grafana-ui/src/components/Slider/Slider.tsx b/packages/grafana-ui/src/components/Slider/Slider.tsx
index e8c377070bf..b41f41d0af7 100644
--- a/packages/grafana-ui/src/components/Slider/Slider.tsx
+++ b/packages/grafana-ui/src/components/Slider/Slider.tsx
@@ -13,6 +13,8 @@ import { SliderProps } from './types';
 
 /**
  * @public
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-slider--docs
  */
 export const Slider = ({
   min,
diff --git a/packages/grafana-ui/src/components/Spinner/Spinner.tsx b/packages/grafana-ui/src/components/Spinner/Spinner.tsx
index 78905e29eec..af1c3b60aca 100644
--- a/packages/grafana-ui/src/components/Spinner/Spinner.tsx
+++ b/packages/grafana-ui/src/components/Spinner/Spinner.tsx
@@ -29,6 +29,10 @@ interface PropsWithDeprecatedSize extends Omit<Props, 'size'> {
 
 /**
  * @public
+ *
+ * Spinner is `fa-spinner` icon animated. It is used to alert a user to wait for an activity to complete.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-spinner--docs
  */
 export const Spinner = ({
   className,
diff --git a/packages/grafana-ui/src/components/Splitter/useSplitter.ts b/packages/grafana-ui/src/components/Splitter/useSplitter.ts
index b5343ae80aa..18fb95a532e 100644
--- a/packages/grafana-ui/src/components/Splitter/useSplitter.ts
+++ b/packages/grafana-ui/src/components/Splitter/useSplitter.ts
@@ -49,6 +49,11 @@ const propsForDirection = {
   },
 } as const;
 
+/**
+ * The splitter creates two resizable panes, either horizontally or vertically.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/utilities-usesplitter--docs
+ */
 export function useSplitter(options: UseSplitterOptions) {
   const {
     direction,
diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx
index 0a8654b1425..d2b63a2d76a 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.tsx
@@ -14,6 +14,11 @@ export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'value'> {
   invalid?: boolean;
 }
 
+/**
+ * Switch is a representation of an on-off state – like a light switch. So you can use Switch to toggle binary states.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-switch--docs
+ */
 export const Switch = forwardRef<HTMLInputElement, Props>(
   ({ value, checked, onChange, id, label, disabled, invalid = false, ...inputProps }, ref) => {
     if (checked) {
diff --git a/packages/grafana-ui/src/components/Table/TableRT/Table.tsx b/packages/grafana-ui/src/components/Table/TableRT/Table.tsx
index 4df81505431..ea909d4642f 100644
--- a/packages/grafana-ui/src/components/Table/TableRT/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/TableRT/Table.tsx
@@ -40,6 +40,11 @@ const COLUMN_MIN_WIDTH = 150;
 const FOOTER_ROW_HEIGHT = 36;
 const NO_DATA_TEXT = 'No data';
 
+/**
+ * Used for displaying tabular data
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-table--docs
+ */
 export const Table = memo((props: Props) => {
   const {
     ariaLabel,
diff --git a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
index 57c3b9943e4..dfd967e04e3 100644
--- a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
+++ b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
@@ -102,7 +102,11 @@ export class UnThemedTableInputCSV extends PureComponent<Props, State> {
   }
 }
 
-/** @deprecated */
+/**
+ * @deprecated
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-tableinputcsv--docs
+ */
 export const TableInputCSV = withTheme2(UnThemedTableInputCSV);
 TableInputCSV.displayName = 'TableInputCSV';
 
diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx
index 6eb695df437..ae58e136aeb 100644
--- a/packages/grafana-ui/src/components/Tabs/Tab.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx
@@ -31,6 +31,9 @@ export interface TabProps extends HTMLProps<HTMLElement> {
   disabled?: boolean;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-tabs--docs
+ */
 export const Tab = React.forwardRef<HTMLElement, TabProps>(
   (
     {
diff --git a/packages/grafana-ui/src/components/Tabs/TabContent.tsx b/packages/grafana-ui/src/components/Tabs/TabContent.tsx
index a22f6102dba..9bceb46f3c8 100644
--- a/packages/grafana-ui/src/components/Tabs/TabContent.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabContent.tsx
@@ -9,6 +9,9 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-tabs--docs
+ */
 export const TabContent = ({ children, className, ...restProps }: Props) => {
   const styles = useStyles2(getTabContentStyle);
 
diff --git a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
index 8ba4405dcfa..c33734f7ea9 100644
--- a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
@@ -13,6 +13,11 @@ export interface Props {
   hideBorder?: boolean;
 }
 
+/**
+ * A composition component for rendering a TabBar with Tabs for navigation.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-tabs--docs
+ */
 export const TabsBar = forwardRef<HTMLDivElement, Props>(({ children, className, hideBorder = false }, ref) => {
   const styles = useStyles2(getStyles);
 
diff --git a/packages/grafana-ui/src/components/Tags/Tag.tsx b/packages/grafana-ui/src/components/Tags/Tag.tsx
index e1dde995bad..1d529dfcc24 100644
--- a/packages/grafana-ui/src/components/Tags/Tag.tsx
+++ b/packages/grafana-ui/src/components/Tags/Tag.tsx
@@ -57,6 +57,11 @@ const TagSkeleton: SkeletonComponent = ({ rootProps }) => {
   return <Skeleton width={60} height={22} containerClassName={styles.container} {...rootProps} />;
 };
 
+/**
+ * Used for displaying metadata, for example to add more details to search results. Background and border colors are generated from the tag name.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-tag--docs
+ */
 export const Tag = attachSkeleton(TagComponent, TagSkeleton);
 
 const getSkeletonStyles = () => ({
diff --git a/packages/grafana-ui/src/components/Tags/TagList.tsx b/packages/grafana-ui/src/components/Tags/TagList.tsx
index d128c64610b..729fc920f28 100644
--- a/packages/grafana-ui/src/components/Tags/TagList.tsx
+++ b/packages/grafana-ui/src/components/Tags/TagList.tsx
@@ -73,6 +73,11 @@ const TagListSkeleton: SkeletonComponent = ({ rootProps }) => {
   );
 };
 
+/**
+ * List of tags with predefined margins and positioning.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-taglist--docs
+ */
 export const TagList = attachSkeleton(TagListComponent, TagListSkeleton);
 
 const getSkeletonStyles = (theme: GrafanaTheme2) => ({
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
index 7bcdbb6852a..1b6e78213da 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
@@ -29,6 +29,11 @@ export interface Props {
   autoColors?: boolean;
 }
 
+/**
+ * A set of an input field and a button next to it that allows the user to add new tags. The added tags are previewed next to the input and can be removed by clicking the "X" icon. You can customize the width of the input.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-tagsinput--docs
+ */
 export const TagsInput = forwardRef<HTMLInputElement, Props>(
   (
     {
diff --git a/packages/grafana-ui/src/components/Text/Text.tsx b/packages/grafana-ui/src/components/Text/Text.tsx
index 55b88ee4011..56cb2b529bb 100644
--- a/packages/grafana-ui/src/components/Text/Text.tsx
+++ b/packages/grafana-ui/src/components/Text/Text.tsx
@@ -29,6 +29,11 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'clas
   children: NonNullable<React.ReactNode>;
 }
 
+/**
+ * The Text component can be used to apply typography styles in a simple way, without the need of extra css.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/foundations-text--docs
+ */
 export const Text = React.forwardRef<HTMLElement, TextProps>(
   (
     { element = 'span', variant, weight, color, truncate, italic, textAlignment, children, tabular, ...restProps },
diff --git a/packages/grafana-ui/src/components/TextArea/TextArea.tsx b/packages/grafana-ui/src/components/TextArea/TextArea.tsx
index 1c84344348f..6c80d370dc6 100644
--- a/packages/grafana-ui/src/components/TextArea/TextArea.tsx
+++ b/packages/grafana-ui/src/components/TextArea/TextArea.tsx
@@ -11,6 +11,11 @@ export interface Props extends Omit<HTMLProps<HTMLTextAreaElement>, 'size'> {
   invalid?: boolean;
 }
 
+/**
+ * Use for multi line inputs like descriptions.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-textarea--docs
+ */
 export const TextArea = forwardRef<HTMLTextAreaElement, Props>(({ invalid, className, ...props }, ref) => {
   const styles = useStyles2(getTextAreaStyle, invalid);
 
diff --git a/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx b/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx
index 991490e36aa..84f13eaf112 100644
--- a/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx
+++ b/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx
@@ -48,6 +48,11 @@ export interface ToggletipProps {
   onOpen?: () => void;
 }
 
+/**
+ * Toggletips, similar to Tooltips, provide contextual support for users when needed. They are hidden by default, a UI trigger or text link are clicked to set them to their visible state. Toggletips, unlike tooltips, are persistent until a user takes action to dismiss them by clicking on the required “X” (close) trigger. Toggletips are capable of containing varying types of complex content including interactive components, buttons, and dropdowns.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-toggletip--docs
+ */
 export const Toggletip = memo(
   ({
     children,
diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
index 376b1b3fc38..40b468d73fb 100644
--- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
+++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
@@ -41,6 +41,11 @@ export type ToolbarButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonEl
 
 export type ToolbarButtonVariant = 'default' | 'primary' | 'destructive' | 'active' | 'canvas';
 
+/**
+ * Multiple buttons that form a toolbar. Each button can contain an icon, image and text. There are three variants of the ToolbarButton: default, primary and destructive.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-toolbarbutton--docs
+ */
 export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
   (
     {
diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
index 000713c57c4..54608a3acbd 100644
--- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
+++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
@@ -17,6 +17,11 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
   alignment?: 'left' | 'right';
 }
 
+/**
+ * A container for multiple ToolbarButtons. Provides automatic overflow behaviour when the buttons no longer fit in the container.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-toolbarbuttonrow--docs
+ */
 export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
   ({ alignment = 'left', className, children, ...rest }, ref) => {
     // null/undefined are valid react children so we need to filter them out to prevent unnecessary padding
diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index b44d48ddf38..665e2d7bf6c 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
@@ -34,6 +34,9 @@ export interface TooltipProps {
   interactive?: boolean;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-tooltip--docs
+ */
 export const Tooltip = forwardRef<HTMLElement, TooltipProps>(
   ({ children, theme, interactive, show, placement, content }, forwardedRef) => {
     const arrowRef = useRef(null);
diff --git a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
index dff45cb2a18..ac53b424bdb 100644
--- a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
+++ b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
@@ -16,6 +16,9 @@ function formatCreateLabel(input: string) {
   return `Custom unit: ${input}`;
 }
 
+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-unitpicker--docs
+ */
 export class UnitPicker extends PureComponent<UnitPickerProps> {
   onChange = (value: SelectableValue<string>) => {
     this.props.onChange(value.value);
diff --git a/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx b/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx
index 3d8dd97f962..ca5ff1f665c 100644
--- a/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx
+++ b/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx
@@ -51,6 +51,11 @@ const getUserInitials = (name?: string) => {
   return `${first?.[0] ?? ''}${last?.[0] ?? ''}`.toUpperCase();
 };
 
+/**
+ * UserIcon renders a user icon and displays the user's name or initials along with the user's active status or last viewed date.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/iconography-usericon--docs
+ */
 export const UserIcon = ({
   userView,
   className,
diff --git a/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx b/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx
index 44518ce25c7..66c9a0bddca 100644
--- a/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx
+++ b/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx
@@ -16,6 +16,12 @@ export interface UsersIndicatorProps {
   /** onClick handler for the user number indicator */
   onClick?: () => void;
 }
+
+/**
+ * A component that displays a set of user icons indicating which users are currently active. If there are too many users to display all the icons, it will collapse the icons into a single icon with a number indicating the number of additional users.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/iconography-usersindicator--docs
+ */
 export const UsersIndicator = ({ users, onClick, limit = 4 }: UsersIndicatorProps) => {
   const styles = useStyles2(getStyles);
   if (!users.length) {
diff --git a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx
index 128a038ea8d..8647140c615 100644
--- a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx
+++ b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx
@@ -37,6 +37,11 @@ export interface ValuePickerProps<T> {
   buttonCss?: string;
 }
 
+/**
+ * A component that looks like a button but transforms into a select when clicked.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-valuepicker--docs
+ */
 export function ValuePicker<T>({
   'aria-label': ariaLabel,
   label,
diff --git a/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx b/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
index 6194b3ac6b2..11b5ed6dc00 100644
--- a/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
+++ b/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
@@ -29,6 +29,8 @@ export interface VizLayoutComponentType extends FC<VizLayoutProps> {
 
 /**
  * @beta
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-vizlayout--docs
  */
 export const VizLayout: VizLayoutComponentType = ({ width, height, legend, children }) => {
   const theme = useTheme2();
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegend.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegend.tsx
index f07c3abff22..0a8dc48d3a9 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegend.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegend.tsx
@@ -13,6 +13,8 @@ import { mapMouseEventToMode } from './utils';
 
 /**
  * @public
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-vizlegend--docs
  */
 export function VizLegend<T>({
   items,