From c52ab270e412f64c59209d415c450e7ddfba1b07 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 22 Jan 2025 08:37:42 +0100
Subject: [PATCH 01/10] chore: go over react props and jsdoc

---
 packages/react/src/components/Alert/Alert.tsx |  6 ++++--
 packages/react/src/components/Badge/Badge.tsx | 11 +---------
 .../src/components/Badge/BadgePosition.tsx    |  9 ++++++++
 .../components/Breadcrumbs/Breadcrumbs.tsx    | 18 ++++++++++++++++
 .../react/src/components/Button/Button.tsx    |  7 +++++--
 packages/react/src/components/Card/Card.tsx   |  5 +++++
 .../src/components/Checkbox/Checkbox.tsx      | 21 ++++++++++++++-----
 packages/react/src/components/Chip/Chips.tsx  |  1 +
 .../react/src/components/Details/Details.tsx  | 13 ++++++++----
 .../src/components/Details/DetailsContent.tsx |  1 +
 .../src/components/Details/DetailsSummary.tsx |  1 +
 .../react/src/components/Divider/Divider.tsx  |  6 ++++++
 .../src/components/Dropdown/Dropdown.tsx      | 19 ++++++++++++++++-
 .../Dropdown/DropdownTriggerContext.tsx       |  5 ++++-
 .../components/ErrorSummary/ErrorSummary.tsx  | 12 +++++++++++
 15 files changed, 110 insertions(+), 25 deletions(-)

diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index dff041e60e..d9bb257a25 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -10,7 +10,8 @@ export type AlertProps = MergeRight<
   {
     /**
      * Sets color and icon.
-     * @default info
+     *
+     * @default 'info'
      */
     'data-color'?: SeverityColors;
   }
@@ -18,8 +19,9 @@ export type AlertProps = MergeRight<
 
 /**
  * Alerts are used to inform users about important information, warnings, errors, or success.
+ *
  * @example
- * <Alert color='info'>Dette er en informasjonsmelding</Alert>
+ * <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
  */
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
   { 'data-color': color = 'info', className, ...rest },
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index 94c40e8eb4..4684733f88 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -22,16 +22,7 @@ export type BadgeProps = MergeRight<
  * `Badge` is a non-interactive component for displaying status with or without numbers.
  *
  * @example without children
- * ```jsx
- * <Badge color='accent' count={5} />
- * ```
- *
- * @example with children
- * ```jsx
- * <Badge color='accent'>
- *  <Icon />
- * </Badge>
- * ```
+ * <Badge count={5} maxCount={10} />
  */
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
   { className, count, maxCount, ...rest },
diff --git a/packages/react/src/components/Badge/BadgePosition.tsx b/packages/react/src/components/Badge/BadgePosition.tsx
index 240312c1a3..10cc5daf24 100644
--- a/packages/react/src/components/Badge/BadgePosition.tsx
+++ b/packages/react/src/components/Badge/BadgePosition.tsx
@@ -20,6 +20,15 @@ export type BadgePositionProps = MergeRight<
   }
 >;
 
+/**
+ * `BadgePosition` is a component that positions the badge.
+ *
+ * @example
+ * <BadgePosition placement='top-right' overlap='circle'>
+ *  <Badge count={5} maxCount={10} />
+ *  <Element />
+ * </BadgePosition>
+ */
 export const BadgePosition = forwardRef<HTMLSpanElement, BadgePositionProps>(
   function BadgePlacement(
     { className, overlap = 'rectangle', placement = 'top-right', ...rest },
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
index cebbe8b570..717de010b5 100644
--- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -14,6 +14,24 @@ export type BreadcrumbsProps = MergeRight<
   }
 >;
 
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du er her:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
+ *  <Breadcrumbs.List>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *  </Breadcrumbs.List>
+ * </Breadcrumbs>
+ */
 export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
   ({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (
     <nav
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index 6afa72fd57..c359d0f21e 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -14,11 +14,13 @@ export type ButtonProps = MergeRight<
      * @default primary
      */
     variant?: 'primary' | 'secondary' | 'tertiary';
-    /** Toggle icon only styling, pass icon as children
+    /**
+     * Toggle icon only styling, pass icon as children
      * @default false
      */
     icon?: boolean;
-    /** Toggle loading state
+    /**
+     * Toggle loading state
      * @default false
      */
     loading?: boolean;
@@ -37,6 +39,7 @@ export type ButtonProps = MergeRight<
 
 /**
  * Button used for interaction
+ *
  * @example
  * <Button>Click me</Button>
  */
diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
index e5b79dec89..a7fab2cabe 100644
--- a/packages/react/src/components/Card/Card.tsx
+++ b/packages/react/src/components/Card/Card.tsx
@@ -14,6 +14,10 @@ export type CardProps = MergeRight<
      * @default neutral
      */
     'data-color'?: 'subtle' | DefaultProps['data-color'];
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
     asChild?: boolean;
     /** Instances of `Card.Block`, `Divider` or other React nodes */
     children: ReactNode;
@@ -22,6 +26,7 @@ export type CardProps = MergeRight<
 
 /**
  * Card component to present content in a structured way.
+ *
  * @example
  * <Card>
  *  <Card.Block>Header</Card.Block>
diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
index f29d7adac2..7a3f47f785 100644
--- a/packages/react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -10,21 +10,32 @@ import { ValidationMessage } from '../ValidationMessage';
 export type CheckboxProps = MergeRight<
   DefaultProps & Omit<InputProps, 'type' | 'role' | 'size'>,
   {
-    /** Optional aria-label */
+    /**
+     * Optional aria-label
+     */
     'aria-label'?: string;
-    /** Checkbox label */
+    /**
+     * Checkbox label
+     */
     label?: ReactNode;
-    /** Description for field */
+    /**
+     * Description for field
+     */
     description?: ReactNode;
-    /** Value of the `input` element */
+    /**
+     * Value of the `input` element
+     */
     value?: InputProps['value'];
-    /** Validation message for field */
+    /**
+     * Validation message for field
+     */
     validation?: ReactNode;
   } & LabelRequired
 >;
 
 /**
  * Checkbox used to select multiple options.
+ *
  * @example
  * <Checkbox label="I agree" value="agree" />
  */
diff --git a/packages/react/src/components/Chip/Chips.tsx b/packages/react/src/components/Chip/Chips.tsx
index 9058ea989c..fc06ef6280 100644
--- a/packages/react/src/components/Chip/Chips.tsx
+++ b/packages/react/src/components/Chip/Chips.tsx
@@ -27,6 +27,7 @@ export type ChipCheckboxProps = MergeRight<
 
 /**
  * Chip.Button used for interaction
+ *
  * @example
  * <Chip.Button>Click me</Chip.Button>
  */
diff --git a/packages/react/src/components/Details/Details.tsx b/packages/react/src/components/Details/Details.tsx
index 1d065f7b1c..660d420c2c 100644
--- a/packages/react/src/components/Details/Details.tsx
+++ b/packages/react/src/components/Details/Details.tsx
@@ -28,9 +28,13 @@ export type DetailsProps = MergeRight<
      * @default false
      */
     defaultOpen?: boolean;
-    /** Callback function when Details toggles due to click on summary or find in page-search */
+    /**
+     * Callback function when Details toggles due to click on summary or find in page-search
+     */
     onToggle?: (event: Event) => void;
-    /** Content should be one `<Details.Summary>` and `<Details.Content>` */
+    /**
+     * Content should be one `<Details.Summary>` and `<Details.Content>`
+     */
     children?: ReactNode;
   }
 > &
@@ -41,10 +45,11 @@ export type DetailsProps = MergeRight<
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
  * @example
  * <Details>
- *  <DetailsSummary>Header</DetailsSummary>
- *  <DetailsContent>Content</DetailsContent>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
  * </Details>
  */
 export const Details = forwardRef<HTMLDetailsElement, DetailsProps>(
diff --git a/packages/react/src/components/Details/DetailsContent.tsx b/packages/react/src/components/Details/DetailsContent.tsx
index c0e2e58f4b..7b4d03247c 100644
--- a/packages/react/src/components/Details/DetailsContent.tsx
+++ b/packages/react/src/components/Details/DetailsContent.tsx
@@ -5,6 +5,7 @@ export type DetailsContentProps = HTMLAttributes<HTMLDivElement>;
 
 /**
  * Details content component, contains the content of the details item.
+ *
  * @example
  * <DetailsContent>Content</DetailsContent>
  */
diff --git a/packages/react/src/components/Details/DetailsSummary.tsx b/packages/react/src/components/Details/DetailsSummary.tsx
index 0713c34c92..0e3ddcea00 100644
--- a/packages/react/src/components/Details/DetailsSummary.tsx
+++ b/packages/react/src/components/Details/DetailsSummary.tsx
@@ -8,6 +8,7 @@ export type DetailsSummaryProps = {
 
 /**
  * Details summary component, contains a the heading to toggle the content.
+ *
  * @example
  * <Details.Summary>Heading</Details.Summary>
  */
diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/Divider/Divider.tsx
index 0cc83653d3..d7844b8126 100644
--- a/packages/react/src/components/Divider/Divider.tsx
+++ b/packages/react/src/components/Divider/Divider.tsx
@@ -4,6 +4,12 @@ import { forwardRef } from 'react';
 
 export type DividerProps = HTMLAttributes<HTMLHRElement>;
 
+/**
+ * Divider component, used to separate content.
+ *
+ * @example
+ * <Divider />
+ */
 export const Divider = forwardRef<HTMLHRElement, DividerProps>(function Divider(
   { className, ...rest },
   ref,
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 6b9f0607a5..46d184cca2 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -10,13 +10,30 @@ import type { PopoverProps } from '../Popover';
 export type DropdownProps = MergeRight<
   DefaultProps & Omit<PopoverProps, 'variant'>,
   {
-    /** The placement of the dropdown
+    /**
+     * The placement of the dropdown
      * @default bottom-end
      */
     placement?: Placement;
   }
 >;
 
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
+ * </Dropdown.TriggerContext>
+ */
 export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   function DropdownContent(
     { placement = 'bottom-end', className, ...rest },
diff --git a/packages/react/src/components/Dropdown/DropdownTriggerContext.tsx b/packages/react/src/components/Dropdown/DropdownTriggerContext.tsx
index 4963e78baa..d56b33ae69 100644
--- a/packages/react/src/components/Dropdown/DropdownTriggerContext.tsx
+++ b/packages/react/src/components/Dropdown/DropdownTriggerContext.tsx
@@ -8,13 +8,16 @@ export type DropdownTriggerContextProps = {
 
 /**
  * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
+ *
  * @example
  * <Dropdown.TriggerContext>
  *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
  *  <Dropdown>
  *   <Dropdown.Heading>Heading</Dropdown.Heading>
  *    <Dropdown.List>
- *      <Dropdown.Item>Button 1</Dropdown.Item>
+ *      <Dropdown.Item>
+ *        <Dropdown.Button>Button</Dropdown.Button>
+ *      </Dropdown.Item>
  *    </Dropdown.List>
  *  </Dropdown>
  * </Dropdown.TriggerContext>
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx b/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
index 15ab25cbcc..3398c581d4 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
@@ -18,6 +18,18 @@ export type ErrorSummaryProps = Omit<
   'data-color'
 >;
 
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>Error 1</ErrorSummary.Item>
+ *     <ErrorSummary.Item>Error 2</ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
 export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   function ErrorSummary(
     {

From 04c2e88523d93ca4420a0817338a1ea35eb4c1a7 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 22 Jan 2025 09:28:21 +0100
Subject: [PATCH 02/10] go over more jsdoc

---
 .../react/src/components/Button/Button.tsx    |  2 +-
 .../components/ErrorSummary/ErrorSummary.tsx  |  4 +-
 .../ErrorSummary/ErrorSummaryItem.tsx         |  6 +++
 packages/react/src/components/Field/Field.tsx | 14 ++++-
 .../react/src/components/Field/FieldAffix.tsx | 21 ++++++++
 .../src/components/Field/FieldCounter.tsx     | 25 +++++++--
 .../src/components/Fieldset/Fieldset.tsx      | 15 ++++++
 .../Fieldset/FieldsetDescription.tsx          |  8 +++
 .../components/Fieldset/FieldsetLegend.tsx    |  6 +++
 .../react/src/components/Heading/Heading.tsx  |  4 +-
 packages/react/src/components/Input/Input.tsx | 17 +++---
 packages/react/src/components/Label/Label.tsx |  2 +-
 packages/react/src/components/Link/Link.tsx   |  8 ++-
 packages/react/src/components/List/Lists.tsx  | 18 +++++++
 packages/react/src/components/Modal/Modal.tsx | 17 ++++++
 .../react/src/components/Modal/ModalBlock.tsx | 16 ++++++
 .../src/components/Modal/ModalTrigger.tsx     | 11 ++++
 .../components/Modal/ModalTriggerContext.tsx  | 11 ++++
 .../src/components/Pagination/Pagination.tsx  | 18 +++++++
 .../Pagination/PaginationButton.tsx           |  8 +++
 .../components/Pagination/PaginationItem.tsx  | 10 ++++
 .../components/Pagination/PaginationList.tsx  | 12 +++++
 .../components/Pagination/usePagination.ts    | 30 ++++++++++-
 .../react/src/components/Popover/Popover.tsx  | 25 ++++++---
 .../src/components/Popover/PopoverTrigger.tsx | 33 ++++++++++++
 .../Popover/PopoverTriggerContext.tsx         | 11 ++++
 packages/react/src/components/Radio/Radio.tsx | 21 ++++++--
 .../react/src/components/Search/Search.tsx    | 16 ++++++
 .../src/components/Search/SearchButton.tsx    | 17 +++++-
 .../src/components/Search/SearchClear.tsx     |  9 ++++
 .../src/components/Search/SearchInput.tsx     |  8 +++
 .../react/src/components/Select/Select.tsx    | 15 +++++-
 .../src/components/Select/SelectOptgroup.tsx  | 11 ++++
 .../src/components/Select/SelectOption.tsx    |  9 ++++
 .../src/components/Skeleton/Skeleton.tsx      | 25 +++++----
 .../src/components/SkipLink/SkipLink.tsx      | 16 ++++--
 .../react/src/components/Spinner/Spinner.tsx  | 11 +++-
 .../react/src/components/Switch/Switch.tsx    | 20 +++++--
 packages/react/src/components/Table/Table.tsx | 33 ++++++++++--
 .../react/src/components/Table/TableBody.tsx  | 11 ++++
 .../react/src/components/Table/TableCell.tsx  |  6 +++
 .../react/src/components/Table/TableFoot.tsx  | 11 ++++
 .../react/src/components/Table/TableHead.tsx  | 11 ++++
 .../src/components/Table/TableHeaderCell.tsx  |  6 +++
 .../react/src/components/Table/TableRow.tsx   |  9 ++++
 packages/react/src/components/Tabs/Tabs.tsx   | 18 +++++--
 .../react/src/components/Tabs/TabsList.tsx    |  3 +-
 .../react/src/components/Tabs/TabsPanel.tsx   |  8 +--
 .../react/src/components/Tabs/TabsTab.tsx     |  5 +-
 packages/react/src/components/Tag/Tag.tsx     |  5 +-
 .../src/components/Textarea/Textarea.tsx      |  5 +-
 .../src/components/Textfield/Textfield.tsx    | 54 +++++++++++++------
 .../components/ToggleGroup/ToggleGroup.tsx    | 17 ++++--
 .../react/src/components/Tooltip/Tooltip.tsx  |  5 +-
 .../ValidationMessage/ValidationMessage.tsx   |  7 ++-
 55 files changed, 644 insertions(+), 100 deletions(-)

diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index c359d0f21e..38a2e15872 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -11,7 +11,7 @@ export type ButtonProps = MergeRight<
   {
     /**
      * Specify which variant to use
-     * @default primary
+     * @default 'primary'
      */
     variant?: 'primary' | 'secondary' | 'tertiary';
     /**
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx b/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
index 3398c581d4..6e820e0fdc 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
@@ -25,8 +25,8 @@ export type ErrorSummaryProps = Omit<
  * <ErrorSummary>
  *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
  *   <ErrorSummary.List>
- *     <ErrorSummary.Item>Error 1</ErrorSummary.Item>
- *     <ErrorSummary.Item>Error 2</ErrorSummary.Item>
+ *     <ErrorSummary.Item href='#'>Error 1</ErrorSummary.Item>
+ *     <ErrorSummary.Item href='#'>Error 2</ErrorSummary.Item>
  *   </ErrorSummary.List>
  * </ErrorSummary>
  */
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryItem.tsx b/packages/react/src/components/ErrorSummary/ErrorSummaryItem.tsx
index c1af1940e5..249675a24a 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryItem.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummaryItem.tsx
@@ -25,6 +25,12 @@ type OptionalHref = {
 export type ErrorSummaryItemProps = (RequiredHref | OptionalHref) &
   Omit<ListItemProps, 'asChild' | 'ref'>;
 
+/**
+ * ErrorSummaryItem component, used to display an error link in the ErrorSummary.
+ *
+ * @example
+ * <ErrorSummary.Item href='#'>Link to error</ErrorSummary.Item>
+ */
 export const ErrorSummaryItem = forwardRef<
   HTMLLIElement,
   ErrorSummaryItemProps
diff --git a/packages/react/src/components/Field/Field.tsx b/packages/react/src/components/Field/Field.tsx
index 98c7c4995e..8cedd6ccf3 100644
--- a/packages/react/src/components/Field/Field.tsx
+++ b/packages/react/src/components/Field/Field.tsx
@@ -6,13 +6,25 @@ import type { DefaultProps } from '../../types';
 import { fieldObserver } from './fieldObserver';
 
 export type FieldProps = {
-  /** Position of toggle inputs (radio, checkbox, switch) in field
+  /**
+   * Position of toggle inputs (radio, checkbox, switch) in field
    * @default start
    */
   position?: 'start' | 'end';
 } & HTMLAttributes<HTMLDivElement> &
   DefaultProps;
 
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field data-my-field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
 export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
   { className, position, ...rest },
   ref,
diff --git a/packages/react/src/components/Field/FieldAffix.tsx b/packages/react/src/components/Field/FieldAffix.tsx
index eaff8a26de..05e2234a75 100644
--- a/packages/react/src/components/Field/FieldAffix.tsx
+++ b/packages/react/src/components/Field/FieldAffix.tsx
@@ -4,6 +4,16 @@ import { forwardRef } from 'react';
 
 export type FieldAffixesProps = Omit<HTMLAttributes<HTMLDivElement>, 'prefix'>;
 
+/**
+ * FieldAffixes component, used to wrap a form field.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
 export const FieldAffixes = forwardRef<HTMLDivElement, FieldAffixesProps>(
   function FieldAffixes({ className, ...rest }, ref) {
     return (
@@ -14,6 +24,17 @@ export const FieldAffixes = forwardRef<HTMLDivElement, FieldAffixesProps>(
 
 export type FieldAffixProps = Omit<HTMLAttributes<HTMLDivElement>, 'prefix'>;
 
+/**
+ * FieldAffix component, used to wrap a form field.
+ * Use together with Field.Affixes.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
 export const FieldAffix = forwardRef<HTMLSpanElement, FieldAffixProps>(
   function FieldAffix({ className, ...rest }, ref) {
     return (
diff --git a/packages/react/src/components/Field/FieldCounter.tsx b/packages/react/src/components/Field/FieldCounter.tsx
index 8ab9a49cf6..5cb6af616a 100644
--- a/packages/react/src/components/Field/FieldCounter.tsx
+++ b/packages/react/src/components/Field/FieldCounter.tsx
@@ -7,21 +7,40 @@ import {
 import { isInputLike } from './fieldObserver';
 
 export type FieldCounterProps = {
-  /** Label template for when `maxCount` is exceeded
+  /**
+   * Label template for when `maxCount` is exceeded.
+   * Use `%d` to insert the number of characters.
+   *
    * @default '%d tegn for mye'
    */
   over?: string;
-  /** Label template for count
+  /**
+   * Label template for count.
+   * Use `%d` to insert the number of characters.
+   *
    * @default '%d tegn igjen'
    */
   under?: string;
-  /** The maximum allowed characters. */
+  /**
+   * The maximum allowed characters.
+   *
+   * @default undefined
+   **/
   limit: number;
 } & ValidationMessageProps;
 
 const label = (text: string, count: number) =>
   text.replace('%d', Math.abs(count).toString());
 
+/**
+ * FieldCounter component, used to display a counter for a form field.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+ * </Field>
+ */
 export const FieldCounter = forwardRef<HTMLParagraphElement, FieldCounterProps>(
   function FieldCounter(
     { limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest },
diff --git a/packages/react/src/components/Fieldset/Fieldset.tsx b/packages/react/src/components/Fieldset/Fieldset.tsx
index 21cf8170a2..b4ab4a726b 100644
--- a/packages/react/src/components/Fieldset/Fieldset.tsx
+++ b/packages/react/src/components/Fieldset/Fieldset.tsx
@@ -7,6 +7,21 @@ import type { DefaultProps } from '../../types';
 export type FieldsetProps = DefaultProps &
   FieldsetHTMLAttributes<HTMLFieldSetElement>;
 
+/**
+ * Fieldset component, used to wrap a form field.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
   function Fieldset({ className, ...rest }, ref) {
     return (
diff --git a/packages/react/src/components/Fieldset/FieldsetDescription.tsx b/packages/react/src/components/Fieldset/FieldsetDescription.tsx
index e9dc7d5960..07f83d5b10 100644
--- a/packages/react/src/components/Fieldset/FieldsetDescription.tsx
+++ b/packages/react/src/components/Fieldset/FieldsetDescription.tsx
@@ -4,6 +4,14 @@ import { Paragraph, type ParagraphProps } from '../Paragraph/Paragraph';
 
 export type FieldsetDescriptionProps = ParagraphProps;
 
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <Fieldset.Description>
+ *   Gi en kort beskrivelse i begge feltene
+ * </Fieldset.Description>
+ */
 export const FieldsetDescription = forwardRef<
   HTMLLegendElement,
   FieldsetDescriptionProps
diff --git a/packages/react/src/components/Fieldset/FieldsetLegend.tsx b/packages/react/src/components/Fieldset/FieldsetLegend.tsx
index 52dac5da4b..b85b825a6a 100644
--- a/packages/react/src/components/Fieldset/FieldsetLegend.tsx
+++ b/packages/react/src/components/Fieldset/FieldsetLegend.tsx
@@ -6,6 +6,12 @@ import { Label } from '../Label/Label';
 export type FieldsetLegendProps = HTMLAttributes<HTMLLegendElement> &
   DefaultProps;
 
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ */
 export const FieldsetLegend = forwardRef<
   HTMLLegendElement,
   FieldsetLegendProps
diff --git a/packages/react/src/components/Heading/Heading.tsx b/packages/react/src/components/Heading/Heading.tsx
index 34c827c509..058ae929bc 100644
--- a/packages/react/src/components/Heading/Heading.tsx
+++ b/packages/react/src/components/Heading/Heading.tsx
@@ -9,7 +9,9 @@ export type HeadingProps = {
    * @default 2
    */
   level?: 1 | 2 | 3 | 4 | 5 | 6;
-  /** Changes text sizing
+  /**
+   * Changes text sizing
+   * @default 'md'
    */
   'data-size'?:
     | '2xs'
diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx
index d2787543d4..9504009305 100644
--- a/packages/react/src/components/Input/Input.tsx
+++ b/packages/react/src/components/Input/Input.tsx
@@ -36,17 +36,22 @@ export type InputProps = MergeRight<
       | 'time'
       | 'url'
       | 'week';
-
-    /** Defines the width of `Input` in count of characters.
+    /**
+     * Defines the width of `Input` in count of characters.
      */
     size?: number;
-    /** Disables element
+    /**
+     * Disables element
      * @note Avoid using if possible for accessibility purposes
      */
     disabled?: boolean;
-    /** Toggle `readOnly` */
+    /**
+     * Toggle `readOnly`
+     **/
     readOnly?: boolean;
-    /** Set role, i.e. `switch` when `checkbox` or `radio` */
+    /**
+     * Set role, i.e. `switch` when `checkbox` or `radio`
+     **/
     role?: InputAttr['role'];
   }
 >;
@@ -54,9 +59,7 @@ export type InputProps = MergeRight<
 /** Input field
  *
  * @example
- * ```tsx
  * <Input />
- * ```
  */
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   { type = 'text', className, onChange, onClick, ...rest },
diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx
index 9268bbd3e6..85012299b4 100644
--- a/packages/react/src/components/Label/Label.tsx
+++ b/packages/react/src/components/Label/Label.tsx
@@ -22,7 +22,7 @@ export type LabelProps = {
  * Use `Label` for labels.
  *
  * @example
- * <Label data-size='lg'>Label</Label>
+ * <Label data-size='lg' weight='medium'>Label</Label>
  */
 export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
   { className, weight = 'medium', asChild, ...rest },
diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx
index fd1c9f52d1..47eb213757 100644
--- a/packages/react/src/components/Link/Link.tsx
+++ b/packages/react/src/components/Link/Link.tsx
@@ -8,12 +8,10 @@ import type { MergeRight } from '../../utilities';
 export type LinkProps = MergeRight<
   DefaultProps & AnchorHTMLAttributes<HTMLAnchorElement>,
   {
-    /** The content to display inside the link. */
+    /**
+     * The content to display inside the link.
+     **/
     children: ReactNode;
-    /** Custom class name for the link. This will be appended to the design system class names. */
-    className?: string;
-    /** The URL that the link points to. This can also be an email address (starting with `mailto:`) or a phone number (staring with `tel:`). */
-    href?: string;
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false
diff --git a/packages/react/src/components/List/Lists.tsx b/packages/react/src/components/List/Lists.tsx
index f193a6ee08..f9fd3e3258 100644
--- a/packages/react/src/components/List/Lists.tsx
+++ b/packages/react/src/components/List/Lists.tsx
@@ -28,12 +28,30 @@ const render = <T extends HTMLElement>(
   return <Component className={cl(`ds-list`, className)} ref={ref} {...rest} />;
 };
 
+/**
+ * ListUnordered component, used to display a list of items.
+ *
+ * @example
+ * <List.Unordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Unordered>
+ */
 export const ListUnordered = forwardRef<HTMLUListElement, ListUnorderedProps>(
   function ListUnordered(props, ref) {
     return render<HTMLUListElement>('ul', props, ref);
   },
 );
 
+/**
+ * ListOrdered component, used to display a list of items.
+ *
+ * @example
+ * <List.Ordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Ordered>
+ */
 export const ListOrdered = forwardRef<HTMLOListElement, ListOrderedProps>(
   function ListOrdered(props, ref) {
     return render<HTMLOListElement>('ol', props, ref);
diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
index 235d5b6a8e..a6c7947ac7 100644
--- a/packages/react/src/components/Modal/Modal.tsx
+++ b/packages/react/src/components/Modal/Modal.tsx
@@ -26,10 +26,27 @@ export type ModalProps = MergeRight<
      * Callback that is called when the modal is closed.
      */
     onClose?: (event: Event) => void;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
     asChild?: boolean;
   }
 >;
 
+/**
+ * Modal component, used to display a modal dialog.
+ *
+ * @example
+ * <Modal.TriggerContext>
+ *   <Modal.Trigger>Open Modal</Modal.Trigger>
+ *   <Modal>
+ *     <Modal.Block>
+ *       Content
+ *     </Modal.Block>
+ *   </Modal>
+ * </Modal.TriggerContext>
+ */
 export const Modal = forwardRef<HTMLDialogElement, ModalProps>(function Modal(
   {
     asChild,
diff --git a/packages/react/src/components/Modal/ModalBlock.tsx b/packages/react/src/components/Modal/ModalBlock.tsx
index 3f044e9474..9625d48995 100644
--- a/packages/react/src/components/Modal/ModalBlock.tsx
+++ b/packages/react/src/components/Modal/ModalBlock.tsx
@@ -11,6 +11,22 @@ export type ModalBlockProps = {
   asChild?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
+/**
+ * ModalBlock component, used to separate content in a modal.
+ *
+ * @example
+ * <Modal>
+ *   <Modal.Block>
+ *     Header
+ *   </Modal.Block>
+ *   <Modal.Block>
+ *     Content
+ *   </Modal.Block>
+ *   <Modal.Block>
+ *     Footer
+ *   </Modal.Block>
+ * </Modal>
+ */
 export const ModalBlock = forwardRef<HTMLDivElement, ModalBlockProps>(
   function ModalBlock({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
diff --git a/packages/react/src/components/Modal/ModalTrigger.tsx b/packages/react/src/components/Modal/ModalTrigger.tsx
index fded97ac32..277588f368 100644
--- a/packages/react/src/components/Modal/ModalTrigger.tsx
+++ b/packages/react/src/components/Modal/ModalTrigger.tsx
@@ -7,6 +7,17 @@ import { Context } from './ModalTriggerContext';
 
 export type ModalTriggerProps = ComponentPropsWithRef<typeof Button>;
 
+/**
+ * ModalTrigger component, used within a Modal.TriggerContext to open a modal.
+ *
+ * @example
+ * <Modal.TriggerContext>
+ *   <Modal.Trigger>Open Modal</Modal.Trigger>
+ *   <Modal>
+ *     Content
+ *   </Modal>
+ * </Modal.TriggerContext>
+ */
 export const ModalTrigger = forwardRef<HTMLButtonElement, ModalTriggerProps>(
   function ModalTrigger({ asChild, ...rest }, ref) {
     const contextRef = useContext(Context);
diff --git a/packages/react/src/components/Modal/ModalTriggerContext.tsx b/packages/react/src/components/Modal/ModalTriggerContext.tsx
index 2515dcc5ca..4e465eb6ad 100644
--- a/packages/react/src/components/Modal/ModalTriggerContext.tsx
+++ b/packages/react/src/components/Modal/ModalTriggerContext.tsx
@@ -7,6 +7,17 @@ export const Context = createContext<RefObject<HTMLDialogElement | null>>({
 
 export type ModalTriggerContextProps = { children: ReactNode };
 
+/**
+ * ModalTriggerContext component, used to provide a context for a modal trigger.
+ *
+ * @example
+ * <Modal.TriggerContext>
+ *   <Modal.Trigger>Open Modal</Modal.Trigger>
+ *   <Modal>
+ *     Content
+ *   </Modal>
+ * </Modal.TriggerContext>
+ */
 export const ModalTriggerContext = ({ children }: ModalTriggerContextProps) => {
   const contextRef = useRef<HTMLDialogElement>(null);
 
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
index ae07ffb797..2d27f4c50f 100644
--- a/packages/react/src/components/Pagination/Pagination.tsx
+++ b/packages/react/src/components/Pagination/Pagination.tsx
@@ -21,6 +21,24 @@ export type PaginationProps = MergeRight<
   }
 >;
 
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
 export const Pagination = forwardRef<HTMLElement, PaginationProps>(
   function Pagination(
     { 'aria-label': ariaLabel = 'Sidenavigering', asChild, className, ...rest },
diff --git a/packages/react/src/components/Pagination/PaginationButton.tsx b/packages/react/src/components/Pagination/PaginationButton.tsx
index c3923ce1ab..83492fb01a 100644
--- a/packages/react/src/components/Pagination/PaginationButton.tsx
+++ b/packages/react/src/components/Pagination/PaginationButton.tsx
@@ -10,6 +10,14 @@ export type PaginationButtonProps = {
   'aria-current'?: AriaAttributes['aria-current'];
 } & Omit<ButtonProps, 'icon' | 'loading'>;
 
+/**
+ * PaginationButton component, use within a Pagination.Item.
+ *
+ * @example
+ * <Pagination.Item>
+ *   <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ * </Pagination.Item>
+ */
 export const PaginationButton = forwardRef<
   HTMLButtonElement,
   PaginationButtonProps
diff --git a/packages/react/src/components/Pagination/PaginationItem.tsx b/packages/react/src/components/Pagination/PaginationItem.tsx
index 11d6913a80..770b9f0456 100644
--- a/packages/react/src/components/Pagination/PaginationItem.tsx
+++ b/packages/react/src/components/Pagination/PaginationItem.tsx
@@ -9,6 +9,16 @@ export type PaginationItemProps = {
   asChild?: boolean;
 } & Omit<HTMLAttributes<HTMLLIElement>, 'size'>;
 
+/**
+ * PaginationItem component, use within a Pagination.List.
+ *
+ * @example
+ * <Pagination.List>
+ *   <Pagination.Item>
+ *     <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination.List>
+ */
 export const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(
   function PaginationItem({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'li';
diff --git a/packages/react/src/components/Pagination/PaginationList.tsx b/packages/react/src/components/Pagination/PaginationList.tsx
index 4cb627d9e9..fcc5f4b031 100644
--- a/packages/react/src/components/Pagination/PaginationList.tsx
+++ b/packages/react/src/components/Pagination/PaginationList.tsx
@@ -10,6 +10,18 @@ export type PaginationListProps = {
   asChild?: boolean;
 } & Omit<HTMLAttributes<HTMLUListElement>, 'size'>;
 
+/**
+ * PaginationList component, use within a Pagination.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
 export const PaginationList = forwardRef<HTMLUListElement, PaginationListProps>(
   function PaginationList({ asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'ul';
diff --git a/packages/react/src/components/Pagination/usePagination.ts b/packages/react/src/components/Pagination/usePagination.ts
index 09b1f529f0..deb606625b 100644
--- a/packages/react/src/components/Pagination/usePagination.ts
+++ b/packages/react/src/components/Pagination/usePagination.ts
@@ -41,7 +41,35 @@ export type UsePaginationProps = {
   showPages?: number;
 };
 
-/** Hook to help manage pagination state */
+/**
+ * Hook to help manage pagination state
+ *
+ * @example
+ * const { pages, nextButtonProps, prevButtonProps } = usePagination({
+ *   currentPage: page,
+ *   totalPages: 10,
+ *   showPages: 7,
+ *   setCurrentPage,
+ * })
+ *
+ * <Pagination>
+ *   <Pagination.Item>
+ *     <Pagination.Button {...prevButtonProps}>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ *   {pages.map(({ page, itemKey, buttonProps }) => (
+ *     <Pagination.Item key={itemKey}>
+ *       {typeof page === 'number' && (
+ *         <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+ *           {page}
+ *         </Pagination.Button>
+ *       )}
+ *     </Pagination.Item>
+ *   ))}
+ *   <Pagination.Item>
+ *     <Pagination.Button {...nextButtonProps}>Neste</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination>
+ **/
 export const usePagination = ({
   currentPage = 1,
   setCurrentPage,
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
index 7401535d32..9c58386c76 100644
--- a/packages/react/src/components/Popover/Popover.tsx
+++ b/packages/react/src/components/Popover/Popover.tsx
@@ -35,17 +35,16 @@ export type PopoverProps = MergeRight<
   DefaultProps & HTMLAttributes<HTMLDivElement>,
   {
     /**
-     * id to connect the trigger with the popover - required when used without Popover.Context.
+     * id to connect the trigger with the popover - required when not using Popover.Context.
      */
     id?: string;
     /**
-     * Placement of the tooltip on the trigger.
-     * @default top
+     * Placement of the popover on the trigger.
+     * @default 'top'
      */
     placement?: Placement;
-
     /**
-     * Use this to make the popover controlled.
+     * When a boolean is provided, the popover will be controlled.
      * @default undefined
      */
     open?: boolean;
@@ -62,11 +61,25 @@ export type PopoverProps = MergeRight<
      * @default true
      */
     autoPlacement?: boolean;
-
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
     asChild?: boolean;
   }
 >;
 
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
 export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   function Popover(
     {
diff --git a/packages/react/src/components/Popover/PopoverTrigger.tsx b/packages/react/src/components/Popover/PopoverTrigger.tsx
index 86c387eea0..ed27436816 100644
--- a/packages/react/src/components/Popover/PopoverTrigger.tsx
+++ b/packages/react/src/components/Popover/PopoverTrigger.tsx
@@ -6,14 +6,47 @@ import { Context } from './PopoverTriggerContext';
 
 export type PopoverTriggerProps =
   | ({
+      /**
+       * Will render the trigger as inline text.
+       * @default false
+       */
       inline?: true;
+      /**
+       * Change the default rendered element for the one passed as a child, merging their props and behavior.
+       * @default false
+       */
       asChild?: boolean;
     } & HTMLAttributes<HTMLButtonElement> &
       DefaultProps)
   | ({
+      /**
+       * Will render the trigger as inline text.
+       * @default false
+       */
       inline?: false;
     } & ButtonProps);
 
+/**
+ * PopoverTrigger component, used to trigger a popover.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example inline
+ * <Popover.TriggerContext>
+ *   <Paragraph>
+ *    We can use it <Popover.Trigger inline={true}>inline</Popover.Trigger>.
+ *   </Paragraph>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
 export const PopoverTrigger = forwardRef<
   HTMLButtonElement,
   PopoverTriggerProps
diff --git a/packages/react/src/components/Popover/PopoverTriggerContext.tsx b/packages/react/src/components/Popover/PopoverTriggerContext.tsx
index 8c71713dc0..479c739c8f 100644
--- a/packages/react/src/components/Popover/PopoverTriggerContext.tsx
+++ b/packages/react/src/components/Popover/PopoverTriggerContext.tsx
@@ -5,6 +5,17 @@ export type PopoverTriggerContextProps = {
   children: ReactNode;
 };
 
+/**
+ * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
 export const PopoverTriggerContext = ({
   children,
 }: PopoverTriggerContextProps) => {
diff --git a/packages/react/src/components/Radio/Radio.tsx b/packages/react/src/components/Radio/Radio.tsx
index 831625b2a2..9018606ef2 100644
--- a/packages/react/src/components/Radio/Radio.tsx
+++ b/packages/react/src/components/Radio/Radio.tsx
@@ -10,21 +10,32 @@ import { ValidationMessage } from '../ValidationMessage';
 export type RadioProps = MergeRight<
   DefaultProps & Omit<InputProps, 'type' | 'role' | 'size'>,
   {
-    /** Optional aria-label */
+    /**
+     * Optional aria-label
+     **/
     'aria-label'?: string;
-    /** Radio label */
+    /**
+     * Radio label
+     */
     label?: ReactNode;
-    /** Description for field */
+    /**
+     * Description for field
+     */
     description?: ReactNode;
-    /** Value of the `input` element */
+    /**
+     * Value of the `input` element
+     */
     value?: InputProps['value'];
-    /** Validation message for field */
+    /**
+     * Validation message for field
+     */
     validation?: ReactNode;
   } & LabelRequired
 >;
 
 /**
  * Radio used to select multiple options.
+ *
  * @example
  * <Radio label="I agree" value="agree" />
  */
diff --git a/packages/react/src/components/Search/Search.tsx b/packages/react/src/components/Search/Search.tsx
index b669a222a6..f486ef3f2b 100644
--- a/packages/react/src/components/Search/Search.tsx
+++ b/packages/react/src/components/Search/Search.tsx
@@ -5,6 +5,22 @@ import type { DefaultProps } from '../../types';
 
 export type SearchProps = DefaultProps & React.HTMLAttributes<HTMLDivElement>;
 
+/**
+ * Search component, use ti display different variations of a search input
+ *
+ * @example with button
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
 export const Search = forwardRef<HTMLDivElement, SearchProps>(function Search(
   { className, ...rest },
   ref,
diff --git a/packages/react/src/components/Search/SearchButton.tsx b/packages/react/src/components/Search/SearchButton.tsx
index ed1390ddc7..cd91a6d726 100644
--- a/packages/react/src/components/Search/SearchButton.tsx
+++ b/packages/react/src/components/Search/SearchButton.tsx
@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { type ReactNode, forwardRef } from 'react';
 
 import type { MergeRight } from '../../utilities';
 import { Button, type ButtonProps } from '../Button';
@@ -6,15 +6,28 @@ import { Button, type ButtonProps } from '../Button';
 export type SearchButtonProps = MergeRight<
   ButtonProps,
   {
+    /**
+     * Variant of the button
+     * @default 'primary'
+     */
     variant?: 'primary' | 'secondary';
     /**
      * Children of the button
      * @default 'Søk'
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
   }
 >;
 
+/**
+ * SearchButton component, used to display a search button within a Search component.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Button>Søk</Search.Button>
+ * </Search>
+ */
 export const SearchButton = forwardRef<HTMLButtonElement, ButtonProps>(
   function SearchButton({ children = 'Søk', ...rest }, ref) {
     return (
diff --git a/packages/react/src/components/Search/SearchClear.tsx b/packages/react/src/components/Search/SearchClear.tsx
index 1383eaac89..84e24a8f43 100644
--- a/packages/react/src/components/Search/SearchClear.tsx
+++ b/packages/react/src/components/Search/SearchClear.tsx
@@ -11,6 +11,15 @@ export type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'> & {
   'aria-label'?: string;
 };
 
+/**
+ * SearchClear component, used to display a clear buttun when the search input is not empty.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
 export const SearchClear = forwardRef<HTMLButtonElement, SearchClearProps>(
   function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
     const handleClear = (
diff --git a/packages/react/src/components/Search/SearchInput.tsx b/packages/react/src/components/Search/SearchInput.tsx
index 5062aa1146..ba3cd1360d 100644
--- a/packages/react/src/components/Search/SearchInput.tsx
+++ b/packages/react/src/components/Search/SearchInput.tsx
@@ -5,6 +5,14 @@ import { Input } from '../Input';
 export type SearchInputProps = DefaultProps &
   Omit<React.InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'type'>;
 
+/**
+ * SearchInput component, used to display a search input within the Search component.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ * </Search>
+ */
 export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
   function SearchInput({ ...rest }, ref) {
     return (
diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
index f591f3033e..509f6b9af1 100644
--- a/packages/react/src/components/Select/Select.tsx
+++ b/packages/react/src/components/Select/Select.tsx
@@ -8,17 +8,28 @@ export type SelectProps = MergeRight<
   Omit<DefaultProps, 'data-color'> &
     Omit<SelectHTMLAttributes<HTMLSelectElement>, 'multiple' | 'size'>, // Also Omit size as this sets amount of visible options in multiselect
   {
-    /** Defines if the select is readOnly
+    /**
+     * Defines if the select is readOnly
      * @default false
      */
     readOnly?: boolean;
-    /** Defines the width of Select, where "auto" matches the content width.
+    /**
+     * Defines the width of Select, where "auto" matches the content width.
      * @default full
      */
     width?: 'full' | 'auto';
   }
 >;
 
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
   function Select({ className, onKeyDown, onMouseDown, width, ...rest }, ref) {
     return (
diff --git a/packages/react/src/components/Select/SelectOptgroup.tsx b/packages/react/src/components/Select/SelectOptgroup.tsx
index e57a19494b..d39ab95570 100644
--- a/packages/react/src/components/Select/SelectOptgroup.tsx
+++ b/packages/react/src/components/Select/SelectOptgroup.tsx
@@ -10,6 +10,17 @@ export type SelectOptgroupProps = {
   asChild?: boolean;
 } & OptgroupHTMLAttributes<HTMLOptGroupElement>;
 
+/**
+ * SelectOptgroup component, used to display a native optgroup within a select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Optgroup label='Group 1'>
+ *     <Select.Option value='1'>Option 1</Select.Option>
+ *     <Select.Option value='2'>Option 2</Select.Option>
+ *   </Select.Optgroup>
+ * </Select>
+ */
 export const SelectOptgroup = forwardRef<
   HTMLOptGroupElement,
   SelectOptgroupProps
diff --git a/packages/react/src/components/Select/SelectOption.tsx b/packages/react/src/components/Select/SelectOption.tsx
index 8a5ab1b6cd..de09d7b41b 100644
--- a/packages/react/src/components/Select/SelectOption.tsx
+++ b/packages/react/src/components/Select/SelectOption.tsx
@@ -10,6 +10,15 @@ export type SelectOptionProps = {
   asChild?: boolean;
 } & OptionHTMLAttributes<HTMLOptionElement>;
 
+/**
+ * SelectOption component, used to display a native option within a select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
 export const SelectOption = forwardRef<HTMLOptionElement, SelectOptionProps>(
   function SelectOption({ asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'option';
diff --git a/packages/react/src/components/Skeleton/Skeleton.tsx b/packages/react/src/components/Skeleton/Skeleton.tsx
index 4e5e0bc267..9d2cfc1049 100644
--- a/packages/react/src/components/Skeleton/Skeleton.tsx
+++ b/packages/react/src/components/Skeleton/Skeleton.tsx
@@ -7,19 +7,23 @@ import { useSynchronizedAnimation } from '../../utilities';
 
 export type SkeletonProps = {
   /**
-   * Change the default rendered element for the one passed as a child, merging their props and behavior.
-   * @default false
+   * The width of the component
    */
-  asChild?: boolean;
-  /** The width of the component */
   width?: string | number;
-  /** The height of the component */
+  /**
+   * The height of the component
+   */
   height?: string | number;
   /**
    * The shape variant
    * @default 'rectangle'
-   * */
+   */
   variant?: 'rectangle' | 'circle' | 'text';
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
 } & HTMLAttributes<HTMLSpanElement> &
   (
     | { variant: 'text'; characters?: number }
@@ -27,11 +31,12 @@ export type SkeletonProps = {
   );
 
 /**
- * Represent a draft of page while the content loads. Mix different skeleton components to create your layout.
+ * Skeleton is used to represent a draft of page while the content loads.
+ *
  * @example
- *   <Skeleton variant="circle" />
- *   <Skeleton variant="text" />
- *   <Skeleton variant="rectangle" />
+ * <Skeleton variant="circle" />
+ * <Skeleton variant="text" />
+ * <Skeleton variant="rectangle" />
  */
 export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
   function Skeleton(
diff --git a/packages/react/src/components/SkipLink/SkipLink.tsx b/packages/react/src/components/SkipLink/SkipLink.tsx
index 34a12beffa..0e2ed00d81 100644
--- a/packages/react/src/components/SkipLink/SkipLink.tsx
+++ b/packages/react/src/components/SkipLink/SkipLink.tsx
@@ -6,14 +6,24 @@ import type { MergeRight } from '../../utilities';
 export type SkipLinkProps = MergeRight<
   DefaultProps & AnchorHTMLAttributes<HTMLAnchorElement>,
   {
-    /** The content to display inside the skiplink. */
+    /**
+     * The content to display inside the skiplink.
+     */
     children: ReactNode;
-
-    /** Href of an element in the DOM the skiplink should skip to. E.g #main-content */
+    /**
+     * Href of an element in the DOM the skiplink should skip to. E.g #main-content
+     */
     href: string;
   }
 >;
 
+/**
+ * SkipLink component, used to display a skip link within the page.
+ * Place it at the top of the page to allow users to skip to the main content.
+ *
+ * @example
+ * <SkipLink href='#main-content'>Skip to main content</SkipLink>
+ */
 export const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(
   function SkipLink({ children, className, ...rest }, ref) {
     return (
diff --git a/packages/react/src/components/Spinner/Spinner.tsx b/packages/react/src/components/Spinner/Spinner.tsx
index 40fd44999c..cf82637f55 100644
--- a/packages/react/src/components/Spinner/Spinner.tsx
+++ b/packages/react/src/components/Spinner/Spinner.tsx
@@ -4,7 +4,9 @@ import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import { useSynchronizedAnimation } from '../../utilities';
 
 export type SpinnerProps = {
-  /** Accessibile label  */
+  /**
+   * Accessibile label
+   */
   'aria-label'?: string;
   /**
    * Spinner size
@@ -16,7 +18,12 @@ export type SpinnerProps = {
     | { 'aria-label'?: string; 'aria-hidden': true | 'true' } // Make aria-label optional when aria-hidden is true
   );
 
-/**  Spinner component used for indicating busy or indeterminate loading */
+/**
+ * Spinner component used for indicating busy or indeterminate loading.
+ *
+ * @example
+ * <Spinner aria-label='Loading users...' />
+ */
 export const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(function Spinner(
   { 'aria-label': ariaLabel, className, ...rest }: SpinnerProps,
   ref,
diff --git a/packages/react/src/components/Switch/Switch.tsx b/packages/react/src/components/Switch/Switch.tsx
index 3dadcced2f..7a231eeda4 100644
--- a/packages/react/src/components/Switch/Switch.tsx
+++ b/packages/react/src/components/Switch/Switch.tsx
@@ -9,15 +9,24 @@ import { Label } from '../Label';
 export type SwitchProps = MergeRight<
   DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>,
   {
-    /** Optional aria-label */
+    /**
+     * Optional aria-label
+     */
     'aria-label'?: string;
-    /** Radio label */
+    /**
+     * Radio label
+     */
     label?: ReactNode;
-    /** Description for field */
+    /**
+     * Description for field
+     */
     description?: ReactNode;
-    /** Value of the `input` element */
+    /**
+     * Value of the `input` element
+     */
     value?: InputProps['value'];
-    /** Position of switch
+    /**
+     * Position of switch
      * @default start
      */
     position?: FieldProps['position'];
@@ -26,6 +35,7 @@ export type SwitchProps = MergeRight<
 
 /**
  * Switch used to toggle options.
+ *
  * @example
  * <Switch label="I agree" value="agree" />
  */
diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx
index df7013ed9d..2fce684a61 100644
--- a/packages/react/src/components/Table/Table.tsx
+++ b/packages/react/src/components/Table/Table.tsx
@@ -5,28 +5,53 @@ import type { DefaultProps } from '../../types';
 
 export type TableProps = {
   /**
-   * If true, the table will have zebra striping
+   * Will give the table zebra striping
    * @default false
    */
   zebra?: boolean;
   /**
-   * If true, the table will have a sticky header
+   * Will make the table header sticky
    * @default false
    */
   stickyHeader?: boolean;
   /**
-   * If true, the table will have a rounded border
+   * Will give the table a rounded border
    * @default false
    */
   border?: boolean;
   /**
-   * If true, the table will have a hover effect on rows
+   * Will give the table a hover effect on rows
    * @default false
    */
   hover?: boolean;
 } & Omit<TableHTMLAttributes<HTMLTableElement>, 'border'> &
   DefaultProps;
 
+/**
+ * Table component, used to display tabular data. Renders a native HTML table element.
+ *
+ * @example
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *       <Table.HeaderCell>Age</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John</Table.Cell>
+ *       <Table.Cell>25</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ *   <Table.Foot>
+ *     <Table.Row>
+ *       <Table.Cell>Total</Table.Cell>
+ *       <Table.Cell>2</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Foot>
+ * </Table>
+ */
 export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
   {
     zebra = false,
diff --git a/packages/react/src/components/Table/TableBody.tsx b/packages/react/src/components/Table/TableBody.tsx
index 6709ea8f31..28ec2eff30 100644
--- a/packages/react/src/components/Table/TableBody.tsx
+++ b/packages/react/src/components/Table/TableBody.tsx
@@ -2,6 +2,17 @@ import { type HTMLAttributes, forwardRef } from 'react';
 
 export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
 
+/**
+ * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
+ *
+ * @example
+ * <Table.Body>
+ *   <Table.Row>
+ *     <Table.Cell>John</Table.Cell>
+ *     <Table.Cell>25</Table.Cell>
+ *   </Table.Row>
+ * </Table.Body>
+ */
 export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
   function TableBody(rest, ref) {
     return <tbody ref={ref} {...rest} />;
diff --git a/packages/react/src/components/Table/TableCell.tsx b/packages/react/src/components/Table/TableCell.tsx
index 7bd50f10ef..55c48616cd 100644
--- a/packages/react/src/components/Table/TableCell.tsx
+++ b/packages/react/src/components/Table/TableCell.tsx
@@ -2,6 +2,12 @@ import { type TdHTMLAttributes, forwardRef } from 'react';
 
 export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
 
+/**
+ * TableCell component, used to display the cells of a table. Renders a native HTML td element.
+ *
+ * @example
+ * <Table.Cell>John</Table.Cell>
+ */
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
   function TableCell(rest, ref) {
     return <td ref={ref} {...rest} />;
diff --git a/packages/react/src/components/Table/TableFoot.tsx b/packages/react/src/components/Table/TableFoot.tsx
index f0f9806113..b0d56cdf3d 100644
--- a/packages/react/src/components/Table/TableFoot.tsx
+++ b/packages/react/src/components/Table/TableFoot.tsx
@@ -2,6 +2,17 @@ import { type HTMLAttributes, forwardRef } from 'react';
 
 export type TableFootProps = HTMLAttributes<HTMLTableSectionElement>;
 
+/**
+ * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
+ *
+ * @example
+ * <Table.Foot>
+ *   <Table.Row>
+ *     <Table.Cell>Total</Table.Cell>
+ *     <Table.Cell>2</Table.Cell>
+ *   </Table.Row>
+ * </Table.Foot>
+ */
 export const TableFoot = forwardRef<HTMLTableSectionElement, TableFootProps>(
   function TableFoot(rest, ref) {
     return <tfoot ref={ref} {...rest} />;
diff --git a/packages/react/src/components/Table/TableHead.tsx b/packages/react/src/components/Table/TableHead.tsx
index ed7368a3d3..300f80d367 100644
--- a/packages/react/src/components/Table/TableHead.tsx
+++ b/packages/react/src/components/Table/TableHead.tsx
@@ -2,6 +2,17 @@ import { type HTMLAttributes, forwardRef } from 'react';
 
 export type TableHeadProps = HTMLAttributes<HTMLTableSectionElement>;
 
+/**
+ * TableHead component, used to display the header of a table. Renders a native HTML thead element.
+ *
+ * @example
+ * <Table.Head>
+ *   <Table.Row>
+ *     <Table.HeaderCell>Name</Table.HeaderCell>
+ *     <Table.HeaderCell>Age</Table.HeaderCell>
+ *   </Table.Row>
+ * </Table.Head>
+ */
 export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
   function TableHead(rest, ref) {
     return <thead ref={ref} {...rest} />;
diff --git a/packages/react/src/components/Table/TableHeaderCell.tsx b/packages/react/src/components/Table/TableHeaderCell.tsx
index e83c3a8d05..67a3358f98 100644
--- a/packages/react/src/components/Table/TableHeaderCell.tsx
+++ b/packages/react/src/components/Table/TableHeaderCell.tsx
@@ -9,6 +9,12 @@ export type TableHeaderCellProps = {
   sort?: AriaAttributes['aria-sort'];
 } & ThHTMLAttributes<HTMLTableCellElement>;
 
+/**
+ * TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
+ *
+ * @example
+ * <Table.HeaderCell>Name</Table.HeaderCell>
+ */
 export const TableHeaderCell = forwardRef<
   HTMLTableCellElement,
   TableHeaderCellProps
diff --git a/packages/react/src/components/Table/TableRow.tsx b/packages/react/src/components/Table/TableRow.tsx
index 99910e8089..40312c0a32 100644
--- a/packages/react/src/components/Table/TableRow.tsx
+++ b/packages/react/src/components/Table/TableRow.tsx
@@ -2,6 +2,15 @@ import { type HTMLAttributes, forwardRef } from 'react';
 
 export type TableRowProps = HTMLAttributes<HTMLTableRowElement>;
 
+/**
+ * TableRow component, used to display the rows of a table. Renders a native HTML tr element.
+ *
+ * @example
+ * <Table.Row>
+ *   <Table.Cell>John</Table.Cell>
+ *   <Table.Cell>25</Table.Cell>
+ * </Table.Row>
+ */
 export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
   function TableRow(rest, ref) {
     return <tr ref={ref} {...rest} />;
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index fb0523472b..0b5c3fb2f0 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -7,11 +7,20 @@ import type { MergeRight } from '../../utilities';
 export type TabsProps = MergeRight<
   DefaultProps & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>,
   {
-    /** Controlled state for `Tabs` component. */
+    /**
+     * Controlled state for `Tabs` component
+     * @default undefined
+     */
     value?: string;
-    /** Default value. */
+    /**
+     * Default selected tab value
+     * @default undefined
+     */
     defaultValue?: string;
-    /** Callback with selected `TabItem` `value` */
+    /**
+     * Callback with selected `TabItem` `value`
+     * @default undefined
+     */
     onChange?: (value: string) => void;
   }
 >;
@@ -26,8 +35,8 @@ export const Context = createContext<ContextProps>({});
 
 /**
  * Display a group of tabs that can be toggled between.
+ *
  * @example
- * ```tsx
  * <Tabs onChange={(value) => console.log(value)}>
  *   <Tabs.List>
  *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
@@ -38,7 +47,6 @@ export const Context = createContext<ContextProps>({});
  *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
- * ```
  */
 export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
   { value, defaultValue, className, onChange, ...rest },
diff --git a/packages/react/src/components/Tabs/TabsList.tsx b/packages/react/src/components/Tabs/TabsList.tsx
index 47eaab28b0..8cf2aa5c1f 100644
--- a/packages/react/src/components/Tabs/TabsList.tsx
+++ b/packages/react/src/components/Tabs/TabsList.tsx
@@ -9,13 +9,12 @@ export type TabsListProps = HTMLAttributes<HTMLDivElement>;
 
 /**
  * The container for all `Tab` components.
+ *
  * @example
- * ```tsx
  * <Tabs.List>
  *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
  *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
  * </Tabs.List>
- * ```
  */
 export const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
   function TabsList({ children, ...rest }, ref) {
diff --git a/packages/react/src/components/Tabs/TabsPanel.tsx b/packages/react/src/components/Tabs/TabsPanel.tsx
index e293603c20..ad56160c73 100644
--- a/packages/react/src/components/Tabs/TabsPanel.tsx
+++ b/packages/react/src/components/Tabs/TabsPanel.tsx
@@ -5,16 +5,18 @@ import { useMergeRefs } from '@floating-ui/react';
 import { Context } from './Tabs';
 
 export type TabsPanelProps = {
-  /** When this value is selected as the current state, render this `TabsPanel` component*/
+  /**
+   * When this value is selected as the current state, render this `TabsPanel` component.
+   * Must match the `value` of a `Tabs.Tab` component.
+   */
   value: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'value'>;
 
 /**
  * A single content item in a Tabs component.
+ *
  * @example
- * ```tsx
  * <Tabs.Panel value='1'>content 1</Tabs.Panel>
- * ```
  */
 export const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(
   function TabsPanel({ children, value, ...rest }, ref) {
diff --git a/packages/react/src/components/Tabs/TabsTab.tsx b/packages/react/src/components/Tabs/TabsTab.tsx
index bfaf10e3e4..7ce3b44fa5 100644
--- a/packages/react/src/components/Tabs/TabsTab.tsx
+++ b/packages/react/src/components/Tabs/TabsTab.tsx
@@ -5,12 +5,15 @@ import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem';
 import { Context } from './Tabs';
 
 export type TabsTabProps = {
-  /** Value that will be set in the `Tabs` components state when the tab is activated */
+  /**
+   * Unique value that will be set in the `Tabs` components state when the tab is activated
+   */
   value: string;
 } & Omit<HTMLAttributes<HTMLButtonElement>, 'value'>;
 
 /**
  * A single item in a Tabs component.
+ *
  * @example
  * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
  */
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index c05e3a6ba2..7b9117dcc5 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -6,9 +6,10 @@ import type { DefaultProps } from '../../types';
 export type TagProps = DefaultProps & HTMLAttributes<HTMLSpanElement>;
 
 /**
- * Use `Tag` to display a small piece of information.
+ * Use `Tag` to display categories or statuses.
+ *
  * @example
- * <Tag>Success</Tag>
+ * <Tag>Melk</Tag>
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
   { className, ...rest },
diff --git a/packages/react/src/components/Textarea/Textarea.tsx b/packages/react/src/components/Textarea/Textarea.tsx
index 21b46f7863..afec18f5a3 100644
--- a/packages/react/src/components/Textarea/Textarea.tsx
+++ b/packages/react/src/components/Textarea/Textarea.tsx
@@ -6,12 +6,11 @@ import type { DefaultProps } from '../../types';
 export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
   Omit<DefaultProps, 'data-color'>;
 
-/** Textarea field
+/**
+ * Native HTML textarea element.
  *
  * @example
- * ```tsx
  * <Textarea />
- * ```
  */
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   function Textarea({ className, ...rest }, ref) {
diff --git a/packages/react/src/components/Textfield/Textfield.tsx b/packages/react/src/components/Textfield/Textfield.tsx
index 20f695e96d..60d9c8450e 100644
--- a/packages/react/src/components/Textfield/Textfield.tsx
+++ b/packages/react/src/components/Textfield/Textfield.tsx
@@ -20,21 +20,37 @@ type InputProps_ = Omit<
 type TextareaProps_ = Omit<TextareaProps, 'prefix' | 'className' | 'style'>;
 
 type SharedTextfieldProps = {
-  /** Classname on the wrapper element`Field` */
+  /**
+   * Classname on the wrapper element `Field`
+   */
   className?: InputProps['className'];
-  /** Style on the wrapper element `Field` */
+  /**
+   * Style on the wrapper element `Field`
+   * @default undefined
+   */
   style?: InputProps['style'];
-  /** Label */
+  /**
+   * Label
+   */
   label?: ReactNode;
-  /** Description */
+  /**
+   * Description
+   */
   description?: ReactNode;
-  /** Prefix */
+  /**
+   * Prefix
+   */
   prefix?: string;
-  /** Suffix */
+  /**
+   * Suffix
+   */
   suffix?: string;
-  /** Error message for field */
-  error?: ReactNode;
-  /** Uses `Field.Counter` to display a character counter
+  /**
+   * Error message for field
+   */
+  validationMessage?: ReactNode;
+  /**
+   * Uses `Field.Counter` to display a character counter
    * Pass a number to set a limit, or an object to configure the counter
    */
   counter?: FieldCounterProps | number;
@@ -42,12 +58,16 @@ type SharedTextfieldProps = {
   Omit<DefaultProps, 'data-color'>;
 
 type TextfieldTextareaProps = {
-  /** Use to render a `Textarea` instead of `Input` for multiline support  */
+  /**
+   * Use to render a `Textarea` instead of `Input` for multiline support
+   **/
   multiline: true;
 } & TextareaProps_;
 
 type TextfieldInputProps = {
-  /** Use to render a `Textarea` instead of `Input` for multiline support  */
+  /**
+   * Use to render a `Textarea` instead of `Input` for multiline support
+   **/
   multiline?: never | false;
   /**
    * Supported `input` types
@@ -67,9 +87,7 @@ export type TextfieldProps = SharedTextfieldProps &
  *
  * Rest props are passed to the `Input` or `Textarea` component.
  * @example
- * ```tsx
  * <Textfield label="Textfield label">
- * ```
  */
 export const Textfield = forwardRef<
   HTMLInputElement | HTMLTextAreaElement,
@@ -78,7 +96,7 @@ export const Textfield = forwardRef<
   {
     label,
     description,
-    error,
+    validationMessage,
     multiline,
     prefix,
     suffix,
@@ -99,19 +117,21 @@ export const Textfield = forwardRef<
         {multiline === true ? (
           <Textarea
             ref={ref as ForwardedRef<HTMLTextAreaElement>}
-            aria-invalid={Boolean(error) || undefined}
+            aria-invalid={Boolean(validationMessage) || undefined}
             {...(rest as TextareaProps_)}
           />
         ) : (
           <Input
             ref={ref as ForwardedRef<HTMLInputElement>}
-            aria-invalid={Boolean(error) || undefined}
+            aria-invalid={Boolean(validationMessage) || undefined}
             {...(rest as InputProps_)}
           />
         )}
         {suffix === undefined || <FieldAffix>{suffix}</FieldAffix>}
       </FieldAffixes>
-      {!!error && <ValidationMessage>{error}</ValidationMessage>}
+      {!!validationMessage && (
+        <ValidationMessage>{validationMessage}</ValidationMessage>
+      )}
       {!!counter && (
         <Field.Counter
           {...(typeof counter === 'number' ? { limit: counter } : counter)}
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
index a70b6a993f..2eb9dc2a29 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
+++ b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
@@ -17,19 +17,28 @@ export const ToggleGroupContext = createContext<ToggleGroupContextProps>({});
 export type ToggleGroupProps = MergeRight<
   DefaultProps & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,
   {
-    /** Controlled state for `ToggleGroup` component. */
+    /**
+     * Controlled state for `ToggleGroup` component.
+     */
     value?: string;
-    /** Default value. */
+    /**
+     * Default value.
+     */
     defaultValue?: string;
-    /** Callback with selected `ToggleGroupItem` `value` */
+    /**
+     * Callback with selected `ToggleGroupItem` `value`
+     */
     onChange?: (value: string) => void;
-    /** Form element name */
+    /**
+     * Form element name
+     */
     name?: string;
   }
 >;
 
 /**
  * Display a group of buttons that can be toggled between.
+ *
  * @example
  * <ToggleGroup onChange={(value) => console.log(value)}>
  *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
index 1758c0d04f..5f0bfc319b 100644
--- a/packages/react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -33,7 +33,9 @@ export type TooltipProps = MergeRight<
      * @note If it is an element, it needs to be able to receive a ref.
      */
     children: (ReactElement & RefAttributes<HTMLElement>) | string;
-    /** Content of the tooltip */
+    /**
+     * Content of the tooltip
+     **/
     content: string;
     /**
      * Placement of the tooltip on the trigger.
@@ -50,6 +52,7 @@ export type TooltipProps = MergeRight<
 
 /**
  * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ *
  * @example
  * <Tooltip content='This is a tooltip'>
  *  <button>Hover me</button>
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
index 7bd9070f58..650f6973ba 100644
--- a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
@@ -22,7 +22,12 @@ export type ValidationMessageProps = MergeRight<
   }
 >;
 
-/** Use `ValidationMessage` to display validation text */
+/**
+ * Use `ValidationMessage` to display validation text
+ *
+ * @example
+ * <ValidationMessage>This is a damger validation message</ValidationMessage>
+ */
 export const ValidationMessage = forwardRef<
   HTMLParagraphElement,
   ValidationMessageProps

From 6fb6ec3a0559fc595718c5e160e5bc3d6b7198b5 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 22 Jan 2025 09:42:04 +0100
Subject: [PATCH 03/10] fix story errors

---
 .../src/components/ErrorSummary/ErrorSummary.stories.tsx      | 4 ++--
 .../src/components/ValidationMessage/ValidationMessage.tsx    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx b/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx
index 4028f53dca..a5db02222d 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx
@@ -36,14 +36,14 @@ export const WithForm: Story = () => (
     <Textfield
       label='Fornavn'
       id='fornavn'
-      error='Fornavn må være minst 2 tegn'
+      validationMessage='Fornavn må være minst 2 tegn'
     />
 
     <Textfield
       label='Telefon'
       id='telefon'
       type='tel'
-      error='Telefonnummer kan kun inneholde siffer'
+      validationMessage='Telefonnummer kan kun inneholde siffer'
     />
 
     <ErrorSummary>
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
index 650f6973ba..f1d0c7162e 100644
--- a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
@@ -26,7 +26,7 @@ export type ValidationMessageProps = MergeRight<
  * Use `ValidationMessage` to display validation text
  *
  * @example
- * <ValidationMessage>This is a damger validation message</ValidationMessage>
+ * <ValidationMessage>This is a danger validation message</ValidationMessage>
  */
 export const ValidationMessage = forwardRef<
   HTMLParagraphElement,

From d0b5567dd150d9731ad1c95553505b3efea2a0fb Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 22 Jan 2025 09:46:26 +0100
Subject: [PATCH 04/10] use error in comps using validationmessage danger

---
 .../components/ErrorSummary/ErrorSummary.stories.tsx |  4 ++--
 .../react/src/components/Textfield/Textfield.tsx     | 12 +++++-------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx b/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx
index a5db02222d..4028f53dca 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx
@@ -36,14 +36,14 @@ export const WithForm: Story = () => (
     <Textfield
       label='Fornavn'
       id='fornavn'
-      validationMessage='Fornavn må være minst 2 tegn'
+      error='Fornavn må være minst 2 tegn'
     />
 
     <Textfield
       label='Telefon'
       id='telefon'
       type='tel'
-      validationMessage='Telefonnummer kan kun inneholde siffer'
+      error='Telefonnummer kan kun inneholde siffer'
     />
 
     <ErrorSummary>
diff --git a/packages/react/src/components/Textfield/Textfield.tsx b/packages/react/src/components/Textfield/Textfield.tsx
index 60d9c8450e..821c376bef 100644
--- a/packages/react/src/components/Textfield/Textfield.tsx
+++ b/packages/react/src/components/Textfield/Textfield.tsx
@@ -48,7 +48,7 @@ type SharedTextfieldProps = {
   /**
    * Error message for field
    */
-  validationMessage?: ReactNode;
+  error?: ReactNode;
   /**
    * Uses `Field.Counter` to display a character counter
    * Pass a number to set a limit, or an object to configure the counter
@@ -96,7 +96,7 @@ export const Textfield = forwardRef<
   {
     label,
     description,
-    validationMessage,
+    error,
     multiline,
     prefix,
     suffix,
@@ -117,21 +117,19 @@ export const Textfield = forwardRef<
         {multiline === true ? (
           <Textarea
             ref={ref as ForwardedRef<HTMLTextAreaElement>}
-            aria-invalid={Boolean(validationMessage) || undefined}
+            aria-invalid={Boolean(error) || undefined}
             {...(rest as TextareaProps_)}
           />
         ) : (
           <Input
             ref={ref as ForwardedRef<HTMLInputElement>}
-            aria-invalid={Boolean(validationMessage) || undefined}
+            aria-invalid={Boolean(error) || undefined}
             {...(rest as InputProps_)}
           />
         )}
         {suffix === undefined || <FieldAffix>{suffix}</FieldAffix>}
       </FieldAffixes>
-      {!!validationMessage && (
-        <ValidationMessage>{validationMessage}</ValidationMessage>
-      )}
+      {!!error && <ValidationMessage>{error}</ValidationMessage>}
       {!!counter && (
         <Field.Counter
           {...(typeof counter === 'number' ? { limit: counter } : counter)}

From 4fb91b7548a0e1344e27831f07263ab79095000a Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 22 Jan 2025 13:47:55 +0100
Subject: [PATCH 05/10] index file follows same export rules

---
 packages/react/src/components/Alert/index.ts  |  3 ++-
 packages/react/src/components/Badge/index.ts  |  6 +++++
 .../react/src/components/Breadcrumbs/index.ts | 21 ++++++++++------
 packages/react/src/components/Card/index.ts   | 10 ++++++++
 .../react/src/components/Checkbox/index.ts    |  3 ++-
 .../react/src/components/Details/index.ts     |  7 +++---
 .../react/src/components/Divider/Divider.tsx  |  2 +-
 .../react/src/components/Dropdown/index.ts    | 20 ++++++++-------
 .../components/ErrorSummary/ErrorSummary.mdx  | 11 +++-----
 .../components/ErrorSummary/ErrorSummary.tsx  |  8 ++++--
 .../ErrorSummary/ErrorSummaryLink.tsx         |  3 +++
 .../src/components/ErrorSummary/index.ts      | 17 ++++++++-----
 packages/react/src/components/Field/index.ts  | 12 +++++----
 .../react/src/components/Fieldset/index.ts    | 13 +++++++---
 .../react/src/components/Heading/index.ts     |  3 ++-
 packages/react/src/components/Input/Input.tsx |  3 ++-
 packages/react/src/components/Label/Label.tsx |  2 +-
 packages/react/src/components/Label/index.ts  |  3 ++-
 packages/react/src/components/Link/Link.tsx   |  6 +++++
 packages/react/src/components/List/Lists.tsx  |  2 ++
 packages/react/src/components/Modal/index.ts  | 13 ++++++++++
 .../react/src/components/Pagination/index.ts  | 19 ++++++++++++++
 .../src/components/Paragraph/Paragraph.tsx    |  2 ++
 .../react/src/components/Paragraph/index.ts   |  3 ++-
 .../react/src/components/Popover/index.ts     | 25 ++++++++++++-------
 packages/react/src/components/Radio/index.ts  |  3 ++-
 .../react/src/components/Search/Search.tsx    |  2 +-
 packages/react/src/components/Search/index.ts | 18 +++++++------
 packages/react/src/components/Select/index.ts |  9 +++++++
 .../react/src/components/Spinner/index.ts     |  3 ++-
 packages/react/src/components/Switch/index.ts |  3 ++-
 packages/react/src/components/Table/index.ts  | 25 +++++++++++++++++++
 packages/react/src/components/Tabs/index.ts   |  3 +--
 packages/react/src/components/Tag/index.ts    |  3 ++-
 .../react/src/components/Textarea/index.ts    |  3 ++-
 .../react/src/components/Textfield/index.ts   |  3 ++-
 .../react/src/components/ToggleGroup/index.ts | 18 +++++--------
 .../src/components/ValidationMessage/index.ts |  3 ++-
 38 files changed, 224 insertions(+), 89 deletions(-)

diff --git a/packages/react/src/components/Alert/index.ts b/packages/react/src/components/Alert/index.ts
index 79e3b155f4..7a4601fadc 100644
--- a/packages/react/src/components/Alert/index.ts
+++ b/packages/react/src/components/Alert/index.ts
@@ -1 +1,2 @@
-export * from './Alert';
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';
diff --git a/packages/react/src/components/Badge/index.ts b/packages/react/src/components/Badge/index.ts
index d9de42fc92..2de9a281f4 100644
--- a/packages/react/src/components/Badge/index.ts
+++ b/packages/react/src/components/Badge/index.ts
@@ -1,6 +1,12 @@
 import { Badge as BadgeElm } from './Badge';
 import { BadgePosition } from './BadgePosition';
 
+/**
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
+ *
+ * @example without children
+ * <Badge count={5} maxCount={10} />
+ */
 const Badge = Object.assign(BadgeElm, { Position: BadgePosition });
 
 Badge.Position.displayName = 'Badge.Position';
diff --git a/packages/react/src/components/Breadcrumbs/index.ts b/packages/react/src/components/Breadcrumbs/index.ts
index 46f4f28c77..d023e1df83 100644
--- a/packages/react/src/components/Breadcrumbs/index.ts
+++ b/packages/react/src/components/Breadcrumbs/index.ts
@@ -4,17 +4,22 @@ import { BreadcrumbsLink } from './BreadcrumbsLink';
 import { BreadcrumbsList } from './BreadcrumbsList';
 
 /**
- * Breadcrumbs are used to visualize the current page path.
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
  * @example
- * <Breadcrumbs aria-label="You are here:">
- *  <Breadcrumbs.Link aria-label="Go back to level 2">Level 2</Breadcrumbs.Link>
+ * <Breadcrumbs aria-label='Du er her:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
  *  <Breadcrumbs.List>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 1</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 2</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 3</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 4</Breadcrumbs.Link></Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
  *  </Breadcrumbs.List>
- * <Breadcrumbs>
+ * </Breadcrumbs>
  */
 export const Breadcrumbs = Object.assign(BreadcrumbsParent, {
   List: BreadcrumbsList,
diff --git a/packages/react/src/components/Card/index.ts b/packages/react/src/components/Card/index.ts
index 0a7568f090..87c2cde35a 100644
--- a/packages/react/src/components/Card/index.ts
+++ b/packages/react/src/components/Card/index.ts
@@ -1,6 +1,16 @@
 import { Card as CardParent } from './Card';
 import { CardBlock } from './CardBlock';
 
+/**
+ * Card component to present content in a structured way.
+ *
+ * @example
+ * <Card>
+ *  <Card.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
+ * </Card>
+ */
 const Card = Object.assign(CardParent, {
   Block: CardBlock,
 });
diff --git a/packages/react/src/components/Checkbox/index.ts b/packages/react/src/components/Checkbox/index.ts
index f5c939faf4..43aaf92503 100644
--- a/packages/react/src/components/Checkbox/index.ts
+++ b/packages/react/src/components/Checkbox/index.ts
@@ -1 +1,2 @@
-export * from './Checkbox';
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
diff --git a/packages/react/src/components/Details/index.ts b/packages/react/src/components/Details/index.ts
index 33280b5276..75e37ff607 100644
--- a/packages/react/src/components/Details/index.ts
+++ b/packages/react/src/components/Details/index.ts
@@ -3,11 +3,12 @@ import { DetailsContent } from './DetailsContent';
 import { DetailsSummary } from './DetailsSummary';
 
 /**
- * Details are used to toggle the visibility of content.
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
  * @example
  * <Details>
- *  <Details.Summary>Heading 1</Details.Summary>
- *  <Details.Content>Content 1</Details.Content>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
  * </Details>
  */
 const Details = Object.assign(DetailsParent, {
diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/Divider/Divider.tsx
index d7844b8126..9134096d42 100644
--- a/packages/react/src/components/Divider/Divider.tsx
+++ b/packages/react/src/components/Divider/Divider.tsx
@@ -5,7 +5,7 @@ import { forwardRef } from 'react';
 export type DividerProps = HTMLAttributes<HTMLHRElement>;
 
 /**
- * Divider component, used to separate content.
+ * Divider component, used to separate content. Uses `hr` element.
  *
  * @example
  * <Divider />
diff --git a/packages/react/src/components/Dropdown/index.ts b/packages/react/src/components/Dropdown/index.ts
index 632e81438f..15fbc1a914 100644
--- a/packages/react/src/components/Dropdown/index.ts
+++ b/packages/react/src/components/Dropdown/index.ts
@@ -7,17 +7,19 @@ import { DropdownTrigger } from './DropdownTrigger';
 import { DropdownTriggerContext } from './DropdownTriggerContext';
 
 /**
+ * Dropdown component, used to display a list of options.
+ *
  * @example
  * <Dropdown.TriggerContext>
- *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
- *  <Dropdown>
- *    <Dropdown.Heading>Heading</Dropdown.Heading>
- *    <Dropdown.List>
- *      <Dropdown.Item>
- *        <Dropdown.Button>Button 1</Dropdown.Button>
- *      </Dropdown.Item>
- *    </Dropdown.List>
- *  </Dropdown>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
  * </Dropdown.TriggerContext>
  */
 const Dropdown = Object.assign(DropdownRoot, {
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.mdx b/packages/react/src/components/ErrorSummary/ErrorSummary.mdx
index 159638a4a3..3c27e20cd2 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.mdx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummary.mdx
@@ -18,7 +18,7 @@ mangler som må rettes på en side eller trinn, for å komme videre.
 ## Slik bruker du `ErrorSummary`
 
 `ErrorSummary` er påkrevd for å får riktig aria attributter (`aria-labelledby`, `role='alert'`, osv.).
-Alle `ErrorSummary.Item` må ha en `href` for å kunne navigere til riktig sted i skjemaet.
+Alle `ErrorSummary.Link` må ha en `href` for å kunne navigere til riktig sted i skjemaet.
 
 ```tsx
 import { ErrorSummary } from '@digdir/designsystemet-react';
@@ -26,7 +26,9 @@ import { ErrorSummary } from '@digdir/designsystemet-react';
 <ErrorSummary>
   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
   <ErrorSummary.List>
-    <ErrorSummary.Item href='#'>Item</ErrorSummary.Item>
+    <ErrorSummary.Item>
+      <ErrorSummary.Link href='#'>Item</ErrorSummary.Link>
+    </ErrorSummary.Item>
   </ErrorSummary.List>
 </ErrorSummary>
 ```
@@ -54,11 +56,6 @@ Det er fortsatt viktig at `ErrorSummary` får fokus ved submit slik at brukeren
 - lenkene i oppsummeringen stemmer med feilmeldingene de lenker til
 
 <br/>
-
- 
-
-
-
 <br />
 
 ### Plassering
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx b/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
index 77b38fce4f..72d7b8e5b8 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
@@ -25,8 +25,12 @@ export type ErrorSummaryProps = {
  * <ErrorSummary>
  *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
  *   <ErrorSummary.List>
- *     <ErrorSummary.Item href='#'>Error 1</ErrorSummary.Item>
- *     <ErrorSummary.Item href='#'>Error 2</ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
  *   </ErrorSummary.List>
  * </ErrorSummary>
  */
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryLink.tsx b/packages/react/src/components/ErrorSummary/ErrorSummaryLink.tsx
index 44523f170a..fdbcfe390d 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryLink.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummaryLink.tsx
@@ -4,6 +4,9 @@ import { Link } from '../Link';
 
 export type ErrorSummaryLinkProps = LinkProps;
 
+/**
+ * Link component used in ErrorSummary.
+ */
 export const ErrorSummaryLink = forwardRef<
   HTMLAnchorElement,
   ErrorSummaryLinkProps
diff --git a/packages/react/src/components/ErrorSummary/index.ts b/packages/react/src/components/ErrorSummary/index.ts
index 98f6ee4e1b..9db17d1e78 100644
--- a/packages/react/src/components/ErrorSummary/index.ts
+++ b/packages/react/src/components/ErrorSummary/index.ts
@@ -5,14 +5,19 @@ import { ErrorSummaryLink } from './ErrorSummaryLink';
 import { ErrorSummaryList } from './ErrorSummaryList';
 
 /**
+ * ErrorSummary component, used to display a list of errors.
+ *
  * @example
  * <ErrorSummary>
- *  <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
- *  <ErrorSummary.List>
- *    <ErrorSummary.Item>
- *      <ErrorSummary.Link>Item 1</ErrorSummary.Link>
- *    </ErrorSummary.Item>
- *  </ErrorSummary.List>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
  * </ErrorSummary>
  */
 const ErrorSummary = Object.assign(ErrorSummaryParent, {
diff --git a/packages/react/src/components/Field/index.ts b/packages/react/src/components/Field/index.ts
index 4c46f208df..7a4d031bc8 100644
--- a/packages/react/src/components/Field/index.ts
+++ b/packages/react/src/components/Field/index.ts
@@ -4,12 +4,14 @@ import { FieldCounter } from './FieldCounter';
 import { FieldDescription } from './FieldDescription';
 
 /**
+ * Field component, used to wrap a form field.
+ *
  * @example
- * <Field>
- *  <Label>Label text</Label>
- *  <Field.Description>Description</Field.Description>
- *  <Input />
- *  <ValidationMessage>Validation message</ValidationMessage>
+ * <Field data-my-field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
  * </Field>
  */
 const Field = Object.assign(FieldParent, {
diff --git a/packages/react/src/components/Fieldset/index.ts b/packages/react/src/components/Fieldset/index.ts
index 4f3b66762c..c661f90fd2 100644
--- a/packages/react/src/components/Fieldset/index.ts
+++ b/packages/react/src/components/Fieldset/index.ts
@@ -3,11 +3,18 @@ import { FieldsetDescription } from './FieldsetDescription';
 import { FieldsetLegend } from './FieldsetLegend';
 
 /**
+ * Fieldset component, used to wrap a form field.
+ *
  * @example
  * <Fieldset>
- *  <Fieldset.Legend>Legend text</Fieldset.Legend>
- *  <Fieldset.Description>Description text</Fieldset.Description>
- *  ...input components
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
  * </Fieldset>
  */
 const Fieldset = Object.assign(FieldsetParent, {
diff --git a/packages/react/src/components/Heading/index.ts b/packages/react/src/components/Heading/index.ts
index 6406e7b07f..f6172468c9 100644
--- a/packages/react/src/components/Heading/index.ts
+++ b/packages/react/src/components/Heading/index.ts
@@ -1 +1,2 @@
-export * from './Heading';
+export { Heading } from './Heading';
+export type { HeadingProps } from './Heading';
diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx
index 9504009305..46d832a3aa 100644
--- a/packages/react/src/components/Input/Input.tsx
+++ b/packages/react/src/components/Input/Input.tsx
@@ -56,7 +56,8 @@ export type InputProps = MergeRight<
   }
 >;
 
-/** Input field
+/**
+ * Input renders a native `input` element.
  *
  * @example
  * <Input />
diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx
index 85012299b4..57a87bcadf 100644
--- a/packages/react/src/components/Label/Label.tsx
+++ b/packages/react/src/components/Label/Label.tsx
@@ -19,7 +19,7 @@ export type LabelProps = {
   DefaultProps;
 
 /**
- * Use `Label` for labels.
+ * Use `Label` for labels. Renders a native `label` element.
  *
  * @example
  * <Label data-size='lg' weight='medium'>Label</Label>
diff --git a/packages/react/src/components/Label/index.ts b/packages/react/src/components/Label/index.ts
index ca58c61a25..f6cdb0331c 100644
--- a/packages/react/src/components/Label/index.ts
+++ b/packages/react/src/components/Label/index.ts
@@ -1 +1,2 @@
-export * from './Label';
+export { Label } from './Label';
+export type { LabelProps } from './Label';
diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx
index 47eb213757..0d526017e7 100644
--- a/packages/react/src/components/Link/Link.tsx
+++ b/packages/react/src/components/Link/Link.tsx
@@ -20,6 +20,12 @@ export type LinkProps = MergeRight<
   }
 >;
 
+/**
+ * Link component, renders a native `a` element.
+ *
+ * @example
+ * <Link href='#'>Link</Link>
+ */
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? Slot : 'a';
diff --git a/packages/react/src/components/List/Lists.tsx b/packages/react/src/components/List/Lists.tsx
index f9fd3e3258..920426bdb7 100644
--- a/packages/react/src/components/List/Lists.tsx
+++ b/packages/react/src/components/List/Lists.tsx
@@ -30,6 +30,7 @@ const render = <T extends HTMLElement>(
 
 /**
  * ListUnordered component, used to display a list of items.
+ * Renders a native `ul` element.
  *
  * @example
  * <List.Unordered>
@@ -45,6 +46,7 @@ export const ListUnordered = forwardRef<HTMLUListElement, ListUnorderedProps>(
 
 /**
  * ListOrdered component, used to display a list of items.
+ * Renders a native `ol` element.
  *
  * @example
  * <List.Ordered>
diff --git a/packages/react/src/components/Modal/index.ts b/packages/react/src/components/Modal/index.ts
index 5e420e8800..87e86d36a2 100644
--- a/packages/react/src/components/Modal/index.ts
+++ b/packages/react/src/components/Modal/index.ts
@@ -3,6 +3,19 @@ import { ModalBlock } from './ModalBlock';
 import { ModalTrigger } from './ModalTrigger';
 import { ModalTriggerContext } from './ModalTriggerContext';
 
+/**
+ * Modal component, used to display a modal dialog.
+ *
+ * @example
+ * <Modal.TriggerContext>
+ *   <Modal.Trigger>Open Modal</Modal.Trigger>
+ *   <Modal>
+ *     <Modal.Block>
+ *       Content
+ *     </Modal.Block>
+ *   </Modal>
+ * </Modal.TriggerContext>
+ */
 const Modal = Object.assign(ModalParent, {
   Block: ModalBlock,
   TriggerContext: ModalTriggerContext,
diff --git a/packages/react/src/components/Pagination/index.ts b/packages/react/src/components/Pagination/index.ts
index b0ff8090c6..42a3aa568a 100644
--- a/packages/react/src/components/Pagination/index.ts
+++ b/packages/react/src/components/Pagination/index.ts
@@ -3,6 +3,24 @@ import { PaginationButton } from './PaginationButton';
 import { PaginationItem } from './PaginationItem';
 import { PaginationList } from './PaginationList';
 
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
 const Pagination = Object.assign(PaginationParent, {
   List: PaginationList,
   Item: PaginationItem,
@@ -18,5 +36,6 @@ export type { PaginationButtonProps } from './PaginationButton';
 export type { PaginationListProps } from './PaginationList';
 export type { PaginationItemProps } from './PaginationItem';
 export type { UsePaginationProps } from './usePagination';
+
 export { Pagination, PaginationList, PaginationItem, PaginationButton };
 export { usePagination } from './usePagination';
diff --git a/packages/react/src/components/Paragraph/Paragraph.tsx b/packages/react/src/components/Paragraph/Paragraph.tsx
index c6dafc4ce4..c0c4f1e124 100644
--- a/packages/react/src/components/Paragraph/Paragraph.tsx
+++ b/packages/react/src/components/Paragraph/Paragraph.tsx
@@ -19,8 +19,10 @@ export type ParagraphProps = {
    */
   asChild?: boolean;
 } & HTMLAttributes<HTMLParagraphElement>;
+
 /**
  * Use `Paragraph` to display text with paragraph text styles.
+ * Renders a native `p` element.
  *
  * @example
  * <Paragraph data-size='lg'>Paragraph</Paragraph>
diff --git a/packages/react/src/components/Paragraph/index.ts b/packages/react/src/components/Paragraph/index.ts
index 01752c914c..047a80d87b 100644
--- a/packages/react/src/components/Paragraph/index.ts
+++ b/packages/react/src/components/Paragraph/index.ts
@@ -1 +1,2 @@
-export * from './Paragraph';
+export { Paragraph } from './Paragraph';
+export type { ParagraphProps } from './Paragraph';
diff --git a/packages/react/src/components/Popover/index.ts b/packages/react/src/components/Popover/index.ts
index 0125d3536f..232412e4fb 100644
--- a/packages/react/src/components/Popover/index.ts
+++ b/packages/react/src/components/Popover/index.ts
@@ -2,15 +2,21 @@ import { Popover as PopoverParent } from './Popover';
 import { PopoverTrigger } from './PopoverTrigger';
 import { PopoverTriggerContext } from './PopoverTriggerContext';
 
-type PopoverComponent = typeof PopoverParent & {
-  TriggerContext: typeof PopoverTriggerContext;
-  Trigger: typeof PopoverTrigger;
-};
-
-const Popover = PopoverParent as PopoverComponent;
-
-Popover.TriggerContext = PopoverTriggerContext;
-Popover.Trigger = PopoverTrigger;
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+const Popover = Object.assign(PopoverParent, {
+  TriggerContext: PopoverTriggerContext,
+  Trigger: PopoverTrigger,
+});
 
 Popover.TriggerContext.displayName = 'Popover.TriggerContext';
 Popover.Trigger.displayName = 'Popover.Trigger';
@@ -18,4 +24,5 @@ Popover.Trigger.displayName = 'Popover.Trigger';
 export type { PopoverProps } from './Popover';
 export type { PopoverTriggerContextProps } from './PopoverTriggerContext';
 export type { PopoverTriggerProps } from './PopoverTrigger';
+
 export { Popover, PopoverTriggerContext, PopoverTrigger };
diff --git a/packages/react/src/components/Radio/index.ts b/packages/react/src/components/Radio/index.ts
index bfbe6d09bf..ec0e907223 100644
--- a/packages/react/src/components/Radio/index.ts
+++ b/packages/react/src/components/Radio/index.ts
@@ -1 +1,2 @@
-export * from './Radio';
+export { Radio } from './Radio';
+export type { RadioProps } from './Radio';
diff --git a/packages/react/src/components/Search/Search.tsx b/packages/react/src/components/Search/Search.tsx
index f486ef3f2b..0365e401e6 100644
--- a/packages/react/src/components/Search/Search.tsx
+++ b/packages/react/src/components/Search/Search.tsx
@@ -6,7 +6,7 @@ import type { DefaultProps } from '../../types';
 export type SearchProps = DefaultProps & React.HTMLAttributes<HTMLDivElement>;
 
 /**
- * Search component, use ti display different variations of a search input
+ * Search component, use to display different variations of a search input
  *
  * @example with button
  * <Search>
diff --git a/packages/react/src/components/Search/index.ts b/packages/react/src/components/Search/index.ts
index 6c5d2d933a..6863dcc894 100644
--- a/packages/react/src/components/Search/index.ts
+++ b/packages/react/src/components/Search/index.ts
@@ -4,16 +4,20 @@ import { SearchClear } from './SearchClear';
 import { SearchInput } from './SearchInput';
 
 /**
- * Search field
+ * Search component, use to display different variations of a search input
  *
- * @example
- * ```tsx
+ * @example with button
  * <Search>
- *  <Search.Input aria-label='Søk' />
- *  <Search.Clear />
- *  <Search.Button />
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
  * </Search>
- * ```
  */
 const Search = Object.assign(SearchRoot, {
   Clear: SearchClear,
diff --git a/packages/react/src/components/Select/index.ts b/packages/react/src/components/Select/index.ts
index 624cc6b71f..9d3e26500b 100644
--- a/packages/react/src/components/Select/index.ts
+++ b/packages/react/src/components/Select/index.ts
@@ -2,6 +2,15 @@ import { Select as SelectParent } from './Select';
 import { SelectOptgroup } from './SelectOptgroup';
 import { SelectOption } from './SelectOption';
 
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
 const Select = Object.assign(SelectParent, {
   Option: SelectOption,
   Optgroup: SelectOptgroup,
diff --git a/packages/react/src/components/Spinner/index.ts b/packages/react/src/components/Spinner/index.ts
index b259397be4..381fc7ae58 100644
--- a/packages/react/src/components/Spinner/index.ts
+++ b/packages/react/src/components/Spinner/index.ts
@@ -1 +1,2 @@
-export * from './Spinner';
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
diff --git a/packages/react/src/components/Switch/index.ts b/packages/react/src/components/Switch/index.ts
index 1b19c1d39c..c33419dc39 100644
--- a/packages/react/src/components/Switch/index.ts
+++ b/packages/react/src/components/Switch/index.ts
@@ -1 +1,2 @@
-export * from './Switch';
+export { Switch } from './Switch';
+export type { SwitchProps } from './Switch';
diff --git a/packages/react/src/components/Table/index.ts b/packages/react/src/components/Table/index.ts
index 3b38ac44ce..e6589ab152 100644
--- a/packages/react/src/components/Table/index.ts
+++ b/packages/react/src/components/Table/index.ts
@@ -13,6 +13,31 @@ import type { TableHeaderCellProps } from './TableHeaderCell';
 import { TableRow } from './TableRow';
 import type { TableRowProps } from './TableRow';
 
+/**
+ * Table component, used to display tabular data. Renders a native HTML table element.
+ *
+ * @example
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *       <Table.HeaderCell>Age</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John</Table.Cell>
+ *       <Table.Cell>25</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ *   <Table.Foot>
+ *     <Table.Row>
+ *       <Table.Cell>Total</Table.Cell>
+ *       <Table.Cell>2</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Foot>
+ * </Table>
+ */
 const Table = Object.assign(TableRoot, {
   Head: TableHead,
   Body: TableBody,
diff --git a/packages/react/src/components/Tabs/index.ts b/packages/react/src/components/Tabs/index.ts
index 2ef1a98ca0..69a60a9001 100644
--- a/packages/react/src/components/Tabs/index.ts
+++ b/packages/react/src/components/Tabs/index.ts
@@ -5,8 +5,8 @@ import { TabsTab } from './TabsTab';
 
 /**
  * Display a group of tabs that can be toggled between.
+ *
  * @example
- * ```tsx
  * <Tabs onChange={(value) => console.log(value)}>
  *   <Tabs.List>
  *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
@@ -17,7 +17,6 @@ import { TabsTab } from './TabsTab';
  *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
- * ```
  */
 const Tabs = Object.assign(TabsParent, {
   List: TabsList,
diff --git a/packages/react/src/components/Tag/index.ts b/packages/react/src/components/Tag/index.ts
index 9790fcbf11..1312f7a7d4 100644
--- a/packages/react/src/components/Tag/index.ts
+++ b/packages/react/src/components/Tag/index.ts
@@ -1 +1,2 @@
-export * from './Tag';
+export { Tag } from './Tag';
+export type { TagProps } from './Tag';
diff --git a/packages/react/src/components/Textarea/index.ts b/packages/react/src/components/Textarea/index.ts
index 6449a4197e..7edb405e21 100644
--- a/packages/react/src/components/Textarea/index.ts
+++ b/packages/react/src/components/Textarea/index.ts
@@ -1 +1,2 @@
-export * from './Textarea';
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';
diff --git a/packages/react/src/components/Textfield/index.ts b/packages/react/src/components/Textfield/index.ts
index 4ece73e0b9..69df949c99 100644
--- a/packages/react/src/components/Textfield/index.ts
+++ b/packages/react/src/components/Textfield/index.ts
@@ -1 +1,2 @@
-export * from './Textfield';
+export { Textfield } from './Textfield';
+export type { TextfieldProps } from './Textfield';
diff --git a/packages/react/src/components/ToggleGroup/index.ts b/packages/react/src/components/ToggleGroup/index.ts
index d3630fae0a..3221d40c3f 100644
--- a/packages/react/src/components/ToggleGroup/index.ts
+++ b/packages/react/src/components/ToggleGroup/index.ts
@@ -1,28 +1,22 @@
 import { ToggleGroup as ToggleGroupParent } from './ToggleGroup';
 import { ToggleGroupItem } from './ToggleGroupItem';
 
-export type { ToggleGroupProps } from './ToggleGroup';
-export type { ToggleGroupItemProps } from './ToggleGroupItem';
-
-type ToggleGroupComponent = typeof ToggleGroupParent & {
-  Item: typeof ToggleGroupItem;
-};
-
 /**
  * Display a group of buttons that can be toggled between.
+ *
  * @example
- * ```tsx
  * <ToggleGroup onChange={(value) => console.log(value)}>
  *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
  *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
- * ```
  */
-const ToggleGroup = ToggleGroupParent as ToggleGroupComponent;
-
-ToggleGroup.Item = ToggleGroupItem;
+const ToggleGroup = Object.assign(ToggleGroupParent, {
+  Item: ToggleGroupItem,
+});
 
 ToggleGroup.Item.displayName = 'ToggleGroup.Item';
 
+export type { ToggleGroupProps } from './ToggleGroup';
+export type { ToggleGroupItemProps } from './ToggleGroupItem';
 export { ToggleGroup, ToggleGroupItem };
diff --git a/packages/react/src/components/ValidationMessage/index.ts b/packages/react/src/components/ValidationMessage/index.ts
index 836f460c6e..90369a6bc9 100644
--- a/packages/react/src/components/ValidationMessage/index.ts
+++ b/packages/react/src/components/ValidationMessage/index.ts
@@ -1 +1,2 @@
-export * from './ValidationMessage';
+export { ValidationMessage } from './ValidationMessage';
+export type { ValidationMessageProps } from './ValidationMessage';

From 4e1af4dd08bf1c879492aacc58910b7a67512aea Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 22 Jan 2025 13:48:38 +0100
Subject: [PATCH 06/10] another example on badge

---
 packages/react/src/components/Badge/Badge.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index 4684733f88..686ba27cba 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -23,6 +23,11 @@ export type BadgeProps = MergeRight<
  *
  * @example without children
  * <Badge count={5} maxCount={10} />
+ *
+ * @example with children
+ * <Badge count={5} maxCount={10}>
+ *   <Icon />
+ * </Badge>
  */
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
   { className, count, maxCount, ...rest },

From f801b2401d472a65cef346707d177207e7dbf689 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 22 Jan 2025 13:56:16 +0100
Subject: [PATCH 07/10] use `error`

---
 packages/react/src/components/Checkbox/Checkbox.tsx | 8 ++++----
 packages/react/src/components/Radio/Radio.tsx       | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
index 7a3f47f785..13da4be3c8 100644
--- a/packages/react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -27,9 +27,9 @@ export type CheckboxProps = MergeRight<
      */
     value?: InputProps['value'];
     /**
-     * Validation message for field
+     * Error message for field
      */
-    validation?: ReactNode;
+    error?: ReactNode;
   } & LabelRequired
 >;
 
@@ -48,7 +48,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       children,
       label,
       description,
-      validation,
+      error,
       ...rest
     },
     ref,
@@ -58,7 +58,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         <Input type='checkbox' ref={ref} {...rest} />
         {!!label && <Label weight='regular'>{label}</Label>}
         {!!description && <div data-field='description'>{description}</div>}
-        {!!validation && <ValidationMessage>{validation}</ValidationMessage>}
+        {!!error && <ValidationMessage>{error}</ValidationMessage>}
       </Field>
     );
   },
diff --git a/packages/react/src/components/Radio/Radio.tsx b/packages/react/src/components/Radio/Radio.tsx
index 9018606ef2..86f06758b8 100644
--- a/packages/react/src/components/Radio/Radio.tsx
+++ b/packages/react/src/components/Radio/Radio.tsx
@@ -27,9 +27,9 @@ export type RadioProps = MergeRight<
      */
     value?: InputProps['value'];
     /**
-     * Validation message for field
+     * Error message for field
      */
-    validation?: ReactNode;
+    error?: ReactNode;
   } & LabelRequired
 >;
 
@@ -47,7 +47,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
     children,
     label,
     description,
-    validation,
+    error,
     ...rest
   },
   ref,
@@ -57,7 +57,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
       <Input type='radio' ref={ref} {...rest} />
       {!!label && <Label weight='regular'>{label}</Label>}
       {!!description && <div data-field='description'>{description}</div>}
-      {!!validation && <ValidationMessage>{validation}</ValidationMessage>}
+      {!!error && <ValidationMessage>{error}</ValidationMessage>}
     </Field>
   );
 });

From 6ec831f39370603ad2d2dc3aba0fc581ec358181 Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 23 Jan 2025 09:37:29 +0100
Subject: [PATCH 08/10] Create ten-mirrors-pretend.md

---
 .changeset/ten-mirrors-pretend.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/ten-mirrors-pretend.md

diff --git a/.changeset/ten-mirrors-pretend.md b/.changeset/ten-mirrors-pretend.md
new file mode 100644
index 0000000000..bb0a60fc67
--- /dev/null
+++ b/.changeset/ten-mirrors-pretend.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": minor
+---
+
+**Radio**: Rename `validation` to `error`

From eeae168fdbea84e84ea1c808c47120810877c430 Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 23 Jan 2025 09:37:50 +0100
Subject: [PATCH 09/10] Create popular-tools-impress.md

---
 .changeset/popular-tools-impress.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/popular-tools-impress.md

diff --git a/.changeset/popular-tools-impress.md b/.changeset/popular-tools-impress.md
new file mode 100644
index 0000000000..c0bca17180
--- /dev/null
+++ b/.changeset/popular-tools-impress.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": minor
+---
+
+**Checkbox**: Rename `validation` to `error`

From e21ec0a9cd0f93a6372d1c103f8a2d3b6137c2ce Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 23 Jan 2025 12:52:27 +0100
Subject: [PATCH 10/10] field, fieldset, triggercontex

---
 packages/react/src/components/Dropdown/Dropdown.tsx | 13 ++++++++++++-
 packages/react/src/components/Field/Field.tsx       |  2 +-
 packages/react/src/components/Fieldset/Fieldset.tsx |  2 +-
 packages/react/src/components/Modal/Modal.mdx       |  2 +-
 packages/react/src/components/Modal/Modal.tsx       | 12 +++++++++++-
 packages/react/src/components/Popover/Popover.tsx   |  8 +++++++-
 6 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 46d184cca2..9cb307972c 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -21,7 +21,7 @@ export type DropdownProps = MergeRight<
 /**
  * Dropdown component, used to display a list of options.
  *
- * @example
+ * @example with TriggerContext
  * <Dropdown.TriggerContext>
  *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
  *   <Dropdown placement='bottom-end'>
@@ -33,6 +33,17 @@ export type DropdownProps = MergeRight<
  *     </Dropdown.List>
  *   </Dropdown>
  * </Dropdown.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-dropdown">Trigger</Button>
+ * <Dropdown id="my-dropdown">
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *   <Dropdown.List>
+ *     <Dropdown.Item>
+ *       <Dropdown.Button>Item</Dropdown.Button>
+ *     </Dropdown.Item>
+ *   </Dropdown.List>
+ * </Dropdown>
  */
 export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   function DropdownContent(
diff --git a/packages/react/src/components/Field/Field.tsx b/packages/react/src/components/Field/Field.tsx
index 8cedd6ccf3..b36505abac 100644
--- a/packages/react/src/components/Field/Field.tsx
+++ b/packages/react/src/components/Field/Field.tsx
@@ -18,7 +18,7 @@ export type FieldProps = {
  * Field component, used to wrap a form field.
  *
  * @example
- * <Field data-my-field>
+ * <Field>
  *   <Label>Kort beskrivelse</Label>
  *   <Field.Description>Beskrivelse</Field.Description>
  *   <Input />
diff --git a/packages/react/src/components/Fieldset/Fieldset.tsx b/packages/react/src/components/Fieldset/Fieldset.tsx
index b4ab4a726b..66d262ce19 100644
--- a/packages/react/src/components/Fieldset/Fieldset.tsx
+++ b/packages/react/src/components/Fieldset/Fieldset.tsx
@@ -8,7 +8,7 @@ export type FieldsetProps = DefaultProps &
   FieldsetHTMLAttributes<HTMLFieldSetElement>;
 
 /**
- * Fieldset component, used to wrap a form field.
+ * Fieldset component, used to wrap a form field. Uses native `fieldset` element.
  *
  * @example
  * <Fieldset>
diff --git a/packages/react/src/components/Modal/Modal.mdx b/packages/react/src/components/Modal/Modal.mdx
index 74f059a5db..c3436e5057 100644
--- a/packages/react/src/components/Modal/Modal.mdx
+++ b/packages/react/src/components/Modal/Modal.mdx
@@ -43,7 +43,7 @@ const modalRef = useRef<HTMLDialogElement>(null);
 ...
 
 <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
-<Modal ref={modalRef} >
+<Modal ref={modalRef}>
   Content
 </Modal>
 ```
diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
index a6c7947ac7..7db7e1c93c 100644
--- a/packages/react/src/components/Modal/Modal.tsx
+++ b/packages/react/src/components/Modal/Modal.tsx
@@ -37,7 +37,7 @@ export type ModalProps = MergeRight<
 /**
  * Modal component, used to display a modal dialog.
  *
- * @example
+ * @example with TriggerContext
  * <Modal.TriggerContext>
  *   <Modal.Trigger>Open Modal</Modal.Trigger>
  *   <Modal>
@@ -46,6 +46,16 @@ export type ModalProps = MergeRight<
  *     </Modal.Block>
  *   </Modal>
  * </Modal.TriggerContext>
+ *
+ * @example without TriggerContext
+ * const modalRef = useRef<HTMLDialogElement>(null);
+ *
+ * ...
+ *
+ * <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
+ * <Modal ref={modalRef}>
+ *   Content
+ * </Modal>
  */
 export const Modal = forwardRef<HTMLDialogElement, ModalProps>(function Modal(
   {
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
index 9c58386c76..85505aa201 100644
--- a/packages/react/src/components/Popover/Popover.tsx
+++ b/packages/react/src/components/Popover/Popover.tsx
@@ -72,13 +72,19 @@ export type PopoverProps = MergeRight<
 /**
  * Popover component, used to display content in a popover over an element.
  *
- * @example
+ * @example with TriggerContext
  * <Popover.TriggerContext>
  *   <Popover.Trigger>Open Popover</Popover.Trigger>
  *   <Popover>
  *     Content
  *   </Popover>
  * </Popover.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-popover">Open Popover</Button>
+ * <Popover id="my-popover">
+ *   Content
+ * </Popover>
  */
 export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   function Popover(