Repository: digdir/designsystemet
Pull request #3823 (2025-07-07 10:26:37)

chore: ideas for design-tokens previews

github-actions[bot]: <h2>Coverage Report</h2>
<table> <thead> <tr> <th align="center">Status</th> <th align="left">Category</th> <th align="right">Percentage</th> <th align="right">Covered / Total</th> </tr> </thead> <tbody> <tr> <td align="center">🔵</td> <td align="left">Lines</td> <td align="right">50.81%</td> <td align="right">3320 / 6534</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Statements</td> <td align="right">50.81%</td> <td align="right">3320 / 6534</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Functions</td> <td align="right">83.96%</td> <td align="right">220 / 262</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Branches</td> <td align="right">77.46%</td> <td align="right">581 / 750</td> </tr> </tbody> </table><details><summary>File Coverage</summary>No changed files found.</details>
<em>Generated in workflow <a href=https://github.com/digdir/designsystemet/actions/runs/16118196366>#3624</a> for commit <a href="https://github.com/digdir/designsystemet/commit/e8f70c6db46d31cdc16842f7cd747e8e56a5e922">e8f70c6</a> by the <a href="https://github.com/davelosert/vitest-coverage-report-action">Vitest Coverage Report Action</a></em>

<!-- vitest-coverage-report-marker-root -->

Patch:
diff --git a/.changeset/polite-planes-divide.md b/.changeset/polite-planes-divide.md
new file mode 100644
index 00000000..a845151c
--- /dev/null
+++ b/.changeset/polite-planes-divide.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/tidy-dots-call.md b/.changeset/tidy-dots-call.md
new file mode 100644
index 00000000..33d71ca3
--- /dev/null
+++ b/.changeset/tidy-dots-call.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Internal change: Use kebab case instead of pascal case for files and folders
diff --git a/apps/www/app/_components/mdx-components/mdx-components.tsx b/apps/www/app/_components/mdx-components/mdx-components.tsx
index cee2dc9d..39770221 100644
--- a/apps/www/app/_components/mdx-components/mdx-components.tsx
+++ b/apps/www/app/_components/mdx-components/mdx-components.tsx
@@ -27,7 +27,7 @@ import { ColorInfoTable } from '~/_components/color-info-table/color-info-table'
 import { Contributors } from '~/_components/contributors/contributors';
 import { Image } from '~/_components/image/image';
 import { ResponsiveIframe } from '~/_components/responsive-iframe/responsive-iframe';
-import { TokenList } from '~/_components/tokens-comp/token-list/token-list';
+import { TokenList } from '~/_components/tokens/token-list/token-list';
 import { VideoCard } from '../video-card/video-card';
 import classes from './mdx-components.module.css';
 
diff --git a/apps/www/app/_components/tokens-comp/color/color-previews.tsx b/apps/www/app/_components/tokens-comp/color/color-previews.tsx
deleted file mode 100644
index f231b813..00000000
--- a/apps/www/app/_components/tokens-comp/color/color-previews.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import classes from './color.module.css';
-
-export const ColorDark = ({ colorVariable }: { colorVariable: string }) => {
-  return (
-    <>
-      <div className={classes.colorBox} data-color-scheme='dark'>
-        <div
-          style={{ backgroundColor: colorVariable }}
-          className={classes.color}
-        ></div>
-      </div>
-    </>
-  );
-};
-
-export const ColorLight = ({ colorVariable }: { colorVariable: string }) => {
-  return (
-    <>
-      <div className={classes.colorBox} data-color-scheme='light'>
-        <div
-          style={{ backgroundColor: colorVariable }}
-          className={classes.color}
-        ></div>
-      </div>
-    </>
-  );
-};
diff --git a/apps/www/app/_components/tokens-comp/color/color-table.tsx b/apps/www/app/_components/tokens-comp/color/color-table.tsx
deleted file mode 100644
index df93b980..00000000
--- a/apps/www/app/_components/tokens-comp/color/color-table.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Heading, Table } from '@digdir/designsystemet-react';
-import type { HTMLAttributes } from 'react';
-import { useTranslation } from 'react-i18next';
-import { capitalizeString } from '~/_utils/string-helpers';
-import type { PreviewToken } from '../types';
-import { ColorDark, ColorLight } from './color-previews';
-
-type TokenTableProps = {
-  tokens: PreviewToken[];
-  title: string;
-} & HTMLAttributes<HTMLDivElement>;
-
-export const ColorTokensTable = ({ tokens, title }: TokenTableProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Table data-color='neutral'>
-      <caption>
-        <Heading level={4} data-size='md'>
-          {capitalizeString(title)}
-        </Heading>
-      </caption>
-      <Table.Head>
-        <Table.Row>
-          <Table.HeaderCell>{t('token-preview.table.name')}</Table.HeaderCell>
-          <Table.HeaderCell>{t('token-preview.table.light')}</Table.HeaderCell>
-          <Table.HeaderCell>{t('token-preview.table.dark')}</Table.HeaderCell>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        {tokens.map((token) => {
-          const name = token.variable;
-          const value = token.value;
-
-          return (
-            <Table.Row key={name}>
-              <Table.Cell>
-                <code>{name}</code>
-              </Table.Cell>
-              <Table.Cell>
-                <ColorLight colorVariable={value} />
-              </Table.Cell>
-              <Table.Cell>
-                <ColorDark colorVariable={value} />
-              </Table.Cell>
-            </Table.Row>
-          );
-        })}
-      </Table.Body>
-    </Table>
-  );
-};
diff --git a/apps/www/app/_components/tokens-comp/semantic/semantic-table.tsx b/apps/www/app/_components/tokens-comp/semantic/semantic-table.tsx
deleted file mode 100644
index 67587c8d..00000000
--- a/apps/www/app/_components/tokens-comp/semantic/semantic-table.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Heading, Table } from '@digdir/designsystemet-react';
-import { groupBy } from 'ramda';
-import type { HTMLAttributes } from 'react';
-import { useTranslation } from 'react-i18next';
-import { capitalizeString } from '~/_utils/string-helpers';
-import type { PreviewToken } from '../types';
-import {
-  BorderRadius,
-  ComputedValue,
-  Opacity,
-  Shadow,
-  Size,
-} from './seamantic-previews';
-import classes from './semantic.module.css';
-
-type TokenTableProps = {
-  tokens: PreviewToken[];
-} & HTMLAttributes<HTMLDivElement>;
-
-const groupedByPathIndex = (index = 0) =>
-  groupBy((token: PreviewToken) => token.path[index] || 'rest');
-
-const getValuePreview = (variable: string, value: string) => {
-  if (/^--ds-size.*\d$/.test(variable)) {
-    return <Size value={value} />;
-  }
-  if (/^--ds-border-radius(?!.*(scale|base)$)/.test(variable)) {
-    return <BorderRadius value={value} />;
-  }
-
-  if (/^--ds-shadow/.test(variable)) {
-    return <Shadow value={value} />;
-  }
-
-  if (/^--ds-opacity/.test(variable)) {
-    return <Opacity value={value} />;
-  }
-
-  return <code>{value}</code>;
-};
-
-const getValueRender = (variable: string, value: string) => {
-  if (!/opacity|shadow/.test(variable)) {
-    return <ComputedValue value={value} />;
-  }
-
-  return <code>{value}</code>;
-};
-
-export const SemanticTokensTable = ({ tokens }: TokenTableProps) => {
-  const { t } = useTranslation();
-
-  const groupedTokens = groupedByPathIndex(0)(tokens);
-
-  return Object.entries(groupedTokens).map(([path, tokens]) => {
-    if (tokens?.length === 0) {
-      return null;
-    }
-
-    const prettifiedPath = path.replace(/_/g, ''); // Remove underscores from size tokens
-
-    return (
-      <div key={path} className={classes['overflow-table']}>
-        <Table data-color='neutral'>
-          <caption>
-            <Heading level={5} data-size='sm'>
-              {capitalizeString(prettifiedPath)}
-            </Heading>
-          </caption>
-          <Table.Head>
-            <Table.Row>
-              <Table.HeaderCell>
-                {t('token-preview.table.name')}
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                {t('token-preview.table.value')}
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                {t('token-preview.table.variable')}
-              </Table.HeaderCell>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            {tokens?.map(({ variable, value }) => (
-              <Table.Row key={variable}>
-                <Table.Cell>
-                  <code>{variable}</code>
-                </Table.Cell>
-                <Table.Cell>{getValueRender(variable, value)}</Table.Cell>
-                <Table.Cell>{getValuePreview(variable, value)}</Table.Cell>
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-      </div>
-    );
-  });
-};
diff --git a/apps/www/app/_components/tokens-comp/semantic/semantic.module.css b/apps/www/app/_components/tokens-comp/semantic/semantic.module.css
deleted file mode 100644
index 7de3fe20..00000000
--- a/apps/www/app/_components/tokens-comp/semantic/semantic.module.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.size {
-  display: flex;
-  align-items: center;
-  gap: var(--ds-size-2);
-
-  .bar {
-    height: 36px;
-    background-color: var(--ds-color-accent-base-default);
-    border-radius: 2px;
-    max-width: 300px;
-  }
-}
-
-.shadow {
-  display: flex;
-  align-items: center;
-  gap: var(--ds-size-2);
-  background-color: #fff;
-  padding: var(--ds-size-2);
-  border-radius: var(--ds-border-radius-md);
-  height: var(--ds-size-14);
-  width: var(--ds-size-14);
-  aspect-ratio: 1;
-
-  .color {
-    height: var(--ds-size-10);
-    width: var(--ds-size-10);
-    aspect-ratio: 1;
-    border-radius: var(--ds-border-radius-md);
-    border: 1px solid #ebebeb;
-  }
-}
-
-.radius {
-  display: flex;
-  align-items: center;
-  gap: var(--ds-size-2);
-
-  .bar {
-    height: 36px;
-    width: 72px;
-    background-color: var(--ds-color-accent-base-default);
-  }
-}
-
-.overflow-table {
-  max-width: 100%;
-  overflow-x: auto;
-
-  @media (max-width: 768px) {
-    max-width: 340px;
-  }
-}
diff --git a/apps/www/app/_components/tokens/color/color-previews.tsx b/apps/www/app/_components/tokens/color/color-previews.tsx
new file mode 100644
index 00000000..093c9944
--- /dev/null
+++ b/apps/www/app/_components/tokens/color/color-previews.tsx
@@ -0,0 +1,23 @@
+import classes from './color.module.css';
+
+export const ColorDark = ({ colorVariable }: { colorVariable: string }) => {
+  return (
+    <div className={classes.colorBox} data-color-scheme='dark'>
+      <div
+        style={{ backgroundColor: colorVariable }}
+        className={classes.color}
+      ></div>
+    </div>
+  );
+};
+
+export const ColorLight = ({ colorVariable }: { colorVariable: string }) => {
+  return (
+    <div className={classes.colorBox} data-color-scheme='light'>
+      <div
+        style={{ backgroundColor: colorVariable }}
+        className={classes.color}
+      ></div>
+    </div>
+  );
+};
diff --git a/apps/www/app/_components/tokens/color/color-table.tsx b/apps/www/app/_components/tokens/color/color-table.tsx
new file mode 100644
index 00000000..ed162e63
--- /dev/null
+++ b/apps/www/app/_components/tokens/color/color-table.tsx
@@ -0,0 +1,79 @@
+import {
+  Field,
+  Heading,
+  Label,
+  Select,
+  Table,
+} from '@digdir/designsystemet-react';
+import { type HTMLAttributes, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { capitalizeString } from '~/_utils/string-helpers';
+import type { PreviewToken } from '../types';
+import { ColorDark, ColorLight } from './color-previews';
+
+type TokenTableProps = {
+  colorTokens: Record<string, PreviewToken[]>;
+} & HTMLAttributes<HTMLDivElement>;
+
+export const ColorTokensTable = ({ colorTokens }: TokenTableProps) => {
+  const { t } = useTranslation();
+  const colors = Object.keys(colorTokens);
+  const [selectedColor, setSelectedColor] =
+    useState<(typeof colors)[number]>('neutral');
+  const tokens = colorTokens[selectedColor] || [];
+
+  return (
+    <div data-color={selectedColor}>
+      <Field>
+        <Label>{t('token-preview.color.select-label')}</Label>
+        <Select
+          value={selectedColor || ''}
+          onChange={(e) =>
+            setSelectedColor(e.target.value as (typeof colors)[number])
+          }
+        >
+          {colors.map((color) => (
+            <Select.Option key={color} value={color}>
+              {color}
+            </Select.Option>
+          ))}
+        </Select>
+      </Field>
+      <Table data-color='neutral' data-colors={colors} key={selectedColor}>
+        <caption>
+          <Heading level={4} data-size='md'>
+            {capitalizeString(selectedColor)}
+          </Heading>
+        </caption>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>{t('token-preview.table.name')}</Table.HeaderCell>
+            <Table.HeaderCell>
+              {t('token-preview.table.light')}
+            </Table.HeaderCell>
+            <Table.HeaderCell>{t('token-preview.table.dark')}</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {tokens.map((token) => {
+            const name = token.variable;
+            const value = token.value;
+            return (
+              <Table.Row key={name}>
+                <Table.Cell>
+                  <code>{name}</code>
+                </Table.Cell>
+                <Table.Cell>
+                  <ColorLight colorVariable={value} />
+                </Table.Cell>
+                <Table.Cell>
+                  <ColorDark colorVariable={value} />
+                </Table.Cell>
+              </Table.Row>
+            );
+          })}
+        </Table.Body>
+      </Table>
+    </div>
+  );
+};
diff --git a/apps/www/app/_components/tokens-comp/color/color.module.css b/apps/www/app/_components/tokens/color/color.module.css
similarity index 100%
rename from apps/www/app/_components/tokens-comp/color/color.module.css
rename to apps/www/app/_components/tokens/color/color.module.css
diff --git a/apps/www/app/tokens/color.json b/apps/www/app/_components/tokens/design-tokens/color.json
similarity index 100%
rename from apps/www/app/tokens/color.json
rename to apps/www/app/_components/tokens/design-tokens/color.json
diff --git a/apps/www/app/tokens/semantic.json b/apps/www/app/_components/tokens/design-tokens/semantic.json
similarity index 100%
rename from apps/www/app/tokens/semantic.json
rename to apps/www/app/_components/tokens/design-tokens/semantic.json
diff --git a/apps/www/app/tokens/typography.json b/apps/www/app/_components/tokens/design-tokens/typography.json
similarity index 96%
rename from apps/www/app/tokens/typography.json
rename to apps/www/app/_components/tokens/design-tokens/typography.json
index 3bddf5b4..b4d75935 100644
--- a/apps/www/app/tokens/typography.json
+++ b/apps/www/app/_components/tokens/design-tokens/typography.json
@@ -110,7 +110,7 @@
         "1"
       ],
       "variable": "--ds-letter-spacing-1",
-      "value": "-1%"
+      "value": "-0.01em"
     },
     {
       "path": [
@@ -118,7 +118,7 @@
         "2"
       ],
       "variable": "--ds-letter-spacing-2",
-      "value": "-0.5%"
+      "value": "-0.005em"
     },
     {
       "path": [
@@ -126,7 +126,7 @@
         "3"
       ],
       "variable": "--ds-letter-spacing-3",
-      "value": "-0.25%"
+      "value": "-0.0025em"
     },
     {
       "path": [
@@ -134,7 +134,7 @@
         "4"
       ],
       "variable": "--ds-letter-spacing-4",
-      "value": "-0.15%"
+      "value": "-0.0015em"
     },
     {
       "path": [
@@ -142,7 +142,7 @@
         "5"
       ],
       "variable": "--ds-letter-spacing-5",
-      "value": "0%"
+      "value": "0em"
     },
     {
       "path": [
@@ -150,7 +150,7 @@
         "6"
       ],
       "variable": "--ds-letter-spacing-6",
-      "value": "0.15%"
+      "value": "0.0015em"
     },
     {
       "path": [
@@ -158,7 +158,7 @@
         "7"
       ],
       "variable": "--ds-letter-spacing-7",
-      "value": "0.25%"
+      "value": "0.0025em"
     },
     {
       "path": [
@@ -166,7 +166,7 @@
         "8"
       ],
       "variable": "--ds-letter-spacing-8",
-      "value": "0.5%"
+      "value": "0.005em"
     },
     {
       "path": [
@@ -174,7 +174,7 @@
         "9"
       ],
       "variable": "--ds-letter-spacing-9",
-      "value": "1.5%"
+      "value": "0.015em"
     },
     {
       "path": [
@@ -245,7 +245,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-heading-2xl-letter-spacing",
-      "value": "-1%"
+      "value": "-0.01em"
     },
     {
       "path": [
@@ -285,7 +285,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-heading-xl-letter-spacing",
-      "value": "-1%"
+      "value": "-0.01em"
     },
     {
       "path": [
@@ -325,7 +325,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-heading-lg-letter-spacing",
-      "value": "-0.5%"
+      "value": "-0.005em"
     },
     {
       "path": [
@@ -365,7 +365,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-heading-md-letter-spacing",
-      "value": "-0.25%"
+      "value": "-0.0025em"
     },
     {
       "path": [
@@ -405,7 +405,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-heading-sm-letter-spacing",
-      "value": "0%"
+      "value": "0em"
     },
     {
       "path": [
@@ -445,7 +445,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-heading-xs-letter-spacing",
-      "value": "0.15%"
+      "value": "0.0015em"
     },
     {
       "path": [
@@ -485,7 +485,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-heading-2xs-letter-spacing",
-      "value": "0.15%"
+      "value": "0.0015em"
     },
     {
       "path": [
@@ -525,7 +525,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-xl-letter-spacing",
-      "value": "0.5%"
+      "value": "0.005em"
     },
     {
       "path": [
@@ -565,7 +565,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-lg-letter-spacing",
-      "value": "0.5%"
+      "value": "0.005em"
     },
     {
       "path": [
@@ -605,7 +605,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-md-letter-spacing",
-      "value": "0.5%"
+      "value": "0.005em"
     },
     {
       "path": [
@@ -645,7 +645,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-sm-letter-spacing",
-      "value": "0.25%"
+      "value": "0.0025em"
     },
     {
       "path": [
@@ -685,7 +685,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-xs-letter-spacing",
-      "value": "0.15%"
+      "value": "0.0015em"
     },
     {
       "path": [
@@ -729,7 +729,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-short-xl-letter-spacing",
-      "value": "0.5%"
+      "value": "0.005em"
     },
     {
       "path": [
@@ -773,7 +773,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-short-lg-letter-spacing",
-      "value": "0.5%"
+      "value": "0.005em"
     },
     {
       "path": [
@@ -817,7 +817,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-short-md-letter-spacing",
-      "value": "0.5%"
+      "value": "0.005em"
     },
     {
       "path": [
@@ -861,7 +861,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-short-sm-letter-spacing",
-      "value": "0.25%"
+      "value": "0.0025em"
     },
     {
       "path": [
@@ -905,7 +905,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-short-xs-letter-spacing",
-      "value": "0.15%"
+      "value": "0.0015em"
     },
     {
       "path": [
@@ -949,7 +949,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-long-xl-letter-spacing",
-      "value": "0.5%"
+      "value": "0.005em"
     },
     {
       "path": [
@@ -993,7 +993,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-long-lg-letter-spacing",
-      "value": "0.5%"
+      "value": "0.005em"
     },
     {
       "path": [
@@ -1037,7 +1037,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-long-md-letter-spacing",
-      "value": "0.5%"
+      "value": "0.005em"
     },
     {
       "path": [
@@ -1081,7 +1081,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-long-sm-letter-spacing",
-      "value": "0.25%"
+      "value": "0.0025em"
     },
     {
       "path": [
@@ -1125,7 +1125,7 @@
         "letterSpacing"
       ],
       "variable": "--ds-body-long-xs-letter-spacing",
-      "value": "0.15%"
+      "value": "0.0015em"
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/app/_components/tokens-comp/semantic/seamantic-previews.tsx b/apps/www/app/_components/tokens/semantic/seamantic-previews.tsx
similarity index 71%
rename from apps/www/app/_components/tokens-comp/semantic/seamantic-previews.tsx
rename to apps/www/app/_components/tokens/semantic/seamantic-previews.tsx
index cc3afc2f..9848bc2b 100644
--- a/apps/www/app/_components/tokens-comp/semantic/seamantic-previews.tsx
+++ b/apps/www/app/_components/tokens/semantic/seamantic-previews.tsx
@@ -1,8 +1,11 @@
 import { useEffect, useState } from 'react';
 import classes from './semantic.module.css';
 
-const getComputedValue = (value: string) => {
+const getComputedValue = (value: string, size?: string) => {
   const elm = document.createElement('div');
+  if (size) {
+    elm.setAttribute('data-size', size);
+  }
   elm.style.cssText = `width: ${value}; height: ${value};`;
   document.body.appendChild(elm);
   const computedValue = getComputedStyle(elm).width;
@@ -11,15 +14,15 @@ const getComputedValue = (value: string) => {
   return computedValue;
 };
 
-export const Size = ({ value }: { value: string }) => {
+export const Size = ({ value, size }: { value: string; size?: string }) => {
   // This is a temp solution to get the computed value of the token. Find a better way to do this in https://github.com/digdir/designsystemet/issues/2946
   const [computedValue, setComputedValue] = useState<string>('');
 
   useEffect(() => {
     if (!document) return;
 
-    setComputedValue(getComputedValue(value));
-  }, [value]);
+    setComputedValue(getComputedValue(value, size));
+  }, [value, size]);
 
   return (
     <div className={classes.size}>
@@ -52,15 +55,29 @@ export const Opacity = ({ value }: { value: string }) => {
   );
 };
 
-export const ComputedValue = ({ value }: { value: string }) => {
+export const BorderWidth = ({ value }: { value: string }) => {
+  return (
+    <div className={classes['border-width']}>
+      <div className={classes.bar} style={{ borderWidth: value }}></div>
+    </div>
+  );
+};
+
+export const ComputedValue = ({
+  value,
+  size,
+}: {
+  value: string;
+  size?: string;
+}) => {
   // This is a temp solution to get the computed value of the token. Find a better way to do this in https://github.com/digdir/designsystemet/issues/2946
   const [computedValue, setComputedValue] = useState<string>('');
 
   useEffect(() => {
     if (!document) return;
 
-    setComputedValue(getComputedValue(value));
-  }, [value]);
+    setComputedValue(getComputedValue(value, size));
+  }, [value, size]);
 
   return <code>{computedValue}</code>;
 };
diff --git a/apps/www/app/_components/tokens/semantic/semantic-table.tsx b/apps/www/app/_components/tokens/semantic/semantic-table.tsx
new file mode 100644
index 00000000..37891335
--- /dev/null
+++ b/apps/www/app/_components/tokens/semantic/semantic-table.tsx
@@ -0,0 +1,203 @@
+import {
+  Field,
+  Heading,
+  Label,
+  Select,
+  type Size,
+  Table,
+} from '@digdir/designsystemet-react';
+import { groupBy } from 'ramda';
+import { type HTMLAttributes, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { capitalizeString } from '~/_utils/string-helpers';
+import type { PreviewToken } from '../types';
+import {
+  BorderRadius,
+  BorderWidth,
+  ComputedValue,
+  Opacity,
+  Shadow,
+  Size as SizePreview,
+} from './seamantic-previews';
+import classes from './semantic.module.css';
+
+type TokenTableProps = {
+  tokens: PreviewToken[];
+} & HTMLAttributes<HTMLDivElement>;
+
+const groupedByPathIndex = (index = 0) =>
+  groupBy((token: PreviewToken) => token.path[index] || 'rest');
+
+const getValuePreview = (variable: string, value: string, size?: string) => {
+  if (/^--ds-size.*\d$/.test(variable)) {
+    return <SizePreview value={value} size={size} />;
+  }
+  if (/^--ds-border-radius(?!.*(scale|base)$)/.test(variable)) {
+    return <BorderRadius value={value} />;
+  }
+
+  if (/^--ds-shadow/.test(variable)) {
+    return <Shadow value={value} />;
+  }
+
+  if (/^--ds-opacity/.test(variable)) {
+    return <Opacity value={value} />;
+  }
+
+  if (/^--ds-border-width/.test(variable)) {
+    return <BorderWidth value={value} />;
+  }
+
+  return <code>{value}</code>;
+};
+
+const getValueRender = (variable: string, value: string, size?: string) => {
+  if (!/opacity|shadow|size-base|size-step/.test(variable)) {
+    return <ComputedValue value={value} size={size} />;
+  }
+
+  return <code>{value}</code>;
+};
+
+const DefaultSemanticTable = ({
+  tokens,
+  title,
+}: {
+  tokens: PreviewToken[];
+  title: string;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div key={title} className={classes['overflow-table']}>
+      <Table data-color='accent'>
+        <caption>
+          <Heading level={5} data-size='sm'>
+            {capitalizeString(title)}
+          </Heading>
+        </caption>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>{t('token-preview.table.name')}</Table.HeaderCell>
+            <Table.HeaderCell>
+              {t('token-preview.table.value')}
+            </Table.HeaderCell>
+            <Table.HeaderCell>
+              {t('token-preview.table.variable')}
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {tokens?.map(({ variable, value }) => (
+            <Table.Row key={variable}>
+              <Table.Cell>
+                <code>{variable}</code>
+              </Table.Cell>
+              <Table.Cell>{getValueRender(variable, value)}</Table.Cell>
+              <Table.Cell>{getValuePreview(variable, value)}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    </div>
+  );
+};
+
+const SemanticSizeTable = ({
+  tokens,
+  title,
+}: {
+  tokens: PreviewToken[];
+  title: string;
+}) => {
+  const { t } = useTranslation();
+  const sizes: Size[] = ['sm', 'md', 'lg'];
+  const [selectedSize, setSelectedSize] = useState<Size>('md');
+
+  return (
+    <div key={title}>
+      <Field>
+        <Label>{t('token-preview.size.select-label')}</Label>
+        <Select
+          value={selectedSize || ''}
+          onChange={(e) =>
+            setSelectedSize(e.target.value as (typeof sizes)[number])
+          }
+        >
+          {sizes.map((size) => (
+            <Select.Option key={size} value={size}>
+              {size}
+            </Select.Option>
+          ))}
+        </Select>
+      </Field>
+      <div key={title} className={classes['overflow-table']}>
+        <Table data-color='accent'>
+          <caption>
+            <Heading level={5} data-size='sm'>
+              {capitalizeString(title)}
+            </Heading>
+          </caption>
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>
+                {t('token-preview.table.name')}
+              </Table.HeaderCell>
+              <Table.HeaderCell>
+                {t('token-preview.table.value')}
+              </Table.HeaderCell>
+              <Table.HeaderCell>
+                {t('token-preview.table.variable')}
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            {tokens?.map(({ variable, value }) => (
+              <Table.Row key={variable}>
+                <Table.Cell>
+                  <code>{variable}</code>
+                </Table.Cell>
+                <Table.Cell>
+                  {getValueRender(variable, value, selectedSize)}
+                </Table.Cell>
+                <Table.Cell>
+                  {getValuePreview(variable, value, selectedSize)}
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </div>
+    </div>
+  );
+};
+
+export const SemanticTokensTable = ({ tokens }: TokenTableProps) => {
+  const groupedTokens = groupedByPathIndex(0)(tokens);
+
+  return Object.entries(groupedTokens).map(([path, tokens]) => {
+    if (!tokens) {
+      return null;
+    }
+
+    const prettyPath = path.replace(/_/g, ''); // Remove underscores from size tokens
+
+    if (prettyPath === 'size') {
+      return (
+        <SemanticSizeTable
+          key={prettyPath}
+          tokens={tokens}
+          title={prettyPath}
+        />
+      );
+    }
+
+    return (
+      <DefaultSemanticTable
+        key={prettyPath}
+        tokens={tokens}
+        title={prettyPath}
+      />
+    );
+  });
+};
diff --git a/apps/www/app/_components/tokens/semantic/semantic.module.css b/apps/www/app/_components/tokens/semantic/semantic.module.css
new file mode 100644
index 00000000..aa2c00c0
--- /dev/null
+++ b/apps/www/app/_components/tokens/semantic/semantic.module.css
@@ -0,0 +1,70 @@
+.size {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-size-2);
+
+  .bar {
+    height: var(--ds-size-6);
+    background-color: var(--ds-color-base-default);
+    border-radius: 2px;
+  }
+}
+
+.shadow {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-size-2);
+  background-color: #fff;
+  padding: var(--ds-size-3);
+  border-radius: var(--ds-border-radius-md);
+  height: 70px;
+  width: 90px;
+
+  .color {
+    height: 100%;
+    width: 100%;
+    border-radius: var(--ds-border-radius-md);
+    border: 1px solid #ebebeb;
+  }
+}
+
+.radius {
+  display: flex;
+  align-items: center;
+  height: var(--ds-size-6);
+  width: 90px;
+  aspect-ratio: 1;
+
+  .bar {
+    height: 100%;
+    width: 100%;
+    background-color: var(--ds-color-base-default);
+  }
+}
+
+.border-width {
+  display: flex;
+  align-items: center;
+  padding: var(--ds-size-3);
+  border-radius: var(--ds-border-radius-md);
+  background-color: #fff;
+  height: 70px;
+  width: 90px;
+  aspect-ratio: 1;
+
+  .bar {
+    height: 100%;
+    width: 100%;
+    border-color: var(--ds-color-base-contrast-default);
+    border-style: solid;
+  }
+}
+
+.overflow-table {
+  max-width: 100%;
+  overflow-x: auto;
+
+  @media (max-width: 768px) {
+    max-width: 340px;
+  }
+}
diff --git a/apps/www/app/_components/tokens-comp/token-list/token-list.module.css b/apps/www/app/_components/tokens/token-list/token-list.module.css
similarity index 100%
rename from apps/www/app/_components/tokens-comp/token-list/token-list.module.css
rename to apps/www/app/_components/tokens/token-list/token-list.module.css
diff --git a/apps/www/app/_components/tokens-comp/token-list/token-list.tsx b/apps/www/app/_components/tokens/token-list/token-list.tsx
similarity index 74%
rename from apps/www/app/_components/tokens-comp/token-list/token-list.tsx
rename to apps/www/app/_components/tokens/token-list/token-list.tsx
index a7716c03..e16005f9 100644
--- a/apps/www/app/_components/tokens-comp/token-list/token-list.tsx
+++ b/apps/www/app/_components/tokens/token-list/token-list.tsx
@@ -9,10 +9,10 @@ import {
 import { Fragment, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { capitalizeString } from '~/_utils/string-helpers';
-import colorTokens from '~/tokens/color.json';
-import semanticTokens from '~/tokens/semantic.json';
-import typographyTokens from '~/tokens/typography.json';
 import { ColorTokensTable } from '../color/color-table';
+import colorTokens from '../design-tokens/color.json';
+import semanticTokens from '../design-tokens/semantic.json';
+import typographyTokens from '../design-tokens/typography.json';
 import { SemanticTokensTable } from '../semantic/semantic-table';
 import type { PreviewToken } from '../types';
 import { TypographyTable } from '../typography/typography-table';
@@ -49,9 +49,8 @@ export const TokenList = () => {
     setValue(value);
   }, 1000);
 
-  const filteredColorTokens = Object.entries(
-    filteredRecord(colorTokens, value),
-  );
+  const filteredColorTokens = filteredRecord(colorTokens, value);
+  const colorTokensCount = Object.keys(filteredColorTokens);
   const filteredTypographyTokens = Object.entries(
     filteredRecord(typographyTokens, value),
   );
@@ -59,6 +58,12 @@ export const TokenList = () => {
     tokenSearchFilter(token, value),
   );
 
+  const noSearchResult =
+    filteredSemanticTokens.length +
+      filteredTypographyTokens.length +
+      colorTokensCount.length ===
+    0;
+
   return (
     <>
       <Field>
@@ -73,22 +78,17 @@ export const TokenList = () => {
       </Field>
 
       <div className={classes.tokens}>
-        {filteredColorTokens.length > 0 &&
-          filteredColorTokens.map(([name, tokens]) => {
-            return (
-              <Fragment key={name}>
-                <Heading level={3} data-size='lg'>
-                  {t('token-preview.colors')}
-                </Heading>
-                <div className={classes.section}>
-                  <ColorTokensTable
-                    tokens={tokens}
-                    title={capitalizeString(name)}
-                  />
-                </div>
-              </Fragment>
-            );
-          })}
+        {colorTokensCount.length > 0 && (
+          <>
+            <Heading level={3} data-size='lg'>
+              {t('token-preview.colors')}
+            </Heading>
+            <Paragraph>{t('token-preview.color.description')}</Paragraph>
+            <div className={classes.section}>
+              <ColorTokensTable colorTokens={filteredColorTokens} />
+            </div>
+          </>
+        )}
 
         {filteredTypographyTokens.length > 0 &&
           filteredTypographyTokens.map(([name, tokens]) => {
@@ -111,16 +111,16 @@ export const TokenList = () => {
             <Heading level={3} data-size='lg'>
               {t('token-preview.semantic')}
             </Heading>
+            <Paragraph>{t('token-preview.size.description')}</Paragraph>
             <div className={classes.section}>
               <SemanticTokensTable tokens={filteredSemanticTokens} />
             </div>
           </>
         )}
 
-        {filteredSemanticTokens.length +
-          filteredTypographyTokens.length +
-          filteredColorTokens.length ===
-          0 && <Paragraph>{t('token-preview.no-results')}</Paragraph>}
+        {noSearchResult && (
+          <Paragraph>{t('token-preview.no-results')}</Paragraph>
+        )}
       </div>
     </>
   );
diff --git a/apps/www/app/_components/tokens-comp/types.ts b/apps/www/app/_components/tokens/types.ts
similarity index 100%
rename from apps/www/app/_components/tokens-comp/types.ts
rename to apps/www/app/_components/tokens/types.ts
diff --git a/apps/www/app/_components/tokens-comp/typography/typography-previews.tsx b/apps/www/app/_components/tokens/typography/typography-previews.tsx
similarity index 100%
rename from apps/www/app/_components/tokens-comp/typography/typography-previews.tsx
rename to apps/www/app/_components/tokens/typography/typography-previews.tsx
diff --git a/apps/www/app/_components/tokens-comp/typography/typography-table.tsx b/apps/www/app/_components/tokens/typography/typography-table.tsx
similarity index 100%
rename from apps/www/app/_components/tokens-comp/typography/typography-table.tsx
rename to apps/www/app/_components/tokens/typography/typography-table.tsx
diff --git a/apps/www/app/content/fundamentals/en/design-tokens/design-tokens.mdx b/apps/www/app/content/fundamentals/en/design-tokens/variables.mdx
similarity index 84%
rename from apps/www/app/content/fundamentals/en/design-tokens/design-tokens.mdx
rename to apps/www/app/content/fundamentals/en/design-tokens/variables.mdx
index 34446076..bb496e54 100644
--- a/apps/www/app/content/fundamentals/en/design-tokens/design-tokens.mdx
+++ b/apps/www/app/content/fundamentals/en/design-tokens/variables.mdx
@@ -1,6 +1,6 @@
 ---
-title: All design tokens
-sidebar_title: All design tokens
+title: Design tokens variables
+sidebar_title: Variables
 description: Design tokens are reusable values that serve as a bridge across all platforms.
 date: 2023-03-25
 category: Design Tokens
diff --git a/apps/www/app/content/fundamentals/no/design-tokens/design-tokens.mdx b/apps/www/app/content/fundamentals/no/design-tokens/variables.mdx
similarity index 84%
rename from apps/www/app/content/fundamentals/no/design-tokens/design-tokens.mdx
rename to apps/www/app/content/fundamentals/no/design-tokens/variables.mdx
index 02899287..19d9815a 100644
--- a/apps/www/app/content/fundamentals/no/design-tokens/design-tokens.mdx
+++ b/apps/www/app/content/fundamentals/no/design-tokens/variables.mdx
@@ -1,6 +1,6 @@
 ---
-title: Alle design tokens
-sidebar_title: Alle design tokens
+title: Design tokens variabler
+sidebar_title: Variabler
 description: Design tokens er gjenbrukbare verdier som fungerer som et bindeleddet mellom alle flater.
 date: 2025-06-30
 category: Design Tokens
diff --git a/apps/www/app/layouts/fundamentals/layout.tsx b/apps/www/app/layouts/fundamentals/layout.tsx
index c8062783..df5f2747 100644
--- a/apps/www/app/layouts/fundamentals/layout.tsx
+++ b/apps/www/app/layouts/fundamentals/layout.tsx
@@ -26,7 +26,7 @@ export const loader = async ({ params: { lang } }: Route.LoaderArgs) => {
   }
 
   const mdxFiles = getFilesFromContentDir(join('fundamentals', lang));
-  console.log('Found MDX files:', mdxFiles);
+  // console.log('Found MDX files:', mdxFiles);
 
   const cats: {
     [key: string]: {
diff --git a/apps/www/app/locales/en.ts b/apps/www/app/locales/en.ts
index e876851e..54a9406e 100644
--- a/apps/www/app/locales/en.ts
+++ b/apps/www/app/locales/en.ts
@@ -169,6 +169,16 @@ export default {
     'pause-video': 'Pause video',
   },
   'token-preview': {
+    size: {
+      description:
+        'The value of size variables is set by the `data-size` attribute.',
+      'select-label': 'Select size (data-size)',
+    },
+    color: {
+      description:
+        'The value of color variables is set by the `data-color` attribute.',
+      'select-label': 'Select color (data-color)',
+    },
     'search-in-design-tokens': 'Search in design tokens',
     'search-input-aria-label':
       'Search for variable names in CSS for design tokens',
diff --git a/apps/www/app/locales/no.ts b/apps/www/app/locales/no.ts
index af8bcfe4..2aa58648 100644
--- a/apps/www/app/locales/no.ts
+++ b/apps/www/app/locales/no.ts
@@ -169,6 +169,16 @@ export default {
     'pause-video': 'Sett video på pause',
   },
   'token-preview': {
+    size: {
+      description:
+        'Verdien til størrelsevariabler settes av `data-size`-attributtet.',
+      'select-label': 'Velg størrelse (data-size)',
+    },
+    color: {
+      description:
+        'Verdien til fargevariabler settes av `data-color`-attributtet.',
+      'select-label': 'Velg farge (data-color)',
+    },
     'search-in-design-tokens': 'Søk i design tokens',
     'search-input-aria-label': 'Søk på variabel navn i CSS for design tokens',
     colors: 'Farger',
diff --git a/apps/www/scripts/copy-content.js b/apps/www/scripts/copy-content.js
index d25eedac..c965e3f2 100644
--- a/apps/www/scripts/copy-content.js
+++ b/apps/www/scripts/copy-content.js
@@ -49,9 +49,9 @@ const contentPath = join(dirname, 'app/content');
 const distPath = join(dirname, 'dist/content');
 const clientPath = join(dirname, 'dist/client/app/content');
 
-console.log(
-  `Copying content from ${contentPath} to ${distPath} and ${clientPath}`,
-);
+// console.log(
+//   `Copying content from ${contentPath} to ${distPath} and ${clientPath}`,
+// );
 
 try {
   if (!existsSync(distPath)) {
diff --git a/biome.jsonc b/biome.jsonc
index 39f99398..7a11041b 100644
--- a/biome.jsonc
+++ b/biome.jsonc
@@ -16,7 +16,6 @@
       "!**/.github/**",
       "!**/.changeset/**",
       "!**/design-tokens/**/*",
-      "!**/apps/www/app/tokens/**",
       "!**/dist/**/*",
       "!**/packages/theme/**/*.css",
       "!**/tsconfig.*.json", // https://github.com/biomejs/biome/issues/1151
diff --git a/design-tokens/$designsystemet.json b/design-tokens/$designsystemet.json
index 6c04ef2e..d5902362 100644
--- a/design-tokens/$designsystemet.json
+++ b/design-tokens/$designsystemet.json
@@ -1,4 +1,4 @@
 {
   "name": "@digdir/designsystemet",
   "version": "1.1.3"
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 90ef02dd..97f00a67 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "chromatic": "pnpm --filter @web/storybook chromatic",
     "update:template": "pnpm --filter @digdir/designsystemet update:template",
     "update:theme-digdir": "pnpm --filter @digdir/designsystemet update:theme-digdir",
-    "update:theme": "pnpm --filter @digdir/designsystemet-theme update:theme"
+    "update:theme": "pnpm build:cli && pnpm --filter @digdir/designsystemet-theme update:theme"
   },
   "devDependencies": {
     "@biomejs/biome": "2.0.6",
diff --git a/packages/cli/src/scripts/update-preview-tokens.ts b/packages/cli/src/scripts/update-preview-tokens.ts
index bb42f6e2..cbc1aa5f 100644
--- a/packages/cli/src/scripts/update-preview-tokens.ts
+++ b/packages/cli/src/scripts/update-preview-tokens.ts
@@ -38,7 +38,7 @@ type PreviewToken = { variable: string; value: string };
 
 export const formatTheme = async (themeConfig: Theme) => {
   const { tokenSets } = await createTokens(themeConfig);
-  const outDir = '../../../../apps/www/app/tokens';
+  const outDir = '../../../../apps/www/app/_components/tokens/design-tokens';
 
   const $themes = await generate$Themes(['dark', 'light'], [themeConfig.name], themeConfig.colors);
   const processed$themes = $themes.map(processThemeObject);
diff --git a/packages/react/src/components/Alert/index.ts b/packages/react/src/components/Alert/index.ts
deleted file mode 100644
index c3be8839..00000000
--- a/packages/react/src/components/Alert/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { AlertProps } from './Alert';
-export { Alert } from './Alert';
diff --git a/packages/react/src/components/Avatar/index.ts b/packages/react/src/components/Avatar/index.ts
deleted file mode 100644
index b7cefc27..00000000
--- a/packages/react/src/components/Avatar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { AvatarProps } from './Avatar';
-export { Avatar } from './Avatar';
diff --git a/packages/react/src/components/Button/index.ts b/packages/react/src/components/Button/index.ts
deleted file mode 100644
index 9cad84da..00000000
--- a/packages/react/src/components/Button/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { ButtonProps } from './Button';
-export { Button } from './Button';
diff --git a/packages/react/src/components/Checkbox/index.ts b/packages/react/src/components/Checkbox/index.ts
deleted file mode 100644
index fcd01666..00000000
--- a/packages/react/src/components/Checkbox/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { CheckboxProps } from './Checkbox';
-export { Checkbox } from './Checkbox';
diff --git a/packages/react/src/components/Combobox/Combobox.mdx b/packages/react/src/components/Combobox/Combobox.mdx
index 3778b73c..58943dde 100644
--- a/packages/react/src/components/Combobox/Combobox.mdx
+++ b/packages/react/src/components/Combobox/Combobox.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/addon-docs/blocks';
 import css from '@digdir/designsystemet-css/combobox.css?inline';
 import { CssVariables } from '@doc-components';
-import { Alert } from '../Alert';
+import { Alert } from '../alert';
 import * as ComboboxStories from './Combobox.stories';
 
 import { Combobox } from '.';
diff --git a/packages/react/src/components/Combobox/Combobox.stories.tsx b/packages/react/src/components/Combobox/Combobox.stories.tsx
index b4095d14..b4662641 100644
--- a/packages/react/src/components/Combobox/Combobox.stories.tsx
+++ b/packages/react/src/components/Combobox/Combobox.stories.tsx
@@ -3,13 +3,13 @@ import type { FormEvent } from 'react';
 import { useState } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
-import { Button } from '../Button';
-import { Chip } from '../Chip';
-import { Dialog } from '../Dialog';
-import { Divider } from '../Divider';
-import { Heading } from '../Heading';
-import { Paragraph } from '../Paragraph';
-import { Switch } from '../Switch';
+import { Button } from '../button';
+import { Chip } from '../chip';
+import { Dialog } from '../dialog';
+import { Divider } from '../divider';
+import { Heading } from '../heading';
+import { Paragraph } from '../paragraph';
+import { Switch } from '../switch';
 import { data } from './data/data';
 import { Combobox } from './index';
 
diff --git a/packages/react/src/components/Combobox/Combobox.tsx b/packages/react/src/components/Combobox/Combobox.tsx
index 95da80a6..c7f84469 100644
--- a/packages/react/src/components/Combobox/Combobox.tsx
+++ b/packages/react/src/components/Combobox/Combobox.tsx
@@ -4,7 +4,7 @@ import cl from 'clsx/lite';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { omit, useDebounceCallback } from '../../utilities';
-import { Spinner } from '../Spinner';
+import { Spinner } from '../spinner';
 import { ComboboxContext } from './ComboboxContext';
 import { ComboboxIdProvider } from './ComboboxIdContext';
 import { ComboboxCustom } from './Custom';
diff --git a/packages/react/src/components/Combobox/Custom.tsx b/packages/react/src/components/Combobox/Custom.tsx
index cd017c08..d5afb96b 100644
--- a/packages/react/src/components/Combobox/Custom.tsx
+++ b/packages/react/src/components/Combobox/Custom.tsx
@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import { forwardRef, useContext, useId, useMemo } from 'react';
 
 import { omit } from '../../utilities';
-import { Label } from '../Label';
+import { Label } from '../label';
 
 import { ComboboxContext } from './ComboboxContext';
 import { useComboboxId } from './ComboboxIdContext';
diff --git a/packages/react/src/components/Combobox/Empty.tsx b/packages/react/src/components/Combobox/Empty.tsx
index 98faf381..34b40c14 100644
--- a/packages/react/src/components/Combobox/Empty.tsx
+++ b/packages/react/src/components/Combobox/Empty.tsx
@@ -2,7 +2,7 @@ import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useContext } from 'react';
 
-import { Label } from '../Label';
+import { Label } from '../label';
 
 import { ComboboxContext } from './ComboboxContext';
 
diff --git a/packages/react/src/components/Combobox/Option/Option.tsx b/packages/react/src/components/Combobox/Option/Option.tsx
index 9e7f4d46..b20fe77b 100644
--- a/packages/react/src/components/Combobox/Option/Option.tsx
+++ b/packages/react/src/components/Combobox/Option/Option.tsx
@@ -3,7 +3,7 @@ import type { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
 import { forwardRef, isValidElement, memo, useContext, useId } from 'react';
 
 import { omit } from '../../../utilities/omit/omit';
-import { Label } from '../../Label';
+import { Label } from '../../label';
 import { ComboboxContext } from '../ComboboxContext';
 
 import ComboboxOptionDescription from './Description';
diff --git a/packages/react/src/components/Combobox/Option/useComboboxOption.tsx b/packages/react/src/components/Combobox/Option/useComboboxOption.tsx
index 469c2dee..4b424cfb 100644
--- a/packages/react/src/components/Combobox/Option/useComboboxOption.tsx
+++ b/packages/react/src/components/Combobox/Option/useComboboxOption.tsx
@@ -2,7 +2,7 @@ import { useMergeRefs } from '@floating-ui/react';
 import type { Ref } from 'react';
 import { useContext, useEffect, useId, useMemo } from 'react';
 
-import { useDebounceCallback } from '../../../utilities/hooks/useDebounceCallback/useDebounceCallback';
+import { useDebounceCallback } from '../../../utilities/hooks/use-debounce-callback/use-debounce-callback';
 import { ComboboxContext } from '../ComboboxContext';
 import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext';
 import type { Option } from '../useCombobox';
diff --git a/packages/react/src/components/Combobox/internal/ComboboxChips.tsx b/packages/react/src/components/Combobox/internal/ComboboxChips.tsx
index f9902423..cbf15f1e 100644
--- a/packages/react/src/components/Combobox/internal/ComboboxChips.tsx
+++ b/packages/react/src/components/Combobox/internal/ComboboxChips.tsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { ChipRemovable } from '../../Chip';
+import { ChipRemovable } from '../../chip';
 import { ComboboxContext } from '../ComboboxContext';
 
 const ComboboxChips = () => {
diff --git a/packages/react/src/components/Combobox/internal/ComboboxError.tsx b/packages/react/src/components/Combobox/internal/ComboboxError.tsx
index 681636b7..fc63ea22 100644
--- a/packages/react/src/components/Combobox/internal/ComboboxError.tsx
+++ b/packages/react/src/components/Combobox/internal/ComboboxError.tsx
@@ -1,4 +1,4 @@
-import { ValidationMessage } from '../../ValidationMessage';
+import { ValidationMessage } from '../../validation-message';
 import type { ComboboxProps } from '../Combobox';
 import type { useFormField } from '../useFormField/useFormField';
 
diff --git a/packages/react/src/components/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/Combobox/internal/ComboboxInput.tsx
index 9174c7a3..d0adc961 100644
--- a/packages/react/src/components/Combobox/internal/ComboboxInput.tsx
+++ b/packages/react/src/components/Combobox/internal/ComboboxInput.tsx
@@ -10,7 +10,7 @@ import type {
 import { useContext, useRef } from 'react';
 
 import { omit } from '../../../utilities';
-import { Paragraph } from '../../Paragraph';
+import { Paragraph } from '../../paragraph';
 import type { ComboboxProps } from '../Combobox';
 import { ComboboxContext } from '../ComboboxContext';
 import { useComboboxIdDispatch } from '../ComboboxIdContext';
diff --git a/packages/react/src/components/Combobox/internal/ComboboxLabel.tsx b/packages/react/src/components/Combobox/internal/ComboboxLabel.tsx
index 56e9ead7..0969ae6d 100644
--- a/packages/react/src/components/Combobox/internal/ComboboxLabel.tsx
+++ b/packages/react/src/components/Combobox/internal/ComboboxLabel.tsx
@@ -1,8 +1,8 @@
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 
-import { Label } from '../../Label';
-import { Paragraph } from '../../Paragraph';
+import { Label } from '../../label';
+import { Paragraph } from '../../paragraph';
 import type { ComboboxProps } from '../Combobox';
 import type { useFormField } from '../useFormField/useFormField';
 
diff --git a/packages/react/src/components/Divider/index.tsx b/packages/react/src/components/Divider/index.tsx
deleted file mode 100644
index 35eb7a25..00000000
--- a/packages/react/src/components/Divider/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { DividerProps } from './Divider';
-export { Divider } from './Divider';
diff --git a/packages/react/src/components/Heading/index.ts b/packages/react/src/components/Heading/index.ts
deleted file mode 100644
index 6cfa3a67..00000000
--- a/packages/react/src/components/Heading/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { HeadingProps } from './Heading';
-export { Heading } from './Heading';
diff --git a/packages/react/src/components/Input/index.ts b/packages/react/src/components/Input/index.ts
deleted file mode 100644
index 803d2fba..00000000
--- a/packages/react/src/components/Input/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { InputProps } from './Input';
-export { Input } from './Input';
diff --git a/packages/react/src/components/Label/index.ts b/packages/react/src/components/Label/index.ts
deleted file mode 100644
index a0e5b8cb..00000000
--- a/packages/react/src/components/Label/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { LabelProps } from './Label';
-export { Label } from './Label';
diff --git a/packages/react/src/components/Link/index.ts b/packages/react/src/components/Link/index.ts
deleted file mode 100644
index b7c07a83..00000000
--- a/packages/react/src/components/Link/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { LinkProps } from './Link';
-export { Link } from './Link';
diff --git a/packages/react/src/components/Paragraph/index.ts b/packages/react/src/components/Paragraph/index.ts
deleted file mode 100644
index c7181512..00000000
--- a/packages/react/src/components/Paragraph/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { ParagraphProps } from './Paragraph';
-export { Paragraph } from './Paragraph';
diff --git a/packages/react/src/components/Radio/index.ts b/packages/react/src/components/Radio/index.ts
deleted file mode 100644
index 16d0af64..00000000
--- a/packages/react/src/components/Radio/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { RadioProps } from './Radio';
-export { Radio } from './Radio';
diff --git a/packages/react/src/components/Skeleton/index.ts b/packages/react/src/components/Skeleton/index.ts
deleted file mode 100644
index 8391a3cb..00000000
--- a/packages/react/src/components/Skeleton/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { SkeletonProps } from './Skeleton';
-export { Skeleton } from './Skeleton';
diff --git a/packages/react/src/components/SkipLink/index.ts b/packages/react/src/components/SkipLink/index.ts
deleted file mode 100644
index b186ec99..00000000
--- a/packages/react/src/components/SkipLink/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { SkipLinkProps } from './SkipLink';
-export { SkipLink } from './SkipLink';
diff --git a/packages/react/src/components/Spinner/index.ts b/packages/react/src/components/Spinner/index.ts
deleted file mode 100644
index 09f04753..00000000
--- a/packages/react/src/components/Spinner/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { SpinnerProps } from './Spinner';
-export { Spinner } from './Spinner';
diff --git a/packages/react/src/components/Switch/index.ts b/packages/react/src/components/Switch/index.ts
deleted file mode 100644
index c912077d..00000000
--- a/packages/react/src/components/Switch/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { SwitchProps } from './Switch';
-export { Switch } from './Switch';
diff --git a/packages/react/src/components/Tag/index.ts b/packages/react/src/components/Tag/index.ts
deleted file mode 100644
index bcaf093d..00000000
--- a/packages/react/src/components/Tag/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { TagProps } from './Tag';
-export { Tag } from './Tag';
diff --git a/packages/react/src/components/Textarea/index.ts b/packages/react/src/components/Textarea/index.ts
deleted file mode 100644
index a306d22e..00000000
--- a/packages/react/src/components/Textarea/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { TextareaProps } from './Textarea';
-export { Textarea } from './Textarea';
diff --git a/packages/react/src/components/Textfield/index.ts b/packages/react/src/components/Textfield/index.ts
deleted file mode 100644
index 9c1e7116..00000000
--- a/packages/react/src/components/Textfield/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { TextfieldProps } from './Textfield';
-export { Textfield } from './Textfield';
diff --git a/packages/react/src/components/Tooltip/index.ts b/packages/react/src/components/Tooltip/index.ts
deleted file mode 100644
index 4b702c9d..00000000
--- a/packages/react/src/components/Tooltip/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { TooltipProps } from './Tooltip';
-export { Tooltip } from './Tooltip';
diff --git a/packages/react/src/components/ValidationMessage/index.ts b/packages/react/src/components/ValidationMessage/index.ts
deleted file mode 100644
index 4ae0bccf..00000000
--- a/packages/react/src/components/ValidationMessage/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { ValidationMessageProps } from './ValidationMessage';
-export { ValidationMessage } from './ValidationMessage';
diff --git a/packages/react/src/components/Alert/Alert.chromatic.tsx b/packages/react/src/components/alert/alert.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Alert/Alert.chromatic.tsx
rename to packages/react/src/components/alert/alert.chromatic.tsx
index 3fd64aac..6ef0ee62 100644
--- a/packages/react/src/components/Alert/Alert.chromatic.tsx
+++ b/packages/react/src/components/alert/alert.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Alert } from '.';
-import * as AlertStories from './Alert.stories';
+import * as AlertStories from './alert.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Alert',
diff --git a/packages/react/src/components/Alert/Alert.mdx b/packages/react/src/components/alert/alert.mdx
similarity index 99%
rename from packages/react/src/components/Alert/Alert.mdx
rename to packages/react/src/components/alert/alert.mdx
index e54395ea..358c0b52 100644
--- a/packages/react/src/components/Alert/Alert.mdx
+++ b/packages/react/src/components/alert/alert.mdx
@@ -2,7 +2,7 @@ import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables, ReactOrHtmlCanvas } from '@doc-components';
 import css from '@digdir/designsystemet-css/alert.css?inline';
 
-import * as AlertStories from './Alert.stories';
+import * as AlertStories from './alert.stories';
 
 <Meta of={AlertStories} />
 
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/alert/alert.tsx
similarity index 100%
rename from packages/react/src/components/Alert/Alert.tsx
rename to packages/react/src/components/alert/alert.tsx
diff --git a/packages/react/src/components/Alert/html-examples/correct-live-region.html b/packages/react/src/components/alert/html-examples/correct-live-region.html
similarity index 100%
rename from packages/react/src/components/Alert/html-examples/correct-live-region.html
rename to packages/react/src/components/alert/html-examples/correct-live-region.html
diff --git a/packages/react/src/components/Alert/html-examples/wrong-live-region.html b/packages/react/src/components/alert/html-examples/wrong-live-region.html
similarity index 100%
rename from packages/react/src/components/Alert/html-examples/wrong-live-region.html
rename to packages/react/src/components/alert/html-examples/wrong-live-region.html
diff --git a/packages/react/src/components/alert/index.ts b/packages/react/src/components/alert/index.ts
new file mode 100644
index 00000000..f3dd2ff7
--- /dev/null
+++ b/packages/react/src/components/alert/index.ts
@@ -0,0 +1,2 @@
+export type { AlertProps } from './alert';
+export { Alert } from './alert';
diff --git a/packages/react/src/components/Avatar/Avatar.chromatic.tsx b/packages/react/src/components/avatar/avatar.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Avatar/Avatar.chromatic.tsx
rename to packages/react/src/components/avatar/avatar.chromatic.tsx
index ee29240d..7b8053f6 100644
--- a/packages/react/src/components/Avatar/Avatar.chromatic.tsx
+++ b/packages/react/src/components/avatar/avatar.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Avatar } from '.';
-import * as AvatarStories from './Avatar.stories';
+import * as AvatarStories from './avatar.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Avatar',
diff --git a/packages/react/src/components/Avatar/Avatar.mdx b/packages/react/src/components/avatar/avatar.mdx
similarity index 98%
rename from packages/react/src/components/Avatar/Avatar.mdx
rename to packages/react/src/components/avatar/avatar.mdx
index f25f886b..270c52ac 100644
--- a/packages/react/src/components/Avatar/Avatar.mdx
+++ b/packages/react/src/components/avatar/avatar.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/avatar.css?inline';
-import * as AvatarStories from './Avatar.stories';
+import * as AvatarStories from './avatar.stories';
 
 <Meta of={AvatarStories} />
 
diff --git a/packages/react/src/components/Avatar/Avatar.stories.tsx b/packages/react/src/components/avatar/avatar.stories.tsx
similarity index 100%
rename from packages/react/src/components/Avatar/Avatar.stories.tsx
rename to packages/react/src/components/avatar/avatar.stories.tsx
diff --git a/packages/react/src/components/Avatar/Avatar.test.tsx b/packages/react/src/components/avatar/avatar.test.tsx
similarity index 100%
rename from packages/react/src/components/Avatar/Avatar.test.tsx
rename to packages/react/src/components/avatar/avatar.test.tsx
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/avatar/avatar.tsx
similarity index 100%
rename from packages/react/src/components/Avatar/Avatar.tsx
rename to packages/react/src/components/avatar/avatar.tsx
diff --git a/packages/react/src/components/avatar/index.ts b/packages/react/src/components/avatar/index.ts
new file mode 100644
index 00000000..31653000
--- /dev/null
+++ b/packages/react/src/components/avatar/index.ts
@@ -0,0 +1,2 @@
+export type { AvatarProps } from './avatar';
+export { Avatar } from './avatar';
diff --git a/packages/react/src/components/Badge/BadgePosition.tsx b/packages/react/src/components/badge/badge-position.tsx
similarity index 100%
rename from packages/react/src/components/Badge/BadgePosition.tsx
rename to packages/react/src/components/badge/badge-position.tsx
diff --git a/packages/react/src/components/Badge/Badge.chromatic.tsx b/packages/react/src/components/badge/badge.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Badge/Badge.chromatic.tsx
rename to packages/react/src/components/badge/badge.chromatic.tsx
index 1c9c7928..bcac8040 100644
--- a/packages/react/src/components/Badge/Badge.chromatic.tsx
+++ b/packages/react/src/components/badge/badge.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Badge } from '.';
-import * as BadgeStories from './Badge.stories';
+import * as BadgeStories from './badge.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Badge',
diff --git a/packages/react/src/components/Badge/Badge.mdx b/packages/react/src/components/badge/badge.mdx
similarity index 97%
rename from packages/react/src/components/Badge/Badge.mdx
rename to packages/react/src/components/badge/badge.mdx
index 39c87e67..8e53ad9f 100644
--- a/packages/react/src/components/Badge/Badge.mdx
+++ b/packages/react/src/components/badge/badge.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/badge.css?inline';
-import * as BadgeStories from './Badge.stories';
+import * as BadgeStories from './badge.stories';
 
 <Meta of={BadgeStories} />
 
diff --git a/packages/react/src/components/Badge/Badge.stories.tsx b/packages/react/src/components/badge/badge.stories.tsx
similarity index 98%
rename from packages/react/src/components/Badge/Badge.stories.tsx
rename to packages/react/src/components/badge/badge.stories.tsx
index e28e9912..c3c0d60d 100644
--- a/packages/react/src/components/Badge/Badge.stories.tsx
+++ b/packages/react/src/components/badge/badge.stories.tsx
@@ -8,8 +8,8 @@ import {
   VideoIcon,
 } from '@navikt/aksel-icons';
 import type { Meta, StoryFn } from '@storybook/react-vite';
-import { Button } from '../Button';
-import { Tabs } from '../Tabs';
+import { Button } from '../button';
+import { Tabs } from '../tabs';
 import { Badge } from './';
 
 type Story = StoryFn<typeof Badge>;
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/badge/badge.tsx
similarity index 100%
rename from packages/react/src/components/Badge/Badge.tsx
rename to packages/react/src/components/badge/badge.tsx
diff --git a/packages/react/src/components/Badge/index.ts b/packages/react/src/components/badge/index.ts
similarity index 61%
rename from packages/react/src/components/Badge/index.ts
rename to packages/react/src/components/badge/index.ts
index 2de9a281..3104869a 100644
--- a/packages/react/src/components/Badge/index.ts
+++ b/packages/react/src/components/badge/index.ts
@@ -1,5 +1,5 @@
-import { Badge as BadgeElm } from './Badge';
-import { BadgePosition } from './BadgePosition';
+import { Badge as BadgeElm } from './badge';
+import { BadgePosition } from './badge-position';
 
 /**
  * `Badge` is a non-interactive component for displaying status with or without numbers.
@@ -12,5 +12,5 @@ const Badge = Object.assign(BadgeElm, { Position: BadgePosition });
 Badge.Position.displayName = 'Badge.Position';
 
 export { Badge, BadgePosition };
-export type { BadgeProps } from './Badge';
-export type { BadgePositionProps } from './BadgePosition';
+export type { BadgeProps } from './badge';
+export type { BadgePositionProps } from './badge-position';
diff --git a/packages/react/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/react/src/components/breadcrumbs/breadcrumbs-item.tsx
similarity index 100%
rename from packages/react/src/components/Breadcrumbs/BreadcrumbsItem.tsx
rename to packages/react/src/components/breadcrumbs/breadcrumbs-item.tsx
diff --git a/packages/react/src/components/Breadcrumbs/BreadcrumbsLink.tsx b/packages/react/src/components/breadcrumbs/breadcrumbs-link.tsx
similarity index 77%
rename from packages/react/src/components/Breadcrumbs/BreadcrumbsLink.tsx
rename to packages/react/src/components/breadcrumbs/breadcrumbs-link.tsx
index e1b1d714..7ca1b5df 100644
--- a/packages/react/src/components/Breadcrumbs/BreadcrumbsLink.tsx
+++ b/packages/react/src/components/breadcrumbs/breadcrumbs-link.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
-import type { LinkProps } from '../Link';
-import { Link } from '../Link';
+import type { LinkProps } from '../link';
+import { Link } from '../link';
 
 export type BreadcrumbsLinkProps = LinkProps;
 
diff --git a/packages/react/src/components/Breadcrumbs/BreadcrumbsList.tsx b/packages/react/src/components/breadcrumbs/breadcrumbs-list.tsx
similarity index 100%
rename from packages/react/src/components/Breadcrumbs/BreadcrumbsList.tsx
rename to packages/react/src/components/breadcrumbs/breadcrumbs-list.tsx
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.chromatic.tsx b/packages/react/src/components/breadcrumbs/breadcrumbs.chromatic.tsx
similarity index 83%
rename from packages/react/src/components/Breadcrumbs/Breadcrumbs.chromatic.tsx
rename to packages/react/src/components/breadcrumbs/breadcrumbs.chromatic.tsx
index 51eddbe5..b94138ad 100644
--- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.chromatic.tsx
+++ b/packages/react/src/components/breadcrumbs/breadcrumbs.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Breadcrumbs } from '.';
-import * as BreadcrumbsStories from './Breadcrumbs.stories';
+import * as BreadcrumbsStories from './breadcrumbs.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Breadcrumbs',
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.mdx b/packages/react/src/components/breadcrumbs/breadcrumbs.mdx
similarity index 98%
rename from packages/react/src/components/Breadcrumbs/Breadcrumbs.mdx
rename to packages/react/src/components/breadcrumbs/breadcrumbs.mdx
index 13f8b9b7..a36b5b64 100644
--- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.mdx
+++ b/packages/react/src/components/breadcrumbs/breadcrumbs.mdx
@@ -1,7 +1,7 @@
 import { Meta, Controls, Primary, Canvas } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/breadcrumbs.css?inline';
-import * as BreadcrumbsStories from './Breadcrumbs.stories';
+import * as BreadcrumbsStories from './breadcrumbs.stories';
 
 <Meta of={BreadcrumbsStories} />
 
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/breadcrumbs/breadcrumbs.tsx
similarity index 100%
rename from packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
rename to packages/react/src/components/breadcrumbs/breadcrumbs.tsx
diff --git a/packages/react/src/components/Breadcrumbs/index.ts b/packages/react/src/components/breadcrumbs/index.ts
similarity index 65%
rename from packages/react/src/components/Breadcrumbs/index.ts
rename to packages/react/src/components/breadcrumbs/index.ts
index a0f99306..2b22fd17 100644
--- a/packages/react/src/components/Breadcrumbs/index.ts
+++ b/packages/react/src/components/breadcrumbs/index.ts
@@ -1,7 +1,7 @@
-import { Breadcrumbs as BreadcrumbsParent } from './Breadcrumbs';
-import { BreadcrumbsItem } from './BreadcrumbsItem';
-import { BreadcrumbsLink } from './BreadcrumbsLink';
-import { BreadcrumbsList } from './BreadcrumbsList';
+import { Breadcrumbs as BreadcrumbsParent } from './breadcrumbs';
+import { BreadcrumbsItem } from './breadcrumbs-item';
+import { BreadcrumbsLink } from './breadcrumbs-link';
+import { BreadcrumbsList } from './breadcrumbs-list';
 
 /**
  * `Breadcrumbs` is a component that displays a list of breadcrumbs.
@@ -31,8 +31,8 @@ Breadcrumbs.List.displayName = 'Breadcrumbs.List';
 Breadcrumbs.Item.displayName = 'Breadcrumbs.Item';
 Breadcrumbs.Link.displayName = 'Breadcrumbs.Link';
 
-export type { BreadcrumbsProps } from './Breadcrumbs';
-export type { BreadcrumbsItemProps } from './BreadcrumbsItem';
-export type { BreadcrumbsLinkProps } from './BreadcrumbsLink';
-export type { BreadcrumbsListProps } from './BreadcrumbsList';
+export type { BreadcrumbsProps } from './breadcrumbs';
+export type { BreadcrumbsItemProps } from './breadcrumbs-item';
+export type { BreadcrumbsLinkProps } from './breadcrumbs-link';
+export type { BreadcrumbsListProps } from './breadcrumbs-list';
 export { BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink };
diff --git a/packages/react/src/components/Button/Button.chromatic.tsx b/packages/react/src/components/button/button.chromatic.tsx
similarity index 77%
rename from packages/react/src/components/Button/Button.chromatic.tsx
rename to packages/react/src/components/button/button.chromatic.tsx
index 8cc4d6e3..3c7b85f0 100644
--- a/packages/react/src/components/Button/Button.chromatic.tsx
+++ b/packages/react/src/components/button/button.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
-import { Button } from './Button';
-import * as ButtonStories from './Button.stories';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
+import { Button } from './button';
+import * as ButtonStories from './button.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Button',
diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/button/button.mdx
similarity index 98%
rename from packages/react/src/components/Button/Button.mdx
rename to packages/react/src/components/button/button.mdx
index b9a93f91..f5c171fb 100644
--- a/packages/react/src/components/Button/Button.mdx
+++ b/packages/react/src/components/button/button.mdx
@@ -1,8 +1,8 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { Do, Dont, Stack, CssVariables } from '@doc-components';
-import { Button } from './Button';
+import { Button } from './button';
 
-import * as ButtonStories from './Button.stories';
+import * as ButtonStories from './button.stories';
 
 import css from '@digdir/designsystemet-css/button.css?inline';
 
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/button/button.tsx
similarity index 98%
rename from packages/react/src/components/Button/Button.tsx
rename to packages/react/src/components/button/button.tsx
index 5e32dcb4..975a7481 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/button/button.tsx
@@ -8,7 +8,7 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
-import { Spinner } from '../Spinner';
+import { Spinner } from '../spinner';
 
 export type ButtonProps = MergeRight<
   DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>,
diff --git a/packages/react/src/components/button/index.ts b/packages/react/src/components/button/index.ts
new file mode 100644
index 00000000..b9f8182b
--- /dev/null
+++ b/packages/react/src/components/button/index.ts
@@ -0,0 +1,2 @@
+export type { ButtonProps } from './button';
+export { Button } from './button';
diff --git a/packages/react/src/components/Card/CardBlock.tsx b/packages/react/src/components/card/card-block.tsx
similarity index 100%
rename from packages/react/src/components/Card/CardBlock.tsx
rename to packages/react/src/components/card/card-block.tsx
diff --git a/packages/react/src/components/Card/Card.chromatic.tsx b/packages/react/src/components/card/card.chromatic.tsx
similarity index 85%
rename from packages/react/src/components/Card/Card.chromatic.tsx
rename to packages/react/src/components/card/card.chromatic.tsx
index f6538152..ad74cf07 100644
--- a/packages/react/src/components/Card/Card.chromatic.tsx
+++ b/packages/react/src/components/card/card.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Card } from '.';
-import * as CardStories from './Card.stories';
+import * as CardStories from './card.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Card',
diff --git a/packages/react/src/components/Card/Card.mdx b/packages/react/src/components/card/card.mdx
similarity index 98%
rename from packages/react/src/components/Card/Card.mdx
rename to packages/react/src/components/card/card.mdx
index d02fc5c6..896ccb82 100644
--- a/packages/react/src/components/Card/Card.mdx
+++ b/packages/react/src/components/card/card.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/card.css?inline';
-import * as CardStories from './Card.stories';
+import * as CardStories from './card.stories';
 
 <Meta of={CardStories} />
 
diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/card/card.tsx
similarity index 100%
rename from packages/react/src/components/Card/Card.tsx
rename to packages/react/src/components/card/card.tsx
diff --git a/packages/react/src/components/Card/index.ts b/packages/react/src/components/card/index.ts
similarity index 65%
rename from packages/react/src/components/Card/index.ts
rename to packages/react/src/components/card/index.ts
index 87c2cde3..245bb106 100644
--- a/packages/react/src/components/Card/index.ts
+++ b/packages/react/src/components/card/index.ts
@@ -1,5 +1,5 @@
-import { Card as CardParent } from './Card';
-import { CardBlock } from './CardBlock';
+import { Card as CardParent } from './card';
+import { CardBlock } from './card-block';
 
 /**
  * Card component to present content in a structured way.
@@ -17,6 +17,6 @@ const Card = Object.assign(CardParent, {
 
 Card.Block.displayName = 'Card.Block';
 
-export type { CardProps } from './Card';
-export type { CardBlockProps } from './CardBlock';
+export type { CardProps } from './card';
+export type { CardBlockProps } from './card-block';
 export { Card, CardBlock };
diff --git a/packages/react/src/components/Checkbox/Checkbox.chromatic.tsx b/packages/react/src/components/checkbox/checkbox.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Checkbox/Checkbox.chromatic.tsx
rename to packages/react/src/components/checkbox/checkbox.chromatic.tsx
index 69f02e8d..59d9ad5e 100644
--- a/packages/react/src/components/Checkbox/Checkbox.chromatic.tsx
+++ b/packages/react/src/components/checkbox/checkbox.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Checkbox } from '.';
-import * as CheckboxStories from './Checkbox.stories';
+import * as CheckboxStories from './checkbox.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Checkbox',
diff --git a/packages/react/src/components/Checkbox/Checkbox.mdx b/packages/react/src/components/checkbox/checkbox.mdx
similarity index 98%
rename from packages/react/src/components/Checkbox/Checkbox.mdx
rename to packages/react/src/components/checkbox/checkbox.mdx
index de44fe3a..23f1cd9f 100644
--- a/packages/react/src/components/Checkbox/Checkbox.mdx
+++ b/packages/react/src/components/checkbox/checkbox.mdx
@@ -1,8 +1,8 @@
 import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/addon-docs/blocks';
 import { Do, Dont, Stack, CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/input.css?inline';
-import * as CheckboxStories from './Checkbox.stories';
-import * as useCheckboxGroupStories from '../../utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories';
+import * as CheckboxStories from './checkbox.stories';
+import * as useCheckboxGroupStories from '../../utilities/hooks/use-checkbox-group/use-checkbox-group.stories';
 
 <Meta of={CheckboxStories} />
 
diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/checkbox/checkbox.tsx
similarity index 88%
rename from packages/react/src/components/Checkbox/Checkbox.tsx
rename to packages/react/src/components/checkbox/checkbox.tsx
index 13da4be3..a262379e 100644
--- a/packages/react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/checkbox/checkbox.tsx
@@ -2,10 +2,10 @@ import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
 import type { DefaultProps, LabelRequired } from '../../types';
 import type { MergeRight } from '../../utilities';
-import { Field } from '../Field';
-import { Input, type InputProps } from '../Input';
-import { Label } from '../Label';
-import { ValidationMessage } from '../ValidationMessage';
+import { Field } from '../field';
+import { Input, type InputProps } from '../input';
+import { Label } from '../label';
+import { ValidationMessage } from '../validation-message';
 
 export type CheckboxProps = MergeRight<
   DefaultProps & Omit<InputProps, 'type' | 'role' | 'size'>,
diff --git a/packages/react/src/components/checkbox/index.ts b/packages/react/src/components/checkbox/index.ts
new file mode 100644
index 00000000..af54d4d4
--- /dev/null
+++ b/packages/react/src/components/checkbox/index.ts
@@ -0,0 +1,2 @@
+export type { CheckboxProps } from './checkbox';
+export { Checkbox } from './checkbox';
diff --git a/packages/react/src/components/Chip/Chip.chromatic.tsx b/packages/react/src/components/chip/chip.chromatic.tsx
similarity index 85%
rename from packages/react/src/components/Chip/Chip.chromatic.tsx
rename to packages/react/src/components/chip/chip.chromatic.tsx
index 73e0c1bc..b0166950 100644
--- a/packages/react/src/components/Chip/Chip.chromatic.tsx
+++ b/packages/react/src/components/chip/chip.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Chip } from '.';
-import * as ChipStories from './Chip.stories';
+import * as ChipStories from './chip.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Chip',
diff --git a/packages/react/src/components/Chip/Chip.mdx b/packages/react/src/components/chip/chip.mdx
similarity index 98%
rename from packages/react/src/components/Chip/Chip.mdx
rename to packages/react/src/components/chip/chip.mdx
index c3685932..4311a13d 100644
--- a/packages/react/src/components/Chip/Chip.mdx
+++ b/packages/react/src/components/chip/chip.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/chip.css?inline';
-import * as ChipStories from './Chip.stories';
+import * as ChipStories from './chip.stories';
 
 <Meta of={ChipStories} />
 
diff --git a/packages/react/src/components/Chip/Chip.stories.tsx b/packages/react/src/components/chip/chip.stories.tsx
similarity index 100%
rename from packages/react/src/components/Chip/Chip.stories.tsx
rename to packages/react/src/components/chip/chip.stories.tsx
diff --git a/packages/react/src/components/Chip/Chips.test.tsx b/packages/react/src/components/chip/chips.test.tsx
similarity index 100%
rename from packages/react/src/components/Chip/Chips.test.tsx
rename to packages/react/src/components/chip/chips.test.tsx
diff --git a/packages/react/src/components/Chip/Chips.tsx b/packages/react/src/components/chip/chips.tsx
similarity index 98%
rename from packages/react/src/components/Chip/Chips.tsx
rename to packages/react/src/components/chip/chips.tsx
index bcd22085..cba7c89e 100644
--- a/packages/react/src/components/Chip/Chips.tsx
+++ b/packages/react/src/components/chip/chips.tsx
@@ -4,7 +4,7 @@ import type { ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
-import { Input, type InputProps } from '../Input';
+import { Input, type InputProps } from '../input';
 
 type ChipBaseProps = {
   /**
diff --git a/packages/react/src/components/Chip/index.ts b/packages/react/src/components/chip/index.ts
similarity index 94%
rename from packages/react/src/components/Chip/index.ts
rename to packages/react/src/components/chip/index.ts
index 694b62f2..47fa4fbc 100644
--- a/packages/react/src/components/Chip/index.ts
+++ b/packages/react/src/components/chip/index.ts
@@ -1,4 +1,4 @@
-import { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './Chips';
+import { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './chips';
 
 const Chip = {
   Button: ChipButton,
@@ -17,5 +17,5 @@ export type {
   ChipCheckboxProps,
   ChipRadioProps,
   ChipRemovableProps,
-} from './Chips';
+} from './chips';
 export { Chip, ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };
diff --git a/packages/react/src/components/Details/DetailsContent.tsx b/packages/react/src/components/details/details-content.tsx
similarity index 100%
rename from packages/react/src/components/Details/DetailsContent.tsx
rename to packages/react/src/components/details/details-content.tsx
diff --git a/packages/react/src/components/Details/DetailsSummary.tsx b/packages/react/src/components/details/details-summary.tsx
similarity index 100%
rename from packages/react/src/components/Details/DetailsSummary.tsx
rename to packages/react/src/components/details/details-summary.tsx
diff --git a/packages/react/src/components/Details/Details.chromatic.tsx b/packages/react/src/components/details/details.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Details/Details.chromatic.tsx
rename to packages/react/src/components/details/details.chromatic.tsx
index 0587569b..92788187 100644
--- a/packages/react/src/components/Details/Details.chromatic.tsx
+++ b/packages/react/src/components/details/details.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Details } from '.';
-import * as DetailsStories from './Details.stories';
+import * as DetailsStories from './details.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Details',
diff --git a/packages/react/src/components/Details/Details.mdx b/packages/react/src/components/details/details.mdx
similarity index 98%
rename from packages/react/src/components/Details/Details.mdx
rename to packages/react/src/components/details/details.mdx
index bbd6988a..11781927 100644
--- a/packages/react/src/components/Details/Details.mdx
+++ b/packages/react/src/components/details/details.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 
-import * as DetailsStories from './Details.stories';
+import * as DetailsStories from './details.stories';
 
 import { Details } from '.';
 import css from '@digdir/designsystemet-css/details.css?inline';
diff --git a/packages/react/src/components/Details/Details.stories.tsx b/packages/react/src/components/details/details.stories.tsx
similarity index 100%
rename from packages/react/src/components/Details/Details.stories.tsx
rename to packages/react/src/components/details/details.stories.tsx
diff --git a/packages/react/src/components/Details/Details.test.tsx b/packages/react/src/components/details/details.test.tsx
similarity index 100%
rename from packages/react/src/components/Details/Details.test.tsx
rename to packages/react/src/components/details/details.test.tsx
diff --git a/packages/react/src/components/Details/Details.tsx b/packages/react/src/components/details/details.tsx
similarity index 100%
rename from packages/react/src/components/Details/Details.tsx
rename to packages/react/src/components/details/details.tsx
diff --git a/packages/react/src/components/Details/index.ts b/packages/react/src/components/details/index.ts
similarity index 59%
rename from packages/react/src/components/Details/index.ts
rename to packages/react/src/components/details/index.ts
index d3b112c6..087f57c3 100644
--- a/packages/react/src/components/Details/index.ts
+++ b/packages/react/src/components/details/index.ts
@@ -1,6 +1,6 @@
-import { Details as DetailsParent } from './Details';
-import { DetailsContent } from './DetailsContent';
-import { DetailsSummary } from './DetailsSummary';
+import { Details as DetailsParent } from './details';
+import { DetailsContent } from './details-content';
+import { DetailsSummary } from './details-summary';
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.
@@ -19,7 +19,7 @@ const Details = Object.assign(DetailsParent, {
 Details.Summary.displayName = 'Details.Summary';
 Details.Content.displayName = 'Details.Content';
 
-export type { DetailsProps } from './Details';
-export type { DetailsContentProps } from './DetailsContent';
-export type { DetailsSummaryProps } from './DetailsSummary';
+export type { DetailsProps } from './details';
+export type { DetailsContentProps } from './details-content';
+export type { DetailsSummaryProps } from './details-summary';
 export { Details, DetailsContent, DetailsSummary };
diff --git a/packages/react/src/components/Dialog/DialogBlock.tsx b/packages/react/src/components/dialog/dialog-block.tsx
similarity index 100%
rename from packages/react/src/components/Dialog/DialogBlock.tsx
rename to packages/react/src/components/dialog/dialog-block.tsx
diff --git a/packages/react/src/components/Dialog/DialogTriggerContext.tsx b/packages/react/src/components/dialog/dialog-trigger-context.tsx
similarity index 100%
rename from packages/react/src/components/Dialog/DialogTriggerContext.tsx
rename to packages/react/src/components/dialog/dialog-trigger-context.tsx
diff --git a/packages/react/src/components/Dialog/DialogTrigger.tsx b/packages/react/src/components/dialog/dialog-trigger.tsx
similarity index 92%
rename from packages/react/src/components/Dialog/DialogTrigger.tsx
rename to packages/react/src/components/dialog/dialog-trigger.tsx
index 34709ab6..9864ee43 100644
--- a/packages/react/src/components/Dialog/DialogTrigger.tsx
+++ b/packages/react/src/components/dialog/dialog-trigger.tsx
@@ -2,8 +2,8 @@ import { Slot } from '@radix-ui/react-slot';
 import type { ComponentPropsWithRef } from 'react';
 import { forwardRef, useContext } from 'react';
 
-import { Button } from '../Button/Button';
-import { Context } from './DialogTriggerContext';
+import { Button } from '../button/button';
+import { Context } from './dialog-trigger-context';
 
 export type DialogTriggerProps = ComponentPropsWithRef<typeof Button>;
 
diff --git a/packages/react/src/components/Dialog/Dialog.mdx b/packages/react/src/components/dialog/dialog.mdx
similarity index 99%
rename from packages/react/src/components/Dialog/Dialog.mdx
rename to packages/react/src/components/dialog/dialog.mdx
index 28ee7a6b..30d8e5b7 100644
--- a/packages/react/src/components/Dialog/Dialog.mdx
+++ b/packages/react/src/components/dialog/dialog.mdx
@@ -1,7 +1,7 @@
 import { Meta, Primary, Controls, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/dialog.css?inline';
-import * as DialogStories from './Dialog.stories';
+import * as DialogStories from './dialog.stories';
 
 import { Dialog } from './';
 
diff --git a/packages/react/src/components/Dialog/Dialog.stories.tsx b/packages/react/src/components/dialog/dialog.stories.tsx
similarity index 100%
rename from packages/react/src/components/Dialog/Dialog.stories.tsx
rename to packages/react/src/components/dialog/dialog.stories.tsx
diff --git a/packages/react/src/components/Dialog/Dialog.test.tsx b/packages/react/src/components/dialog/dialog.test.tsx
similarity index 100%
rename from packages/react/src/components/Dialog/Dialog.test.tsx
rename to packages/react/src/components/dialog/dialog.test.tsx
diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/dialog/dialog.tsx
similarity index 98%
rename from packages/react/src/components/Dialog/Dialog.tsx
rename to packages/react/src/components/dialog/dialog.tsx
index bf29c173..58561e9b 100644
--- a/packages/react/src/components/Dialog/Dialog.tsx
+++ b/packages/react/src/components/dialog/dialog.tsx
@@ -5,8 +5,8 @@ import { forwardRef, useContext, useEffect, useRef } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
 import { useMergeRefs } from '../../utilities/hooks';
-import { Button } from '../Button';
-import { Context } from './DialogTriggerContext';
+import { Button } from '../button';
+import { Context } from './dialog-trigger-context';
 
 export type DialogProps = MergeRight<
   DefaultProps & DialogHTMLAttributes<HTMLDialogElement>,
diff --git a/packages/react/src/components/Dialog/index.ts b/packages/react/src/components/dialog/index.ts
similarity index 58%
rename from packages/react/src/components/Dialog/index.ts
rename to packages/react/src/components/dialog/index.ts
index 63f5954c..33a9ed70 100644
--- a/packages/react/src/components/Dialog/index.ts
+++ b/packages/react/src/components/dialog/index.ts
@@ -1,7 +1,7 @@
-import { Dialog as DialogParent } from './Dialog';
-import { DialogBlock } from './DialogBlock';
-import { DialogTrigger } from './DialogTrigger';
-import { DialogTriggerContext } from './DialogTriggerContext';
+import { Dialog as DialogParent } from './dialog';
+import { DialogBlock } from './dialog-block';
+import { DialogTrigger } from './dialog-trigger';
+import { DialogTriggerContext } from './dialog-trigger-context';
 
 /**
  * Dialog component, used to display a Dialog dialog.
@@ -26,8 +26,8 @@ Dialog.Block.displayName = 'Dialog.Block';
 Dialog.TriggerContext.displayName = 'Dialog.TriggerContext';
 Dialog.Trigger.displayName = 'Dialog.Trigger';
 
-export type { DialogProps } from './Dialog';
-export type { DialogBlockProps } from './DialogBlock';
-export type { DialogTriggerProps } from './DialogTrigger';
-export type { DialogTriggerContextProps } from './DialogTriggerContext';
+export type { DialogProps } from './dialog';
+export type { DialogBlockProps } from './dialog-block';
+export type { DialogTriggerProps } from './dialog-trigger';
+export type { DialogTriggerContextProps } from './dialog-trigger-context';
 export { Dialog, DialogBlock, DialogTriggerContext, DialogTrigger };
diff --git a/packages/react/src/components/Divider/Divider.chromatic.tsx b/packages/react/src/components/divider/divider.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Divider/Divider.chromatic.tsx
rename to packages/react/src/components/divider/divider.chromatic.tsx
index 40bebebe..0fb46cbb 100644
--- a/packages/react/src/components/Divider/Divider.chromatic.tsx
+++ b/packages/react/src/components/divider/divider.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Divider } from '.';
-import * as DividerStories from './Divider.stories';
+import * as DividerStories from './divider.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Divider',
diff --git a/packages/react/src/components/Divider/Divider.mdx b/packages/react/src/components/divider/divider.mdx
similarity index 96%
rename from packages/react/src/components/Divider/Divider.mdx
rename to packages/react/src/components/divider/divider.mdx
index 820b4dbe..2b5910fa 100644
--- a/packages/react/src/components/Divider/Divider.mdx
+++ b/packages/react/src/components/divider/divider.mdx
@@ -1,7 +1,7 @@
 import { Meta, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/divider.css?inline';
-import * as DividerStories from './Divider.stories';
+import * as DividerStories from './divider.stories';
 
 <Meta of={DividerStories} />
 
diff --git a/packages/react/src/components/Divider/Divider.stories.tsx b/packages/react/src/components/divider/divider.stories.tsx
similarity index 92%
rename from packages/react/src/components/Divider/Divider.stories.tsx
rename to packages/react/src/components/divider/divider.stories.tsx
index 9fd1d1a0..e1ca50fa 100644
--- a/packages/react/src/components/Divider/Divider.stories.tsx
+++ b/packages/react/src/components/divider/divider.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react-vite';
 
-import { Paragraph } from '../Paragraph';
+import { Paragraph } from '../paragraph';
 
 import { Divider } from './';
 
diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/divider/divider.tsx
similarity index 100%
rename from packages/react/src/components/Divider/Divider.tsx
rename to packages/react/src/components/divider/divider.tsx
diff --git a/packages/react/src/components/divider/index.tsx b/packages/react/src/components/divider/index.tsx
new file mode 100644
index 00000000..d1793caf
--- /dev/null
+++ b/packages/react/src/components/divider/index.tsx
@@ -0,0 +1,2 @@
+export type { DividerProps } from './divider';
+export { Divider } from './divider';
diff --git a/packages/react/src/components/Dropdown/DropdownButton.tsx b/packages/react/src/components/dropdown/dropdown-button.tsx
similarity index 83%
rename from packages/react/src/components/Dropdown/DropdownButton.tsx
rename to packages/react/src/components/dropdown/dropdown-button.tsx
index 51ee262d..e6d41bed 100644
--- a/packages/react/src/components/Dropdown/DropdownButton.tsx
+++ b/packages/react/src/components/dropdown/dropdown-button.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Button, type ButtonProps } from '../Button/Button';
+import { Button, type ButtonProps } from '../button/button';
 
 export type DropdownButtonProps = Omit<ButtonProps, 'variant'>;
 
diff --git a/packages/react/src/components/Dropdown/DropdownHeading.tsx b/packages/react/src/components/dropdown/dropdown-heading.tsx
similarity index 83%
rename from packages/react/src/components/Dropdown/DropdownHeading.tsx
rename to packages/react/src/components/dropdown/dropdown-heading.tsx
index 5d4dab7b..0aa735e3 100644
--- a/packages/react/src/components/Dropdown/DropdownHeading.tsx
+++ b/packages/react/src/components/dropdown/dropdown-heading.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { Heading, type HeadingProps } from '../Heading';
+import { Heading, type HeadingProps } from '../heading';
 
 export type DropdownHeadingProps = HeadingProps;
 
diff --git a/packages/react/src/components/Dropdown/DropdownItem.tsx b/packages/react/src/components/dropdown/dropdown-item.tsx
similarity index 100%
rename from packages/react/src/components/Dropdown/DropdownItem.tsx
rename to packages/react/src/components/dropdown/dropdown-item.tsx
diff --git a/packages/react/src/components/Dropdown/DropdownList.tsx b/packages/react/src/components/dropdown/dropdown-list.tsx
similarity index 100%
rename from packages/react/src/components/Dropdown/DropdownList.tsx
rename to packages/react/src/components/dropdown/dropdown-list.tsx
diff --git a/packages/react/src/components/Dropdown/DropdownTriggerContext.tsx b/packages/react/src/components/dropdown/dropdown-trigger-context.tsx
similarity index 93%
rename from packages/react/src/components/Dropdown/DropdownTriggerContext.tsx
rename to packages/react/src/components/dropdown/dropdown-trigger-context.tsx
index d56b33ae..0d07a37d 100644
--- a/packages/react/src/components/Dropdown/DropdownTriggerContext.tsx
+++ b/packages/react/src/components/dropdown/dropdown-trigger-context.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-import { PopoverTriggerContext } from '../Popover';
+import { PopoverTriggerContext } from '../popover';
 
 export type DropdownTriggerContextProps = {
   children: ReactNode;
diff --git a/packages/react/src/components/Dropdown/DropdownTrigger.tsx b/packages/react/src/components/dropdown/dropdown-trigger.tsx
similarity index 82%
rename from packages/react/src/components/Dropdown/DropdownTrigger.tsx
rename to packages/react/src/components/dropdown/dropdown-trigger.tsx
index 3c168abe..9f16f346 100644
--- a/packages/react/src/components/Dropdown/DropdownTrigger.tsx
+++ b/packages/react/src/components/dropdown/dropdown-trigger.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { PopoverTrigger, type PopoverTriggerProps } from '../Popover';
+import { PopoverTrigger, type PopoverTriggerProps } from '../popover';
 
 export type DropdownTriggerProps = PopoverTriggerProps;
 
diff --git a/packages/react/src/components/Dropdown/Dropdown.mdx b/packages/react/src/components/dropdown/dropdown.mdx
similarity index 98%
rename from packages/react/src/components/Dropdown/Dropdown.mdx
rename to packages/react/src/components/dropdown/dropdown.mdx
index a435528e..c7e2a7a5 100644
--- a/packages/react/src/components/Dropdown/Dropdown.mdx
+++ b/packages/react/src/components/dropdown/dropdown.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/dropdown.css?inline';
-import * as DropdownStories from './Dropdown.stories';
+import * as DropdownStories from './dropdown.stories';
 
 import { Dropdown } from './';
 
diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.tsx b/packages/react/src/components/dropdown/dropdown.stories.tsx
similarity index 99%
rename from packages/react/src/components/Dropdown/Dropdown.stories.tsx
rename to packages/react/src/components/dropdown/dropdown.stories.tsx
index 9bf0a9b3..22613aae 100644
--- a/packages/react/src/components/Dropdown/Dropdown.stories.tsx
+++ b/packages/react/src/components/dropdown/dropdown.stories.tsx
@@ -2,7 +2,7 @@ import { ChevronDownIcon, ChevronUpIcon, LinkIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { useState } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
-import { Button } from '../Button';
+import { Button } from '../button';
 import { Dropdown } from '.';
 
 export default {
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/dropdown/dropdown.tsx
similarity index 94%
rename from packages/react/src/components/Dropdown/Dropdown.tsx
rename to packages/react/src/components/dropdown/dropdown.tsx
index 5cc3f3f9..2f4fe764 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/dropdown/dropdown.tsx
@@ -3,8 +3,8 @@ import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
-import type { PopoverProps } from '../Popover';
-import { Popover } from '../Popover';
+import type { PopoverProps } from '../popover';
+import { Popover } from '../popover';
 
 export type DropdownProps = MergeRight<
   DefaultProps & Omit<PopoverProps, 'variant'>,
diff --git a/packages/react/src/components/Dropdown/index.ts b/packages/react/src/components/dropdown/index.ts
similarity index 60%
rename from packages/react/src/components/Dropdown/index.ts
rename to packages/react/src/components/dropdown/index.ts
index 7e976153..b696b300 100644
--- a/packages/react/src/components/Dropdown/index.ts
+++ b/packages/react/src/components/dropdown/index.ts
@@ -1,10 +1,10 @@
-import { Dropdown as DropdownRoot } from './Dropdown';
-import { DropdownButton } from './DropdownButton';
-import { DropdownHeading } from './DropdownHeading';
-import { DropdownItem } from './DropdownItem';
-import { DropdownList } from './DropdownList';
-import { DropdownTrigger } from './DropdownTrigger';
-import { DropdownTriggerContext } from './DropdownTriggerContext';
+import { Dropdown as DropdownRoot } from './dropdown';
+import { DropdownButton } from './dropdown-button';
+import { DropdownHeading } from './dropdown-heading';
+import { DropdownItem } from './dropdown-item';
+import { DropdownList } from './dropdown-list';
+import { DropdownTrigger } from './dropdown-trigger';
+import { DropdownTriggerContext } from './dropdown-trigger-context';
 
 /**
  * Dropdown component, used to display a list of options.
@@ -38,12 +38,12 @@ Dropdown.Item.displayName = 'Dropdown.Item';
 Dropdown.Button.displayName = 'Dropdown.Button';
 Dropdown.Trigger.displayName = 'Dropdown.Trigger';
 
-export type { DropdownProps } from './Dropdown';
-export type { DropdownButtonProps } from './DropdownButton';
-export type { DropdownHeadingProps } from './DropdownHeading';
-export type { DropdownItemProps } from './DropdownItem';
-export type { DropdownListProps } from './DropdownList';
-export type { DropdownTriggerContextProps } from './DropdownTriggerContext';
+export type { DropdownProps } from './dropdown';
+export type { DropdownButtonProps } from './dropdown-button';
+export type { DropdownHeadingProps } from './dropdown-heading';
+export type { DropdownItemProps } from './dropdown-item';
+export type { DropdownListProps } from './dropdown-list';
+export type { DropdownTriggerContextProps } from './dropdown-trigger-context';
 export {
   Dropdown,
   DropdownTriggerContext,
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx b/packages/react/src/components/error-summary/error-summary-heading.tsx
similarity index 83%
rename from packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
rename to packages/react/src/components/error-summary/error-summary-heading.tsx
index 4e34175e..32b36d33 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
+++ b/packages/react/src/components/error-summary/error-summary-heading.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, useContext, useEffect } from 'react';
-import { Heading, type HeadingProps } from '../Heading';
-import { ErrorSummaryContext } from './ErrorSummary';
+import { Heading, type HeadingProps } from '../heading';
+import { ErrorSummaryContext } from './error-summary';
 
 export type ErrorSummaryHeadingProps = HeadingProps;
 
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryItem.tsx b/packages/react/src/components/error-summary/error-summary-item.tsx
similarity index 90%
rename from packages/react/src/components/ErrorSummary/ErrorSummaryItem.tsx
rename to packages/react/src/components/error-summary/error-summary-item.tsx
index 9f0224b0..3324ffc5 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryItem.tsx
+++ b/packages/react/src/components/error-summary/error-summary-item.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { ListItem, type ListItemProps } from '../List';
+import { ListItem, type ListItemProps } from '../list';
 
 export type ErrorSummaryItemProps = ListItemProps;
 
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryLink.tsx b/packages/react/src/components/error-summary/error-summary-link.tsx
similarity index 82%
rename from packages/react/src/components/ErrorSummary/ErrorSummaryLink.tsx
rename to packages/react/src/components/error-summary/error-summary-link.tsx
index fdbcfe39..64699745 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryLink.tsx
+++ b/packages/react/src/components/error-summary/error-summary-link.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
-import type { LinkProps } from '../Link';
-import { Link } from '../Link';
+import type { LinkProps } from '../link';
+import { Link } from '../link';
 
 export type ErrorSummaryLinkProps = LinkProps;
 
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx b/packages/react/src/components/error-summary/error-summary-list.tsx
similarity index 84%
rename from packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx
rename to packages/react/src/components/error-summary/error-summary-list.tsx
index 15835682..9279b821 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx
+++ b/packages/react/src/components/error-summary/error-summary-list.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { List, type ListUnorderedProps } from '../List';
+import { List, type ListUnorderedProps } from '../list';
 
 export type ErrorSummaryListProps = ListUnorderedProps;
 
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.chromatic.tsx b/packages/react/src/components/error-summary/error-summary.chromatic.tsx
similarity index 83%
rename from packages/react/src/components/ErrorSummary/ErrorSummary.chromatic.tsx
rename to packages/react/src/components/error-summary/error-summary.chromatic.tsx
index 514cf4c0..f6074152 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.chromatic.tsx
+++ b/packages/react/src/components/error-summary/error-summary.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { ErrorSummary } from '.';
-import * as ErrorSummaryStories from './ErrorSummary.stories';
+import * as ErrorSummaryStories from './error-summary.stories';
 
 const meta: Meta = {
   title: 'Chromatic/ErrorSummary',
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.mdx b/packages/react/src/components/error-summary/error-summary.mdx
similarity index 98%
rename from packages/react/src/components/ErrorSummary/ErrorSummary.mdx
rename to packages/react/src/components/error-summary/error-summary.mdx
index ffbd2522..76152a03 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.mdx
+++ b/packages/react/src/components/error-summary/error-summary.mdx
@@ -1,7 +1,7 @@
 import { Meta, Controls, Primary, ArgTypes, Canvas } from '@storybook/addon-docs/blocks';
 import { CssVariables, ReactOrHtmlCanvas } from '@doc-components';
 import css from '@digdir/designsystemet-css/error-summary.css?inline';
-import * as ErrorSummaryStories from './ErrorSummary.stories';
+import * as ErrorSummaryStories from './error-summary.stories';
 
 import { ErrorSummary } from './';
 
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx b/packages/react/src/components/error-summary/error-summary.stories.tsx
similarity index 98%
rename from packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx
rename to packages/react/src/components/error-summary/error-summary.stories.tsx
index b4544f1c..c5a85874 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx
+++ b/packages/react/src/components/error-summary/error-summary.stories.tsx
@@ -4,8 +4,8 @@ import { withScrollHashBehavior } from '@story-utils/withScrollHashBehavior';
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { useEffect, useRef, useState } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
-import { Button } from '../Button';
-import { Textfield } from '../Textfield';
+import { Button } from '../button';
+import { Textfield } from '../textfield';
 import { ErrorSummary } from './';
 import showHideHtml from './html-examples/show-hide.html?raw';
 
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx b/packages/react/src/components/error-summary/error-summary.tsx
similarity index 100%
rename from packages/react/src/components/ErrorSummary/ErrorSummary.tsx
rename to packages/react/src/components/error-summary/error-summary.tsx
diff --git a/packages/react/src/components/ErrorSummary/html-examples/show-hide.html b/packages/react/src/components/error-summary/html-examples/show-hide.html
similarity index 100%
rename from packages/react/src/components/ErrorSummary/html-examples/show-hide.html
rename to packages/react/src/components/error-summary/html-examples/show-hide.html
diff --git a/packages/react/src/components/ErrorSummary/index.ts b/packages/react/src/components/error-summary/index.ts
similarity index 60%
rename from packages/react/src/components/ErrorSummary/index.ts
rename to packages/react/src/components/error-summary/index.ts
index 4f3993cf..5959fd0f 100644
--- a/packages/react/src/components/ErrorSummary/index.ts
+++ b/packages/react/src/components/error-summary/index.ts
@@ -1,8 +1,8 @@
-import { ErrorSummary as ErrorSummaryParent } from './ErrorSummary';
-import { ErrorSummaryHeading } from './ErrorSummaryHeading';
-import { ErrorSummaryItem } from './ErrorSummaryItem';
-import { ErrorSummaryLink } from './ErrorSummaryLink';
-import { ErrorSummaryList } from './ErrorSummaryList';
+import { ErrorSummary as ErrorSummaryParent } from './error-summary';
+import { ErrorSummaryHeading } from './error-summary-heading';
+import { ErrorSummaryItem } from './error-summary-item';
+import { ErrorSummaryLink } from './error-summary-link';
+import { ErrorSummaryList } from './error-summary-list';
 
 /**
  * ErrorSummary component, used to display a list of errors.
@@ -32,11 +32,11 @@ ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
 ErrorSummary.List.displayName = 'ErrorSummary.List';
 ErrorSummary.Link.displayName = 'ErrorSummary.Link';
 
-export type { ErrorSummaryProps } from './ErrorSummary';
-export type { ErrorSummaryHeadingProps } from './ErrorSummaryHeading';
-export type { ErrorSummaryItemProps } from './ErrorSummaryItem';
-export type { ErrorSummaryLinkProps } from './ErrorSummaryLink';
-export type { ErrorSummaryListProps } from './ErrorSummaryList';
+export type { ErrorSummaryProps } from './error-summary';
+export type { ErrorSummaryHeadingProps } from './error-summary-heading';
+export type { ErrorSummaryItemProps } from './error-summary-item';
+export type { ErrorSummaryLinkProps } from './error-summary-link';
+export type { ErrorSummaryListProps } from './error-summary-list';
 export {
   ErrorSummary,
   ErrorSummaryItem,
diff --git a/packages/react/src/components/Field/FieldAffix.tsx b/packages/react/src/components/field/field-affix.tsx
similarity index 100%
rename from packages/react/src/components/Field/FieldAffix.tsx
rename to packages/react/src/components/field/field-affix.tsx
diff --git a/packages/react/src/components/Field/FieldCounter.tsx b/packages/react/src/components/field/field-counter.tsx
similarity index 95%
rename from packages/react/src/components/Field/FieldCounter.tsx
rename to packages/react/src/components/field/field-counter.tsx
index 5cb6af61..e71b3be7 100644
--- a/packages/react/src/components/Field/FieldCounter.tsx
+++ b/packages/react/src/components/field/field-counter.tsx
@@ -1,10 +1,10 @@
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { Paragraph } from '../Paragraph';
+import { Paragraph } from '../paragraph';
 import {
   ValidationMessage,
   type ValidationMessageProps,
-} from '../ValidationMessage';
-import { isInputLike } from './fieldObserver';
+} from '../validation-message';
+import { isInputLike } from './field-observer';
 
 export type FieldCounterProps = {
   /**
diff --git a/packages/react/src/components/Field/fieldObserver.ts b/packages/react/src/components/field/field-observer.ts
similarity index 100%
rename from packages/react/src/components/Field/fieldObserver.ts
rename to packages/react/src/components/field/field-observer.ts
diff --git a/packages/react/src/components/Field/Field.chromatic.tsx b/packages/react/src/components/field/field.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Field/Field.chromatic.tsx
rename to packages/react/src/components/field/field.chromatic.tsx
index 95a47052..a1b8595c 100644
--- a/packages/react/src/components/Field/Field.chromatic.tsx
+++ b/packages/react/src/components/field/field.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Field } from '.';
-import * as FieldStories from './Field.stories';
+import * as FieldStories from './field.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Field',
diff --git a/packages/react/src/components/Field/Field.mdx b/packages/react/src/components/field/field.mdx
similarity index 98%
rename from packages/react/src/components/Field/Field.mdx
rename to packages/react/src/components/field/field.mdx
index ece48feb..9384f329 100644
--- a/packages/react/src/components/Field/Field.mdx
+++ b/packages/react/src/components/field/field.mdx
@@ -1,7 +1,7 @@
 import { Meta, Controls, Primary, Canvas } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/field.css?inline';
-import * as FieldStories from './Field.stories';
+import * as FieldStories from './field.stories';
 
 <Meta of={FieldStories} />
 
diff --git a/packages/react/src/components/Field/Field.stories.tsx b/packages/react/src/components/field/field.stories.tsx
similarity index 97%
rename from packages/react/src/components/Field/Field.stories.tsx
rename to packages/react/src/components/field/field.stories.tsx
index d80da88b..5479aefc 100644
--- a/packages/react/src/components/Field/Field.stories.tsx
+++ b/packages/react/src/components/field/field.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { Divider, Field, Input, Textarea, ValidationMessage } from '../';
-import { Label } from '../Label';
+import { Label } from '../label';
 
 type Story = StoryFn<typeof Field>;
 
diff --git a/packages/react/src/components/Field/Field.tsx b/packages/react/src/components/field/field.tsx
similarity index 96%
rename from packages/react/src/components/Field/Field.tsx
rename to packages/react/src/components/field/field.tsx
index 1e4e4542..a11b0e8e 100644
--- a/packages/react/src/components/Field/Field.tsx
+++ b/packages/react/src/components/field/field.tsx
@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
 import type { DefaultProps } from '../../types';
 import { useMergeRefs } from '../../utilities/hooks';
-import { fieldObserver } from './fieldObserver';
+import { fieldObserver } from './field-observer';
 
 export type FieldProps = {
   /**
diff --git a/packages/react/src/components/Field/index.ts b/packages/react/src/components/field/index.ts
similarity index 64%
rename from packages/react/src/components/Field/index.ts
rename to packages/react/src/components/field/index.ts
index b193c38b..887852bb 100644
--- a/packages/react/src/components/Field/index.ts
+++ b/packages/react/src/components/field/index.ts
@@ -1,7 +1,7 @@
-import { Field as FieldParent } from './Field';
-import { FieldAffix, FieldAffixes } from './FieldAffix';
-import { FieldCounter } from './FieldCounter';
-import { FieldDescription } from './FieldDescription';
+import { Field as FieldParent } from './field';
+import { FieldAffix, FieldAffixes } from './field-affix';
+import { FieldCounter } from './field-counter';
+import { FieldDescription } from './field-description';
 
 /**
  * Field component, used to wrap a form field.
@@ -26,11 +26,11 @@ Field.Affixes.displayName = 'Field.Affixes';
 Field.Affix.displayName = 'Field.Affix';
 Field.Counter.displayName = 'Field.Counter';
 
-export type { FieldProps } from './Field';
+export type { FieldProps } from './field';
 export type {
   FieldAffixesProps,
   FieldAffixProps,
-} from './FieldAffix';
-export type { FieldCounterProps } from './FieldCounter';
-export type { FieldDescriptionProps } from './FieldDescription';
+} from './field-affix';
+export type { FieldCounterProps } from './field-counter';
+export type { FieldDescriptionProps } from './field-description';
 export { Field, FieldDescription, FieldAffix, FieldAffixes, FieldCounter };
diff --git a/packages/react/src/components/Fieldset/FieldsetDescription.tsx b/packages/react/src/components/fieldset/fieldset-description.tsx
similarity index 86%
rename from packages/react/src/components/Fieldset/FieldsetDescription.tsx
rename to packages/react/src/components/fieldset/fieldset-description.tsx
index 07f83d5b..69666fc8 100644
--- a/packages/react/src/components/Fieldset/FieldsetDescription.tsx
+++ b/packages/react/src/components/fieldset/fieldset-description.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Paragraph, type ParagraphProps } from '../Paragraph/Paragraph';
+import { Paragraph, type ParagraphProps } from '../paragraph';
 
 export type FieldsetDescriptionProps = ParagraphProps;
 
diff --git a/packages/react/src/components/Fieldset/FieldsetLegend.tsx b/packages/react/src/components/fieldset/fieldset-legend.tsx
similarity index 93%
rename from packages/react/src/components/Fieldset/FieldsetLegend.tsx
rename to packages/react/src/components/fieldset/fieldset-legend.tsx
index 6d4eb70b..5828c43d 100644
--- a/packages/react/src/components/Fieldset/FieldsetLegend.tsx
+++ b/packages/react/src/components/fieldset/fieldset-legend.tsx
@@ -1,7 +1,7 @@
 import { forwardRef, type HTMLAttributes } from 'react';
 import type { DefaultProps } from '../../types';
 
-import { Label } from '../Label/Label';
+import { Label } from '../label';
 
 export type FieldsetLegendProps = HTMLAttributes<HTMLLegendElement> &
   DefaultProps;
diff --git a/packages/react/src/components/Fieldset/Fieldset.chromatic.tsx b/packages/react/src/components/fieldset/fieldset.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Fieldset/Fieldset.chromatic.tsx
rename to packages/react/src/components/fieldset/fieldset.chromatic.tsx
index c99674d5..853819e5 100644
--- a/packages/react/src/components/Fieldset/Fieldset.chromatic.tsx
+++ b/packages/react/src/components/fieldset/fieldset.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Fieldset } from '.';
-import * as FieldsetStories from './Fieldset.stories';
+import * as FieldsetStories from './fieldset.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Fieldset',
diff --git a/packages/react/src/components/Fieldset/Fieldset.mdx b/packages/react/src/components/fieldset/fieldset.mdx
similarity index 97%
rename from packages/react/src/components/Fieldset/Fieldset.mdx
rename to packages/react/src/components/fieldset/fieldset.mdx
index a69baf80..96ea8e7d 100644
--- a/packages/react/src/components/Fieldset/Fieldset.mdx
+++ b/packages/react/src/components/fieldset/fieldset.mdx
@@ -1,7 +1,7 @@
 import { Meta, Controls, Primary, Canvas } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/fieldset.css?inline';
-import * as FieldsetStories from './Fieldset.stories';
+import * as FieldsetStories from './fieldset.stories';
 
 <Meta of={FieldsetStories} />
 
diff --git a/packages/react/src/components/Fieldset/Fieldset.stories.tsx b/packages/react/src/components/fieldset/fieldset.stories.tsx
similarity index 100%
rename from packages/react/src/components/Fieldset/Fieldset.stories.tsx
rename to packages/react/src/components/fieldset/fieldset.stories.tsx
diff --git a/packages/react/src/components/Fieldset/Fieldset.test.tsx b/packages/react/src/components/fieldset/fieldset.test.tsx
similarity index 100%
rename from packages/react/src/components/Fieldset/Fieldset.test.tsx
rename to packages/react/src/components/fieldset/fieldset.test.tsx
diff --git a/packages/react/src/components/Fieldset/Fieldset.tsx b/packages/react/src/components/fieldset/fieldset.tsx
similarity index 100%
rename from packages/react/src/components/Fieldset/Fieldset.tsx
rename to packages/react/src/components/fieldset/fieldset.tsx
diff --git a/packages/react/src/components/Fieldset/index.ts b/packages/react/src/components/fieldset/index.ts
similarity index 64%
rename from packages/react/src/components/Fieldset/index.ts
rename to packages/react/src/components/fieldset/index.ts
index cec9c064..635220aa 100644
--- a/packages/react/src/components/Fieldset/index.ts
+++ b/packages/react/src/components/fieldset/index.ts
@@ -1,6 +1,6 @@
-import { Fieldset as FieldsetParent } from './Fieldset';
-import { FieldsetDescription } from './FieldsetDescription';
-import { FieldsetLegend } from './FieldsetLegend';
+import { Fieldset as FieldsetParent } from './fieldset';
+import { FieldsetDescription } from './fieldset-description';
+import { FieldsetLegend } from './fieldset-legend';
 
 /**
  * Fieldset component, used to wrap a form field.
@@ -25,7 +25,7 @@ const Fieldset = Object.assign(FieldsetParent, {
 Fieldset.Legend.displayName = 'Fieldset.Legend';
 Fieldset.Description.displayName = 'Fieldset.Description';
 
-export type { FieldsetProps } from './Fieldset';
-export type { FieldsetDescriptionProps } from './FieldsetDescription';
-export type { FieldsetLegendProps } from './FieldsetLegend';
+export type { FieldsetProps } from './fieldset';
+export type { FieldsetDescriptionProps } from './fieldset-description';
+export type { FieldsetLegendProps } from './fieldset-legend';
 export { Fieldset, FieldsetLegend, FieldsetDescription };
diff --git a/packages/react/src/components/Heading/Heading.chromatic.tsx b/packages/react/src/components/heading/heading.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Heading/Heading.chromatic.tsx
rename to packages/react/src/components/heading/heading.chromatic.tsx
index 804e6606..ce49a89c 100644
--- a/packages/react/src/components/Heading/Heading.chromatic.tsx
+++ b/packages/react/src/components/heading/heading.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Heading } from '.';
-import * as HeadingStories from './Heading.stories';
+import * as HeadingStories from './heading.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Heading',
diff --git a/packages/react/src/components/Heading/Heading.stories.tsx b/packages/react/src/components/heading/heading.stories.tsx
similarity index 100%
rename from packages/react/src/components/Heading/Heading.stories.tsx
rename to packages/react/src/components/heading/heading.stories.tsx
diff --git a/packages/react/src/components/Heading/Heading.tsx b/packages/react/src/components/heading/heading.tsx
similarity index 100%
rename from packages/react/src/components/Heading/Heading.tsx
rename to packages/react/src/components/heading/heading.tsx
diff --git a/packages/react/src/components/heading/index.ts b/packages/react/src/components/heading/index.ts
new file mode 100644
index 00000000..b0861f04
--- /dev/null
+++ b/packages/react/src/components/heading/index.ts
@@ -0,0 +1,2 @@
+export type { HeadingProps } from './heading';
+export { Heading } from './heading';
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 07706fbe..ade8fd09 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -1,40 +1,40 @@
-export * from './Alert';
-export * from './Avatar';
-export * from './Badge';
-export * from './Breadcrumbs';
-export * from './Button';
-export * from './Card';
-export * from './Checkbox';
-export * from './Chip';
+export * from './alert';
+export * from './avatar';
+export * from './badge';
+export * from './breadcrumbs';
+export * from './button';
 export * from './Combobox';
-export * from './Details';
-export * from './Dialog';
-export * from './Divider';
-export * from './Dropdown';
-export * from './ErrorSummary';
-export * from './Field';
-export * from './Fieldset';
-export * from './Heading';
-export * from './Input';
-export * from './Label';
-export * from './Link';
-export * from './List';
-export * from './Pagination';
-export * from './Paragraph';
-export * from './Popover';
-export * from './Radio';
-export * from './Search';
-export * from './Select';
-export * from './Skeleton';
-export * from './SkipLink';
-export * from './Spinner';
-export * from './Suggestion';
-export * from './Switch';
-export * from './Table';
-export * from './Tabs';
-export * from './Tag';
-export * from './Textarea';
-export * from './Textfield';
-export * from './ToggleGroup';
-export * from './Tooltip';
-export * from './ValidationMessage';
+export * from './card';
+export * from './checkbox';
+export * from './chip';
+export * from './details';
+export * from './dialog';
+export * from './divider';
+export * from './dropdown';
+export * from './error-summary';
+export * from './field';
+export * from './fieldset';
+export * from './heading';
+export * from './input';
+export * from './label';
+export * from './link';
+export * from './list';
+export * from './pagination';
+export * from './paragraph';
+export * from './popover';
+export * from './radio';
+export * from './search';
+export * from './select';
+export * from './skeleton';
+export * from './skip-link';
+export * from './spinner';
+export * from './suggestion';
+export * from './switch';
+export * from './table';
+export * from './tabs';
+export * from './tag';
+export * from './textarea';
+export * from './textfield';
+export * from './toggle-group';
+export * from './tooltip';
+export * from './validation-message';
diff --git a/packages/react/src/components/Input/Input.forced-colors.stories.tsx b/packages/react/src/components/input/Input.forced-colors.stories.tsx
similarity index 89%
rename from packages/react/src/components/Input/Input.forced-colors.stories.tsx
rename to packages/react/src/components/input/Input.forced-colors.stories.tsx
index e67ceab5..4b7f96c2 100644
--- a/packages/react/src/components/Input/Input.forced-colors.stories.tsx
+++ b/packages/react/src/components/input/Input.forced-colors.stories.tsx
@@ -1,4 +1,4 @@
-import * as stories from './Input.stories';
+import * as stories from './input.stories';
 
 export default {
   ...stories.default,
diff --git a/packages/react/src/components/input/index.ts b/packages/react/src/components/input/index.ts
new file mode 100644
index 00000000..d63bf5de
--- /dev/null
+++ b/packages/react/src/components/input/index.ts
@@ -0,0 +1,2 @@
+export type { InputProps } from './input';
+export { Input } from './input';
diff --git a/packages/react/src/components/Input/Input.chromatic.tsx b/packages/react/src/components/input/input.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Input/Input.chromatic.tsx
rename to packages/react/src/components/input/input.chromatic.tsx
index 6abcf840..121337ae 100644
--- a/packages/react/src/components/Input/Input.chromatic.tsx
+++ b/packages/react/src/components/input/input.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Input } from '.';
-import * as InputStories from './Input.stories';
+import * as InputStories from './input.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Input',
diff --git a/packages/react/src/components/Input/Input.mdx b/packages/react/src/components/input/input.mdx
similarity index 95%
rename from packages/react/src/components/Input/Input.mdx
rename to packages/react/src/components/input/input.mdx
index a5710957..fffed85c 100644
--- a/packages/react/src/components/Input/Input.mdx
+++ b/packages/react/src/components/input/input.mdx
@@ -1,8 +1,8 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/input.css?inline';
-import { Alert } from '../Alert';
-import * as InputStories from './Input.stories';
+import { Alert } from '../alert';
+import * as InputStories from './input.stories';
 
 <Meta of={InputStories} />
 
diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/input/input.tsx
similarity index 100%
rename from packages/react/src/components/Input/Input.tsx
rename to packages/react/src/components/input/input.tsx
diff --git a/packages/react/src/components/label/index.ts b/packages/react/src/components/label/index.ts
new file mode 100644
index 00000000..4eea2009
--- /dev/null
+++ b/packages/react/src/components/label/index.ts
@@ -0,0 +1,2 @@
+export type { LabelProps } from './label';
+export { Label } from './label';
diff --git a/packages/react/src/components/Label/Label.chromatic.tsx b/packages/react/src/components/label/label.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Label/Label.chromatic.tsx
rename to packages/react/src/components/label/label.chromatic.tsx
index 41e15ba9..8f0fbcd1 100644
--- a/packages/react/src/components/Label/Label.chromatic.tsx
+++ b/packages/react/src/components/label/label.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Label } from '.';
-import * as LabelStories from './Label.stories';
+import * as LabelStories from './label.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Label',
diff --git a/packages/react/src/components/Label/Label.stories.tsx b/packages/react/src/components/label/label.stories.tsx
similarity index 100%
rename from packages/react/src/components/Label/Label.stories.tsx
rename to packages/react/src/components/label/label.stories.tsx
diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/label/label.tsx
similarity index 100%
rename from packages/react/src/components/Label/Label.tsx
rename to packages/react/src/components/label/label.tsx
diff --git a/packages/react/src/components/link/index.ts b/packages/react/src/components/link/index.ts
new file mode 100644
index 00000000..7dac40fd
--- /dev/null
+++ b/packages/react/src/components/link/index.ts
@@ -0,0 +1,2 @@
+export type { LinkProps } from './link';
+export { Link } from './link';
diff --git a/packages/react/src/components/Link/Link.chromatic.tsx b/packages/react/src/components/link/link.chromatic.tsx
similarity index 85%
rename from packages/react/src/components/Link/Link.chromatic.tsx
rename to packages/react/src/components/link/link.chromatic.tsx
index aef40e3c..833630f2 100644
--- a/packages/react/src/components/Link/Link.chromatic.tsx
+++ b/packages/react/src/components/link/link.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Link } from '.';
-import * as LinkStories from './Link.stories';
+import * as LinkStories from './link.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Link',
diff --git a/packages/react/src/components/Link/Link.mdx b/packages/react/src/components/link/link.mdx
similarity index 98%
rename from packages/react/src/components/Link/Link.mdx
rename to packages/react/src/components/link/link.mdx
index 4fe3d6de..ef007496 100644
--- a/packages/react/src/components/Link/Link.mdx
+++ b/packages/react/src/components/link/link.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/link.css?inline';
-import * as LinkStories from './Link.stories';
+import * as LinkStories from './link.stories';
 
 <Meta of={LinkStories} />
 
diff --git a/packages/react/src/components/Link/Link.stories.tsx b/packages/react/src/components/link/link.stories.tsx
similarity index 97%
rename from packages/react/src/components/Link/Link.stories.tsx
rename to packages/react/src/components/link/link.stories.tsx
index b5a76921..3c2d36d5 100644
--- a/packages/react/src/components/Link/Link.stories.tsx
+++ b/packages/react/src/components/link/link.stories.tsx
@@ -1,7 +1,7 @@
 import { EnvelopeClosedIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
 
-import { Paragraph } from '../Paragraph';
+import { Paragraph } from '../paragraph';
 
 import { Link } from '.';
 
diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/link/link.tsx
similarity index 100%
rename from packages/react/src/components/Link/Link.tsx
rename to packages/react/src/components/link/link.tsx
diff --git a/packages/react/src/components/List/index.ts b/packages/react/src/components/list/index.ts
similarity index 57%
rename from packages/react/src/components/List/index.ts
rename to packages/react/src/components/list/index.ts
index b7ee4070..4e1b9c17 100644
--- a/packages/react/src/components/List/index.ts
+++ b/packages/react/src/components/list/index.ts
@@ -1,5 +1,5 @@
-import { ListItem } from './ListItem';
-import { ListOrdered, ListUnordered } from './Lists';
+import { ListItem } from './list-item';
+import { ListOrdered, ListUnordered } from './lists';
 
 const List = {
   Item: ListItem,
@@ -11,6 +11,6 @@ List.Item.displayName = 'List.Item';
 List.Ordered.displayName = 'List.Ordered';
 List.Unordered.displayName = 'List.Unordered';
 
-export type { ListItemProps } from './ListItem';
-export type { ListOrderedProps, ListUnorderedProps } from './Lists';
+export type { ListItemProps } from './list-item';
+export type { ListOrderedProps, ListUnorderedProps } from './lists';
 export { List, ListOrdered, ListUnordered, ListItem };
diff --git a/packages/react/src/components/List/ListItem.tsx b/packages/react/src/components/list/list-item.tsx
similarity index 100%
rename from packages/react/src/components/List/ListItem.tsx
rename to packages/react/src/components/list/list-item.tsx
diff --git a/packages/react/src/components/List/List.chromatic.tsx b/packages/react/src/components/list/list.chromatic.tsx
similarity index 85%
rename from packages/react/src/components/List/List.chromatic.tsx
rename to packages/react/src/components/list/list.chromatic.tsx
index c9d5f08f..d6bdb29c 100644
--- a/packages/react/src/components/List/List.chromatic.tsx
+++ b/packages/react/src/components/list/list.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { List } from '.';
-import * as ListStories from './List.stories';
+import * as ListStories from './list.stories';
 
 const meta: Meta = {
   title: 'Chromatic/List',
diff --git a/packages/react/src/components/List/List.mdx b/packages/react/src/components/list/list.mdx
similarity index 99%
rename from packages/react/src/components/List/List.mdx
rename to packages/react/src/components/list/list.mdx
index d01cdd26..e613fb9c 100644
--- a/packages/react/src/components/List/List.mdx
+++ b/packages/react/src/components/list/list.mdx
@@ -1,7 +1,7 @@
 import { Meta, Primary, Controls, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/list.css?inline';
-import * as ListStories from './List.stories';
+import * as ListStories from './list.stories';
 
 <Meta of={ListStories} />
 
diff --git a/packages/react/src/components/List/List.stories.tsx b/packages/react/src/components/list/list.stories.tsx
similarity index 98%
rename from packages/react/src/components/List/List.stories.tsx
rename to packages/react/src/components/list/list.stories.tsx
index 7ffc4849..47e41718 100644
--- a/packages/react/src/components/List/List.stories.tsx
+++ b/packages/react/src/components/list/list.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react-vite';
-import { Heading } from '../Heading';
-import { Link } from '../Link';
+import { Heading } from '../heading';
+import { Link } from '../link';
 import { List } from '.';
 
 type Story = StoryFn<typeof List.Unordered>;
diff --git a/packages/react/src/components/List/Lists.tsx b/packages/react/src/components/list/lists.tsx
similarity index 100%
rename from packages/react/src/components/List/Lists.tsx
rename to packages/react/src/components/list/lists.tsx
diff --git a/packages/react/src/components/Pagination/index.ts b/packages/react/src/components/pagination/index.ts
similarity index 66%
rename from packages/react/src/components/Pagination/index.ts
rename to packages/react/src/components/pagination/index.ts
index ae60cf2f..7ef86fb5 100644
--- a/packages/react/src/components/Pagination/index.ts
+++ b/packages/react/src/components/pagination/index.ts
@@ -1,7 +1,7 @@
-import { Pagination as PaginationParent } from './Pagination';
-import { PaginationButton } from './PaginationButton';
-import { PaginationItem } from './PaginationItem';
-import { PaginationList } from './PaginationList';
+import { Pagination as PaginationParent } from './pagination';
+import { PaginationButton } from './pagination-button';
+import { PaginationItem } from './pagination-item';
+import { PaginationList } from './pagination-list';
 
 /**
  * Pagination component, used to navigate through a list of items.
@@ -31,9 +31,9 @@ Pagination.List.displayName = 'Pagination.List';
 Pagination.Item.displayName = 'Pagination.Item';
 Pagination.Button.displayName = 'Pagination.Button';
 
-export type { PaginationProps } from './Pagination';
-export type { PaginationButtonProps } from './PaginationButton';
-export type { PaginationItemProps } from './PaginationItem';
-export type { PaginationListProps } from './PaginationList';
+export type { PaginationProps } from './pagination';
+export type { PaginationButtonProps } from './pagination-button';
+export type { PaginationItemProps } from './pagination-item';
+export type { PaginationListProps } from './pagination-list';
 
 export { Pagination, PaginationList, PaginationItem, PaginationButton };
diff --git a/packages/react/src/components/Pagination/PaginationButton.tsx b/packages/react/src/components/pagination/pagination-button.tsx
similarity index 91%
rename from packages/react/src/components/Pagination/PaginationButton.tsx
rename to packages/react/src/components/pagination/pagination-button.tsx
index 83492fb0..1e1a85d0 100644
--- a/packages/react/src/components/Pagination/PaginationButton.tsx
+++ b/packages/react/src/components/pagination/pagination-button.tsx
@@ -1,6 +1,6 @@
 import { type AriaAttributes, forwardRef } from 'react';
 
-import { Button, type ButtonProps } from '../Button/Button';
+import { Button, type ButtonProps } from '../button';
 
 export type PaginationButtonProps = {
   /**
diff --git a/packages/react/src/components/Pagination/PaginationItem.tsx b/packages/react/src/components/pagination/pagination-item.tsx
similarity index 100%
rename from packages/react/src/components/Pagination/PaginationItem.tsx
rename to packages/react/src/components/pagination/pagination-item.tsx
diff --git a/packages/react/src/components/Pagination/PaginationList.tsx b/packages/react/src/components/pagination/pagination-list.tsx
similarity index 100%
rename from packages/react/src/components/Pagination/PaginationList.tsx
rename to packages/react/src/components/pagination/pagination-list.tsx
diff --git a/packages/react/src/components/Pagination/Pagination.chromatic.tsx b/packages/react/src/components/pagination/pagination.chromatic.tsx
similarity index 83%
rename from packages/react/src/components/Pagination/Pagination.chromatic.tsx
rename to packages/react/src/components/pagination/pagination.chromatic.tsx
index 8561f559..dceb089a 100644
--- a/packages/react/src/components/Pagination/Pagination.chromatic.tsx
+++ b/packages/react/src/components/pagination/pagination.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Pagination } from '.';
-import * as PaginationStories from './Pagination.stories';
+import * as PaginationStories from './pagination.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Pagination',
diff --git a/packages/react/src/components/Pagination/Pagination.mdx b/packages/react/src/components/pagination/pagination.mdx
similarity index 97%
rename from packages/react/src/components/Pagination/Pagination.mdx
rename to packages/react/src/components/pagination/pagination.mdx
index 37d53fa1..270fdf53 100644
--- a/packages/react/src/components/Pagination/Pagination.mdx
+++ b/packages/react/src/components/pagination/pagination.mdx
@@ -1,7 +1,7 @@
 import { Meta, Controls, Primary, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/pagination.css?inline';
-import * as PaginationStories from './Pagination.stories';
+import * as PaginationStories from './pagination.stories';
 
 <Meta of={PaginationStories} />
 
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/pagination/pagination.tsx
similarity index 100%
rename from packages/react/src/components/Pagination/Pagination.tsx
rename to packages/react/src/components/pagination/pagination.tsx
diff --git a/packages/react/src/components/paragraph/index.ts b/packages/react/src/components/paragraph/index.ts
new file mode 100644
index 00000000..ec5e23b9
--- /dev/null
+++ b/packages/react/src/components/paragraph/index.ts
@@ -0,0 +1,2 @@
+export type { ParagraphProps } from './paragraph';
+export { Paragraph } from './paragraph';
diff --git a/packages/react/src/components/Paragraph/Paragraph.chromatic.tsx b/packages/react/src/components/paragraph/paragraph.chromatic.tsx
similarity index 83%
rename from packages/react/src/components/Paragraph/Paragraph.chromatic.tsx
rename to packages/react/src/components/paragraph/paragraph.chromatic.tsx
index fabff204..b005d939 100644
--- a/packages/react/src/components/Paragraph/Paragraph.chromatic.tsx
+++ b/packages/react/src/components/paragraph/paragraph.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Paragraph } from '.';
-import * as ParagraphStories from './Paragraph.stories';
+import * as ParagraphStories from './paragraph.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Paragraph',
diff --git a/packages/react/src/components/Paragraph/Paragraph.stories.tsx b/packages/react/src/components/paragraph/paragraph.stories.tsx
similarity index 100%
rename from packages/react/src/components/Paragraph/Paragraph.stories.tsx
rename to packages/react/src/components/paragraph/paragraph.stories.tsx
diff --git a/packages/react/src/components/Paragraph/Paragraph.tsx b/packages/react/src/components/paragraph/paragraph.tsx
similarity index 100%
rename from packages/react/src/components/Paragraph/Paragraph.tsx
rename to packages/react/src/components/paragraph/paragraph.tsx
diff --git a/packages/react/src/components/Popover/index.ts b/packages/react/src/components/popover/index.ts
similarity index 60%
rename from packages/react/src/components/Popover/index.ts
rename to packages/react/src/components/popover/index.ts
index 72a62537..43a0b1d4 100644
--- a/packages/react/src/components/Popover/index.ts
+++ b/packages/react/src/components/popover/index.ts
@@ -1,6 +1,6 @@
-import { Popover as PopoverParent } from './Popover';
-import { PopoverTrigger } from './PopoverTrigger';
-import { PopoverTriggerContext } from './PopoverTriggerContext';
+import { Popover as PopoverParent } from './popover';
+import { PopoverTrigger } from './popover-trigger';
+import { PopoverTriggerContext } from './popover-trigger-context';
 
 /**
  * Popover component, used to display content in a popover over an element.
@@ -21,8 +21,8 @@ const Popover = Object.assign(PopoverParent, {
 Popover.TriggerContext.displayName = 'Popover.TriggerContext';
 Popover.Trigger.displayName = 'Popover.Trigger';
 
-export type { PopoverProps } from './Popover';
-export type { PopoverTriggerProps } from './PopoverTrigger';
-export type { PopoverTriggerContextProps } from './PopoverTriggerContext';
+export type { PopoverProps } from './popover';
+export type { PopoverTriggerProps } from './popover-trigger';
+export type { PopoverTriggerContextProps } from './popover-trigger-context';
 
 export { Popover, PopoverTriggerContext, PopoverTrigger };
diff --git a/packages/react/src/components/Popover/PopoverTriggerContext.tsx b/packages/react/src/components/popover/popover-trigger-context.tsx
similarity index 100%
rename from packages/react/src/components/Popover/PopoverTriggerContext.tsx
rename to packages/react/src/components/popover/popover-trigger-context.tsx
diff --git a/packages/react/src/components/Popover/PopoverTrigger.tsx b/packages/react/src/components/popover/popover-trigger.tsx
similarity index 93%
rename from packages/react/src/components/Popover/PopoverTrigger.tsx
rename to packages/react/src/components/popover/popover-trigger.tsx
index dbbb7004..3e9b5922 100644
--- a/packages/react/src/components/Popover/PopoverTrigger.tsx
+++ b/packages/react/src/components/popover/popover-trigger.tsx
@@ -1,8 +1,8 @@
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, type HTMLAttributes, useContext, version } from 'react';
 import type { DefaultProps } from '../../types';
-import { Button, type ButtonProps } from '../Button/Button';
-import { Context } from './PopoverTriggerContext';
+import { Button, type ButtonProps } from '../button';
+import { Context } from './popover-trigger-context';
 
 export type PopoverTriggerProps =
   | ({
diff --git a/packages/react/src/components/Popover/Popover.mdx b/packages/react/src/components/popover/popover.mdx
similarity index 98%
rename from packages/react/src/components/Popover/Popover.mdx
rename to packages/react/src/components/popover/popover.mdx
index 386e6b79..9105154d 100644
--- a/packages/react/src/components/Popover/Popover.mdx
+++ b/packages/react/src/components/popover/popover.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/popover.css?inline';
-import * as PopoverStories from './Popover.stories.tsx';
+import * as PopoverStories from './popover.stories.tsx';
 
 <Meta of={PopoverStories} />
 
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/popover/popover.tsx
similarity index 99%
rename from packages/react/src/components/Popover/Popover.tsx
rename to packages/react/src/components/popover/popover.tsx
index bfa057f1..941454d4 100644
--- a/packages/react/src/components/Popover/Popover.tsx
+++ b/packages/react/src/components/popover/popover.tsx
@@ -17,7 +17,7 @@ import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
 import { useMergeRefs } from '../../utilities/hooks';
-import { Context } from './PopoverTriggerContext';
+import { Context } from './popover-trigger-context';
 
 // Make React support popovertarget attribute
 // https://github.com/facebook/react/issues/27479
diff --git a/packages/react/src/components/radio/index.ts b/packages/react/src/components/radio/index.ts
new file mode 100644
index 00000000..07e06de6
--- /dev/null
+++ b/packages/react/src/components/radio/index.ts
@@ -0,0 +1,2 @@
+export type { RadioProps } from './radio';
+export { Radio } from './radio';
diff --git a/packages/react/src/components/Radio/Radio.chromatic.tsx b/packages/react/src/components/radio/radio.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Radio/Radio.chromatic.tsx
rename to packages/react/src/components/radio/radio.chromatic.tsx
index 2044be39..29d6221c 100644
--- a/packages/react/src/components/Radio/Radio.chromatic.tsx
+++ b/packages/react/src/components/radio/radio.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Radio } from '.';
-import * as RadioStories from './Radio.stories';
+import * as RadioStories from './radio.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Radio',
diff --git a/packages/react/src/components/Radio/Radio.mdx b/packages/react/src/components/radio/radio.mdx
similarity index 99%
rename from packages/react/src/components/Radio/Radio.mdx
rename to packages/react/src/components/radio/radio.mdx
index e5a5a1df..077c0831 100644
--- a/packages/react/src/components/Radio/Radio.mdx
+++ b/packages/react/src/components/radio/radio.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/input.css?inline';
-import * as RadioStories from './Radio.stories';
+import * as RadioStories from './radio.stories';
 
 <Meta of={RadioStories} />
 
diff --git a/packages/react/src/components/Radio/Radio.tsx b/packages/react/src/components/radio/radio.tsx
similarity index 88%
rename from packages/react/src/components/Radio/Radio.tsx
rename to packages/react/src/components/radio/radio.tsx
index 86f06758..15b4f6b3 100644
--- a/packages/react/src/components/Radio/Radio.tsx
+++ b/packages/react/src/components/radio/radio.tsx
@@ -2,10 +2,10 @@ import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
 import type { DefaultProps, LabelRequired } from '../../types';
 import type { MergeRight } from '../../utilities';
-import { Field } from '../Field';
-import { Input, type InputProps } from '../Input';
-import { Label } from '../Label';
-import { ValidationMessage } from '../ValidationMessage';
+import { Field } from '../field';
+import { Input, type InputProps } from '../input';
+import { Label } from '../label';
+import { ValidationMessage } from '../validation-message';
 
 export type RadioProps = MergeRight<
   DefaultProps & Omit<InputProps, 'type' | 'role' | 'size'>,
diff --git a/packages/react/src/components/Search/index.ts b/packages/react/src/components/search/index.ts
similarity index 61%
rename from packages/react/src/components/Search/index.ts
rename to packages/react/src/components/search/index.ts
index 6863dcc8..9ea79724 100644
--- a/packages/react/src/components/Search/index.ts
+++ b/packages/react/src/components/search/index.ts
@@ -1,7 +1,7 @@
-import { Search as SearchRoot } from './Search';
-import { SearchButton } from './SearchButton';
-import { SearchClear } from './SearchClear';
-import { SearchInput } from './SearchInput';
+import { Search as SearchRoot } from './search';
+import { SearchButton } from './search-button';
+import { SearchClear } from './search-clear';
+import { SearchInput } from './search-input';
 
 /**
  * Search component, use to display different variations of a search input
@@ -29,8 +29,8 @@ Search.Clear.displayName = 'Search.Clear';
 Search.Button.displayName = 'Search.Button';
 Search.Input.displayName = 'Search.Input';
 
-export type { SearchProps } from './Search';
-export type { SearchButtonProps } from './SearchButton';
-export type { SearchClearProps } from './SearchClear';
-export type { SearchInputProps } from './SearchInput';
+export type { SearchProps } from './search';
+export type { SearchButtonProps } from './search-button';
+export type { SearchClearProps } from './search-clear';
+export type { SearchInputProps } from './search-input';
 export { SearchClear, SearchButton, SearchInput, Search };
diff --git a/packages/react/src/components/Search/SearchButton.tsx b/packages/react/src/components/search/search-button.tsx
similarity index 93%
rename from packages/react/src/components/Search/SearchButton.tsx
rename to packages/react/src/components/search/search-button.tsx
index e94e1b57..313423c2 100644
--- a/packages/react/src/components/Search/SearchButton.tsx
+++ b/packages/react/src/components/search/search-button.tsx
@@ -1,7 +1,7 @@
 import { forwardRef, type ReactNode } from 'react';
 
 import type { MergeRight } from '../../utilities';
-import { Button, type ButtonProps } from '../Button';
+import { Button, type ButtonProps } from '../button';
 
 export type SearchButtonProps = MergeRight<
   ButtonProps,
diff --git a/packages/react/src/components/Search/SearchClear.tsx b/packages/react/src/components/search/search-clear.tsx
similarity index 92%
rename from packages/react/src/components/Search/SearchClear.tsx
rename to packages/react/src/components/search/search-clear.tsx
index 84e24a8f..d57a45a5 100644
--- a/packages/react/src/components/Search/SearchClear.tsx
+++ b/packages/react/src/components/search/search-clear.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { Button, type ButtonProps } from '../Button';
+import { Button, type ButtonProps } from '../button';
 import { setReactInputValue } from '../Combobox/utilities';
 
 /* We omit children since we render the icon with css */
@@ -12,7 +12,7 @@ export type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'> & {
 };
 
 /**
- * SearchClear component, used to display a clear buttun when the search input is not empty.
+ * SearchClear component, used to display a clear button when the search input is not empty.
  *
  * @example
  * <Search>
diff --git a/packages/react/src/components/Search/SearchInput.tsx b/packages/react/src/components/search/search-input.tsx
similarity index 95%
rename from packages/react/src/components/Search/SearchInput.tsx
rename to packages/react/src/components/search/search-input.tsx
index ba3cd136..f2edc55c 100644
--- a/packages/react/src/components/Search/SearchInput.tsx
+++ b/packages/react/src/components/search/search-input.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import type { DefaultProps } from '../../types';
-import { Input } from '../Input';
+import { Input } from '../input';
 
 export type SearchInputProps = DefaultProps &
   Omit<React.InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'type'>;
diff --git a/packages/react/src/components/Search/Search.chromatic.tsx b/packages/react/src/components/search/search.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Search/Search.chromatic.tsx
rename to packages/react/src/components/search/search.chromatic.tsx
index ba19a26f..d4165fad 100644
--- a/packages/react/src/components/Search/Search.chromatic.tsx
+++ b/packages/react/src/components/search/search.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Search } from '.';
-import * as SearchStories from './Search.stories';
+import * as SearchStories from './search.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Search',
diff --git a/packages/react/src/components/Search/Search.mdx b/packages/react/src/components/search/search.mdx
similarity index 98%
rename from packages/react/src/components/Search/Search.mdx
rename to packages/react/src/components/search/search.mdx
index 9c7ceb9b..637cbc34 100644
--- a/packages/react/src/components/Search/Search.mdx
+++ b/packages/react/src/components/search/search.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/search.css?inline';
-import * as SearchStories from './Search.stories';
+import * as SearchStories from './search.stories';
 
 <Meta of={SearchStories} />
 
diff --git a/packages/react/src/components/Search/Search.stories.tsx b/packages/react/src/components/search/search.stories.tsx
similarity index 100%
rename from packages/react/src/components/Search/Search.stories.tsx
rename to packages/react/src/components/search/search.stories.tsx
diff --git a/packages/react/src/components/Search/Search.test.tsx b/packages/react/src/components/search/search.test.tsx
similarity index 100%
rename from packages/react/src/components/Search/Search.test.tsx
rename to packages/react/src/components/search/search.test.tsx
diff --git a/packages/react/src/components/Search/Search.tsx b/packages/react/src/components/search/search.tsx
similarity index 100%
rename from packages/react/src/components/Search/Search.tsx
rename to packages/react/src/components/search/search.tsx
diff --git a/packages/react/src/components/Select/index.ts b/packages/react/src/components/select/index.ts
similarity index 59%
rename from packages/react/src/components/Select/index.ts
rename to packages/react/src/components/select/index.ts
index dec7bb97..fab1cd76 100644
--- a/packages/react/src/components/Select/index.ts
+++ b/packages/react/src/components/select/index.ts
@@ -1,6 +1,6 @@
-import { Select as SelectParent } from './Select';
-import { SelectOptgroup } from './SelectOptgroup';
-import { SelectOption } from './SelectOption';
+import { Select as SelectParent } from './select';
+import { SelectOptgroup } from './select-optgroup';
+import { SelectOption } from './select-option';
 
 /**
  * Select component, used to display a native select.
@@ -19,7 +19,7 @@ const Select = Object.assign(SelectParent, {
 Select.Option.displayName = 'Select.Option';
 Select.Optgroup.displayName = 'Select.Optgroup';
 
-export type { SelectProps } from './Select';
-export type { SelectOptgroupProps } from './SelectOptgroup';
-export type { SelectOptionProps } from './SelectOption';
+export type { SelectProps } from './select';
+export type { SelectOptgroupProps } from './select-optgroup';
+export type { SelectOptionProps } from './select-option';
 export { Select, SelectOption, SelectOptgroup };
diff --git a/packages/react/src/components/Select/SelectOptgroup.tsx b/packages/react/src/components/select/select-optgroup.tsx
similarity index 100%
rename from packages/react/src/components/Select/SelectOptgroup.tsx
rename to packages/react/src/components/select/select-optgroup.tsx
diff --git a/packages/react/src/components/Select/SelectOption.tsx b/packages/react/src/components/select/select-option.tsx
similarity index 100%
rename from packages/react/src/components/Select/SelectOption.tsx
rename to packages/react/src/components/select/select-option.tsx
diff --git a/packages/react/src/components/Select/Select.chromatic.tsx b/packages/react/src/components/select/select.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Select/Select.chromatic.tsx
rename to packages/react/src/components/select/select.chromatic.tsx
index 2849a8ac..d170fe9c 100644
--- a/packages/react/src/components/Select/Select.chromatic.tsx
+++ b/packages/react/src/components/select/select.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Select } from '.';
-import * as SelectStories from './Select.stories';
+import * as SelectStories from './select.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Select',
diff --git a/packages/react/src/components/Select/Select.mdx b/packages/react/src/components/select/select.mdx
similarity index 98%
rename from packages/react/src/components/Select/Select.mdx
rename to packages/react/src/components/select/select.mdx
index 3a88c593..bbb79264 100644
--- a/packages/react/src/components/Select/Select.mdx
+++ b/packages/react/src/components/select/select.mdx
@@ -1,5 +1,5 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
-import * as SelectStories from './Select.stories';
+import * as SelectStories from './select.stories';
 
 <Meta of={SelectStories} />
 
diff --git a/packages/react/src/components/Select/Select.stories.tsx b/packages/react/src/components/select/select.stories.tsx
similarity index 100%
rename from packages/react/src/components/Select/Select.stories.tsx
rename to packages/react/src/components/select/select.stories.tsx
diff --git a/packages/react/src/components/Select/Select.test.tsx b/packages/react/src/components/select/select.test.tsx
similarity index 100%
rename from packages/react/src/components/Select/Select.test.tsx
rename to packages/react/src/components/select/select.test.tsx
diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/select/select.tsx
similarity index 100%
rename from packages/react/src/components/Select/Select.tsx
rename to packages/react/src/components/select/select.tsx
diff --git a/packages/react/src/components/skeleton/index.ts b/packages/react/src/components/skeleton/index.ts
new file mode 100644
index 00000000..f5befb09
--- /dev/null
+++ b/packages/react/src/components/skeleton/index.ts
@@ -0,0 +1,2 @@
+export type { SkeletonProps } from './skeleton';
+export { Skeleton } from './skeleton';
diff --git a/packages/react/src/components/Skeleton/Skeleton.chromatic.tsx b/packages/react/src/components/skeleton/skeleton.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Skeleton/Skeleton.chromatic.tsx
rename to packages/react/src/components/skeleton/skeleton.chromatic.tsx
index 58ff40a8..94c51bc3 100644
--- a/packages/react/src/components/Skeleton/Skeleton.chromatic.tsx
+++ b/packages/react/src/components/skeleton/skeleton.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Skeleton } from '.';
-import * as SkeletonStories from './Skeleton.stories';
+import * as SkeletonStories from './skeleton.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Skeleton',
diff --git a/packages/react/src/components/Skeleton/Skeleton.mdx b/packages/react/src/components/skeleton/skeleton.mdx
similarity index 96%
rename from packages/react/src/components/Skeleton/Skeleton.mdx
rename to packages/react/src/components/skeleton/skeleton.mdx
index fada3ab1..28d64250 100644
--- a/packages/react/src/components/Skeleton/Skeleton.mdx
+++ b/packages/react/src/components/skeleton/skeleton.mdx
@@ -1,6 +1,6 @@
 import { Meta, Primary, Controls, Canvas } from '@storybook/addon-docs/blocks';
 
-import * as SkeletonStories from './Skeleton.stories';
+import * as SkeletonStories from './skeleton.stories';
 
 <Meta of={SkeletonStories} />
 
diff --git a/packages/react/src/components/Skeleton/Skeleton.stories.tsx b/packages/react/src/components/skeleton/skeleton.stories.tsx
similarity index 100%
rename from packages/react/src/components/Skeleton/Skeleton.stories.tsx
rename to packages/react/src/components/skeleton/skeleton.stories.tsx
diff --git a/packages/react/src/components/Skeleton/Skeleton.test.tsx b/packages/react/src/components/skeleton/skeleton.test.tsx
similarity index 100%
rename from packages/react/src/components/Skeleton/Skeleton.test.tsx
rename to packages/react/src/components/skeleton/skeleton.test.tsx
diff --git a/packages/react/src/components/Skeleton/Skeleton.tsx b/packages/react/src/components/skeleton/skeleton.tsx
similarity index 100%
rename from packages/react/src/components/Skeleton/Skeleton.tsx
rename to packages/react/src/components/skeleton/skeleton.tsx
diff --git a/packages/react/src/components/skip-link/index.ts b/packages/react/src/components/skip-link/index.ts
new file mode 100644
index 00000000..4162ba1b
--- /dev/null
+++ b/packages/react/src/components/skip-link/index.ts
@@ -0,0 +1,2 @@
+export type { SkipLinkProps } from './skip-link';
+export { SkipLink } from './skip-link';
diff --git a/packages/react/src/components/SkipLink/SkipLink.chromatic.tsx b/packages/react/src/components/skip-link/skip-link.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/SkipLink/SkipLink.chromatic.tsx
rename to packages/react/src/components/skip-link/skip-link.chromatic.tsx
index c50ca1bd..f4978c37 100644
--- a/packages/react/src/components/SkipLink/SkipLink.chromatic.tsx
+++ b/packages/react/src/components/skip-link/skip-link.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { SkipLink } from '.';
-import * as SkipLinkStories from './SkipLink.stories';
+import * as SkipLinkStories from './skip-link.stories';
 
 const meta: Meta = {
   title: 'Chromatic/SkipLink',
diff --git a/packages/react/src/components/SkipLink/SkipLink.mdx b/packages/react/src/components/skip-link/skip-link.mdx
similarity index 97%
rename from packages/react/src/components/SkipLink/SkipLink.mdx
rename to packages/react/src/components/skip-link/skip-link.mdx
index 7705a36f..0b3fc94c 100644
--- a/packages/react/src/components/SkipLink/SkipLink.mdx
+++ b/packages/react/src/components/skip-link/skip-link.mdx
@@ -1,7 +1,7 @@
 import { Meta, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/skiplink.css?inline';
-import * as SkipLinkStories from './SkipLink.stories';
+import * as SkipLinkStories from './skip-link.stories';
 
 <Meta of={SkipLinkStories} />
 
diff --git a/packages/react/src/components/SkipLink/SkipLink.tsx b/packages/react/src/components/skip-link/skip-link.tsx
similarity index 100%
rename from packages/react/src/components/SkipLink/SkipLink.tsx
rename to packages/react/src/components/skip-link/skip-link.tsx
diff --git a/packages/react/src/components/spinner/index.ts b/packages/react/src/components/spinner/index.ts
new file mode 100644
index 00000000..a03bd94e
--- /dev/null
+++ b/packages/react/src/components/spinner/index.ts
@@ -0,0 +1,2 @@
+export type { SpinnerProps } from './spinner';
+export { Spinner } from './spinner';
diff --git a/packages/react/src/components/Spinner/Spinner.chromatic.tsx b/packages/react/src/components/spinner/spinner.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Spinner/Spinner.chromatic.tsx
rename to packages/react/src/components/spinner/spinner.chromatic.tsx
index cb9c78ad..7734c2af 100644
--- a/packages/react/src/components/Spinner/Spinner.chromatic.tsx
+++ b/packages/react/src/components/spinner/spinner.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Spinner } from '.';
-import * as SpinnerStories from './Spinner.stories';
+import * as SpinnerStories from './spinner.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Spinner',
diff --git a/packages/react/src/components/Spinner/Spinner.mdx b/packages/react/src/components/spinner/spinner.mdx
similarity index 93%
rename from packages/react/src/components/Spinner/Spinner.mdx
rename to packages/react/src/components/spinner/spinner.mdx
index e1d1675c..6a6ff1e4 100644
--- a/packages/react/src/components/Spinner/Spinner.mdx
+++ b/packages/react/src/components/spinner/spinner.mdx
@@ -1,6 +1,6 @@
 import { Meta, Primary, Controls, Canvas } from '@storybook/addon-docs/blocks';
 
-import * as SpinnerStories from './Spinner.stories';
+import * as SpinnerStories from './spinner.stories';
 
 <Meta of={SpinnerStories} />
 
diff --git a/packages/react/src/components/Spinner/Spinner.tsx b/packages/react/src/components/spinner/spinner.tsx
similarity index 100%
rename from packages/react/src/components/Spinner/Spinner.tsx
rename to packages/react/src/components/spinner/spinner.tsx
diff --git a/packages/react/src/components/Suggestion/index.ts b/packages/react/src/components/suggestion/index.ts
similarity index 65%
rename from packages/react/src/components/Suggestion/index.ts
rename to packages/react/src/components/suggestion/index.ts
index 8f680b02..7d4f2d0b 100644
--- a/packages/react/src/components/Suggestion/index.ts
+++ b/packages/react/src/components/suggestion/index.ts
@@ -1,10 +1,10 @@
-import { Suggestion as SuggestionRoot } from './Suggestion';
-import { SuggestionChips } from './SuggestionChips';
-import { SuggestionClear } from './SuggestionClear';
-import { SuggestionEmpty } from './SuggestionEmpty';
-import { SuggestionInput } from './SuggestionInput';
-import { SuggestionList } from './SuggestionList';
-import { SuggestionOption } from './SuggestionOption';
+import { Suggestion as SuggestionRoot } from './suggestion';
+import { SuggestionChips } from './suggestion-chips';
+import { SuggestionClear } from './suggestion-clear';
+import { SuggestionEmpty } from './suggestion-empty';
+import { SuggestionInput } from './suggestion-input';
+import { SuggestionList } from './suggestion-list';
+import { SuggestionOption } from './suggestion-option';
 
 /**
  * A component that provides a suggestion list for an input field.
@@ -46,10 +46,10 @@ export {
   SuggestionOption as EXPERIMENTAL_SuggestionOption,
   SuggestionClear as EXPERIMENTAL_SuggestionClear,
 };
-export type { SuggestionProps, SuggestionValues } from './Suggestion'; // Export SuggestionValues for easier useState
-export type { SuggestionChipsProps } from './SuggestionChips';
-export type { SuggestionClearProps } from './SuggestionClear';
-export type { SuggestionEmptyProps } from './SuggestionEmpty';
-export type { SuggestionInputProps } from './SuggestionInput';
-export type { SuggestionListProps } from './SuggestionList';
-export type { SuggestionOptionProps } from './SuggestionOption';
+export type { SuggestionProps, SuggestionValues } from './suggestion'; // Export SuggestionValues for easier useState
+export type { SuggestionChipsProps } from './suggestion-chips';
+export type { SuggestionClearProps } from './suggestion-clear';
+export type { SuggestionEmptyProps } from './suggestion-empty';
+export type { SuggestionInputProps } from './suggestion-input';
+export type { SuggestionListProps } from './suggestion-list';
+export type { SuggestionOptionProps } from './suggestion-option';
diff --git a/packages/react/src/components/Suggestion/SuggestionChips.tsx b/packages/react/src/components/suggestion/suggestion-chips.tsx
similarity index 91%
rename from packages/react/src/components/Suggestion/SuggestionChips.tsx
rename to packages/react/src/components/suggestion/suggestion-chips.tsx
index cbf48b0e..b3aa9ea7 100644
--- a/packages/react/src/components/Suggestion/SuggestionChips.tsx
+++ b/packages/react/src/components/suggestion/suggestion-chips.tsx
@@ -2,8 +2,8 @@ import type { HTMLAttributes, ReactNode } from 'react';
 import { useContext } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
-import { Chip } from '../Chip';
-import { SuggestionContext } from './Suggestion';
+import { Chip } from '../chip';
+import { SuggestionContext } from './suggestion';
 
 export type SuggestionChipsProps = MergeRight<
   DefaultProps & HTMLAttributes<HTMLDivElement>,
diff --git a/packages/react/src/components/Suggestion/SuggestionClear.tsx b/packages/react/src/components/suggestion/suggestion-clear.tsx
similarity index 94%
rename from packages/react/src/components/Suggestion/SuggestionClear.tsx
rename to packages/react/src/components/suggestion/suggestion-clear.tsx
index 1fb6f77a..59f9913f 100644
--- a/packages/react/src/components/Suggestion/SuggestionClear.tsx
+++ b/packages/react/src/components/suggestion/suggestion-clear.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { Button, type ButtonProps } from '../Button';
+import { Button, type ButtonProps } from '../button';
 
 /* We omit children since we render the icon with css */
 export type SuggestionClearProps = Omit<ButtonProps, 'variant' | 'children'> & {
diff --git a/packages/react/src/components/Suggestion/SuggestionEmpty.tsx b/packages/react/src/components/suggestion/suggestion-empty.tsx
similarity index 93%
rename from packages/react/src/components/Suggestion/SuggestionEmpty.tsx
rename to packages/react/src/components/suggestion/suggestion-empty.tsx
index 6e73ef1d..a08c48c8 100644
--- a/packages/react/src/components/Suggestion/SuggestionEmpty.tsx
+++ b/packages/react/src/components/suggestion/suggestion-empty.tsx
@@ -1,7 +1,7 @@
 import type { OptionHTMLAttributes } from 'react';
 import { forwardRef, useContext } from 'react';
 import type { DefaultProps } from '../../types';
-import { SuggestionContext } from './Suggestion';
+import { SuggestionContext } from './suggestion';
 
 export type SuggestionEmptyProps = DefaultProps &
   OptionHTMLAttributes<HTMLOptionElement>;
diff --git a/packages/react/src/components/Suggestion/SuggestionInput.tsx b/packages/react/src/components/suggestion/suggestion-input.tsx
similarity index 92%
rename from packages/react/src/components/Suggestion/SuggestionInput.tsx
rename to packages/react/src/components/suggestion/suggestion-input.tsx
index 96bb5c5b..104b3cc7 100644
--- a/packages/react/src/components/Suggestion/SuggestionInput.tsx
+++ b/packages/react/src/components/suggestion/suggestion-input.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, useContext, useEffect } from 'react';
-import { Input, type InputProps } from '../Input';
-import { SuggestionContext } from './Suggestion';
+import { Input, type InputProps } from '../input';
+import { SuggestionContext } from './suggestion';
 
 export type SuggestionInputProps = InputProps;
 
diff --git a/packages/react/src/components/Suggestion/SuggestionList.tsx b/packages/react/src/components/suggestion/suggestion-list.tsx
similarity index 96%
rename from packages/react/src/components/Suggestion/SuggestionList.tsx
rename to packages/react/src/components/suggestion/suggestion-list.tsx
index 5d7c4664..689fdff5 100644
--- a/packages/react/src/components/Suggestion/SuggestionList.tsx
+++ b/packages/react/src/components/suggestion/suggestion-list.tsx
@@ -3,7 +3,7 @@ import { forwardRef, useContext, useEffect } from 'react';
 import '@u-elements/u-datalist';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
-import { SuggestionContext } from './Suggestion';
+import { SuggestionContext } from './suggestion';
 
 export type SuggestionListProps = MergeRight<
   DefaultProps & HTMLAttributes<HTMLDataListElement>,
diff --git a/packages/react/src/components/Suggestion/SuggestionOption.tsx b/packages/react/src/components/suggestion/suggestion-option.tsx
similarity index 100%
rename from packages/react/src/components/Suggestion/SuggestionOption.tsx
rename to packages/react/src/components/suggestion/suggestion-option.tsx
diff --git a/packages/react/src/components/Suggestion/Suggestion.mdx b/packages/react/src/components/suggestion/suggestion.mdx
similarity index 92%
rename from packages/react/src/components/Suggestion/Suggestion.mdx
rename to packages/react/src/components/suggestion/suggestion.mdx
index 312a5368..fd1ab910 100644
--- a/packages/react/src/components/Suggestion/Suggestion.mdx
+++ b/packages/react/src/components/suggestion/suggestion.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/addon-docs/blocks';
-import * as SuggestionStories from './Suggestion.stories';
-import { Alert } from '../Alert';
-import { SuggestionList } from './SuggestionList';
+import * as SuggestionStories from './suggestion.stories';
+import { Alert } from '../alert';
+import { SuggestionList } from './suggestion-list';
 
 <Meta of={SuggestionStories} />
 
diff --git a/packages/react/src/components/Suggestion/Suggestion.stories.tsx b/packages/react/src/components/suggestion/suggestion.stories.tsx
similarity index 100%
rename from packages/react/src/components/Suggestion/Suggestion.stories.tsx
rename to packages/react/src/components/suggestion/suggestion.stories.tsx
diff --git a/packages/react/src/components/Suggestion/Suggestion.tsx b/packages/react/src/components/suggestion/suggestion.tsx
similarity index 100%
rename from packages/react/src/components/Suggestion/Suggestion.tsx
rename to packages/react/src/components/suggestion/suggestion.tsx
diff --git a/packages/react/src/components/switch/index.ts b/packages/react/src/components/switch/index.ts
new file mode 100644
index 00000000..1ac04c4b
--- /dev/null
+++ b/packages/react/src/components/switch/index.ts
@@ -0,0 +1,2 @@
+export type { SwitchProps } from './switch';
+export { Switch } from './switch';
diff --git a/packages/react/src/components/Switch/Switch.chromatic.tsx b/packages/react/src/components/switch/switch.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Switch/Switch.chromatic.tsx
rename to packages/react/src/components/switch/switch.chromatic.tsx
index 87efbd03..d89efb04 100644
--- a/packages/react/src/components/Switch/Switch.chromatic.tsx
+++ b/packages/react/src/components/switch/switch.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Switch } from '.';
-import * as SwitchStories from './Switch.stories';
+import * as SwitchStories from './switch.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Switch',
diff --git a/packages/react/src/components/Switch/Switch.mdx b/packages/react/src/components/switch/switch.mdx
similarity index 98%
rename from packages/react/src/components/Switch/Switch.mdx
rename to packages/react/src/components/switch/switch.mdx
index c3c8ddd1..96a333d0 100644
--- a/packages/react/src/components/Switch/Switch.mdx
+++ b/packages/react/src/components/switch/switch.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/input.css?inline';
-import * as SwitchStories from './Switch.stories';
+import * as SwitchStories from './switch.stories';
 
 <Meta of={SwitchStories} />
 
diff --git a/packages/react/src/components/Switch/Switch.stories.tsx b/packages/react/src/components/switch/switch.stories.tsx
similarity index 96%
rename from packages/react/src/components/Switch/Switch.stories.tsx
rename to packages/react/src/components/switch/switch.stories.tsx
index 11e97e76..05f5db9a 100644
--- a/packages/react/src/components/Switch/Switch.stories.tsx
+++ b/packages/react/src/components/switch/switch.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Fieldset } from '../Fieldset';
+import { Fieldset } from '../fieldset';
 
 import { Switch } from '.';
 
diff --git a/packages/react/src/components/Switch/Switch.tsx b/packages/react/src/components/switch/switch.tsx
similarity index 91%
rename from packages/react/src/components/Switch/Switch.tsx
rename to packages/react/src/components/switch/switch.tsx
index 7a231eed..6909d4c1 100644
--- a/packages/react/src/components/Switch/Switch.tsx
+++ b/packages/react/src/components/switch/switch.tsx
@@ -2,9 +2,9 @@ import type { InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
 import type { DefaultProps, LabelRequired } from '../../types';
 import type { MergeRight } from '../../utilities';
-import { Field, type FieldProps } from '../Field';
-import { Input, type InputProps } from '../Input';
-import { Label } from '../Label';
+import { Field, type FieldProps } from '../field';
+import { Input, type InputProps } from '../input';
+import { Label } from '../label';
 
 export type SwitchProps = MergeRight<
   DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>,
diff --git a/packages/react/src/components/Table/index.ts b/packages/react/src/components/table/index.ts
similarity index 65%
rename from packages/react/src/components/Table/index.ts
rename to packages/react/src/components/table/index.ts
index 0122f9d4..2fb6a9de 100644
--- a/packages/react/src/components/Table/index.ts
+++ b/packages/react/src/components/table/index.ts
@@ -1,17 +1,17 @@
-import type { TableProps } from './Table';
-import { Table as TableRoot } from './Table';
-import type { TableBodyProps } from './TableBody';
-import { TableBody } from './TableBody';
-import type { TableCellProps } from './TableCell';
-import { TableCell } from './TableCell';
-import type { TableFootProps } from './TableFoot';
-import { TableFoot } from './TableFoot';
-import type { TableHeadProps } from './TableHead';
-import { TableHead } from './TableHead';
-import type { TableHeaderCellProps } from './TableHeaderCell';
-import { TableHeaderCell } from './TableHeaderCell';
-import type { TableRowProps } from './TableRow';
-import { TableRow } from './TableRow';
+import type { TableProps } from './table';
+import { Table as TableRoot } from './table';
+import type { TableBodyProps } from './table-body';
+import { TableBody } from './table-body';
+import type { TableCellProps } from './table-cell';
+import { TableCell } from './table-cell';
+import type { TableFootProps } from './table-foot';
+import { TableFoot } from './table-foot';
+import type { TableHeadProps } from './table-head';
+import { TableHead } from './table-head';
+import type { TableHeaderCellProps } from './table-header-cell';
+import { TableHeaderCell } from './table-header-cell';
+import type { TableRowProps } from './table-row';
+import { TableRow } from './table-row';
 
 /**
  * Table component, used to display tabular data. Renders a native HTML table element.
diff --git a/packages/react/src/components/Table/TableHeaderCell.tsx b/packages/react/src/components/table/table-header-cell.tsx
similarity index 100%
rename from packages/react/src/components/Table/TableHeaderCell.tsx
rename to packages/react/src/components/table/table-header-cell.tsx
diff --git a/packages/react/src/components/Table/TableRow.tsx b/packages/react/src/components/table/table-row.tsx
similarity index 100%
rename from packages/react/src/components/Table/TableRow.tsx
rename to packages/react/src/components/table/table-row.tsx
diff --git a/packages/react/src/components/Table/Table.chromatic.tsx b/packages/react/src/components/table/table.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Table/Table.chromatic.tsx
rename to packages/react/src/components/table/table.chromatic.tsx
index 3db619df..6335637a 100644
--- a/packages/react/src/components/Table/Table.chromatic.tsx
+++ b/packages/react/src/components/table/table.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Table } from '.';
-import * as TableStories from './Table.stories';
+import * as TableStories from './table.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Table',
diff --git a/packages/react/src/components/Table/Table.mdx b/packages/react/src/components/table/table.mdx
similarity index 99%
rename from packages/react/src/components/Table/Table.mdx
rename to packages/react/src/components/table/table.mdx
index 91c4b4f4..04840e01 100644
--- a/packages/react/src/components/Table/Table.mdx
+++ b/packages/react/src/components/table/table.mdx
@@ -1,7 +1,7 @@
 import { Meta, Primary, Controls, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/table.css?inline';
-import * as TableStories from './Table.stories';
+import * as TableStories from './table.stories';
 
 import { TableHeaderCell } from './';
 
diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/table/table.tsx
similarity index 100%
rename from packages/react/src/components/Table/Table.tsx
rename to packages/react/src/components/table/table.tsx
diff --git a/packages/react/src/components/Tabs/index.ts b/packages/react/src/components/tabs/index.ts
similarity index 66%
rename from packages/react/src/components/Tabs/index.ts
rename to packages/react/src/components/tabs/index.ts
index 8448b360..e8ce8c90 100644
--- a/packages/react/src/components/Tabs/index.ts
+++ b/packages/react/src/components/tabs/index.ts
@@ -1,7 +1,7 @@
-import { Tabs as TabsParent } from './Tabs';
-import { TabsList } from './TabsList';
-import { TabsPanel } from './TabsPanel';
-import { TabsTab } from './TabsTab';
+import { Tabs as TabsParent } from './tabs';
+import { TabsList } from './tabs-list';
+import { TabsPanel } from './tabs-panel';
+import { TabsTab } from './tabs-tab';
 
 /**
  * Display a group of tabs that can be toggled between.
@@ -28,8 +28,8 @@ Tabs.Tab.displayName = 'Tabs.Tab';
 Tabs.List.displayName = 'Tabs.List';
 Tabs.Panel.displayName = 'Tabs.Panel';
 
-export type { TabsProps } from './Tabs';
-export type { TabsListProps } from './TabsList';
-export type { TabsPanelProps } from './TabsPanel';
-export type { TabsTabProps } from './TabsTab';
+export type { TabsProps } from './tabs';
+export type { TabsListProps } from './tabs-list';
+export type { TabsPanelProps } from './tabs-panel';
+export type { TabsTabProps } from './tabs-tab';
 export { Tabs, TabsTab, TabsList, TabsPanel };
diff --git a/packages/react/src/components/Tabs/TabsList.tsx b/packages/react/src/components/tabs/tabs-list.tsx
similarity index 88%
rename from packages/react/src/components/Tabs/TabsList.tsx
rename to packages/react/src/components/tabs/tabs-list.tsx
index 8cf2aa5c..1903ff2c 100644
--- a/packages/react/src/components/Tabs/TabsList.tsx
+++ b/packages/react/src/components/tabs/tabs-list.tsx
@@ -1,9 +1,9 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useContext } from 'react';
 
-import { RovingFocusRoot } from '../../utilities/RovingFocus';
+import { RovingFocusRoot } from '../../utilities/roving-focus';
 
-import { Context } from './Tabs';
+import { Context } from './tabs';
 
 export type TabsListProps = HTMLAttributes<HTMLDivElement>;
 
diff --git a/packages/react/src/components/Tabs/TabsPanel.tsx b/packages/react/src/components/tabs/tabs-panel.tsx
similarity index 97%
rename from packages/react/src/components/Tabs/TabsPanel.tsx
rename to packages/react/src/components/tabs/tabs-panel.tsx
index 01fa077f..e37603d3 100644
--- a/packages/react/src/components/Tabs/TabsPanel.tsx
+++ b/packages/react/src/components/tabs/tabs-panel.tsx
@@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'react';
 import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 
 import { useMergeRefs } from '../../utilities/hooks';
-import { Context } from './Tabs';
+import { Context } from './tabs';
 
 export type TabsPanelProps = {
   /**
diff --git a/packages/react/src/components/Tabs/TabsTab.tsx b/packages/react/src/components/tabs/tabs-tab.tsx
similarity index 89%
rename from packages/react/src/components/Tabs/TabsTab.tsx
rename to packages/react/src/components/tabs/tabs-tab.tsx
index 73ead3ff..96db1f3f 100644
--- a/packages/react/src/components/Tabs/TabsTab.tsx
+++ b/packages/react/src/components/tabs/tabs-tab.tsx
@@ -1,8 +1,8 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useContext, useId } from 'react';
 
-import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem';
-import { Context } from './Tabs';
+import { RovingFocusItem } from '../../utilities/roving-focus/roving-focus-item';
+import { Context } from './tabs';
 
 export type TabsTabProps = {
   /**
diff --git a/packages/react/src/components/Tabs/Tabs.chromatic.tsx b/packages/react/src/components/tabs/tabs.chromatic.tsx
similarity index 85%
rename from packages/react/src/components/Tabs/Tabs.chromatic.tsx
rename to packages/react/src/components/tabs/tabs.chromatic.tsx
index ef7a3891..4c64f216 100644
--- a/packages/react/src/components/Tabs/Tabs.chromatic.tsx
+++ b/packages/react/src/components/tabs/tabs.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Tabs } from '.';
-import * as TabsStories from './Tabs.stories';
+import * as TabsStories from './tabs.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Tabs',
diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/tabs/tabs.mdx
similarity index 96%
rename from packages/react/src/components/Tabs/Tabs.mdx
rename to packages/react/src/components/tabs/tabs.mdx
index c97b7543..f998cb49 100644
--- a/packages/react/src/components/Tabs/Tabs.mdx
+++ b/packages/react/src/components/tabs/tabs.mdx
@@ -1,10 +1,10 @@
 import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/tabs.css?inline';
-import { Tabs } from './Tabs';
-import { TabsTab } from './TabsTab';
-import { TabsPanel } from './TabsPanel';
-import * as TabsStories from './Tabs.stories';
+import { Tabs } from './tabs';
+import { TabsTab } from './tabs-tab';
+import { TabsPanel } from './tabs-panel';
+import * as TabsStories from './tabs.stories';
 
 <Meta of={TabsStories} />
 
diff --git a/packages/react/src/components/Tabs/Tabs.stories.tsx b/packages/react/src/components/tabs/tabs.stories.tsx
similarity index 97%
rename from packages/react/src/components/Tabs/Tabs.stories.tsx
rename to packages/react/src/components/tabs/tabs.stories.tsx
index 834cd622..a4bda128 100644
--- a/packages/react/src/components/Tabs/Tabs.stories.tsx
+++ b/packages/react/src/components/tabs/tabs.stories.tsx
@@ -9,8 +9,8 @@ import {
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { useState } from 'react';
 
-import { Button } from '../Button';
-import { Tooltip } from '../Tooltip';
+import { Button } from '../button';
+import { Tooltip } from '../tooltip';
 import { Tabs } from '.';
 
 export default {
diff --git a/packages/react/src/components/Tabs/Tabs.test.tsx b/packages/react/src/components/tabs/tabs.test.tsx
similarity index 100%
rename from packages/react/src/components/Tabs/Tabs.test.tsx
rename to packages/react/src/components/tabs/tabs.test.tsx
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/tabs/tabs.tsx
similarity index 100%
rename from packages/react/src/components/Tabs/Tabs.tsx
rename to packages/react/src/components/tabs/tabs.tsx
diff --git a/packages/react/src/components/tag/index.ts b/packages/react/src/components/tag/index.ts
new file mode 100644
index 00000000..c774b34f
--- /dev/null
+++ b/packages/react/src/components/tag/index.ts
@@ -0,0 +1,2 @@
+export type { TagProps } from './tag';
+export { Tag } from './tag';
diff --git a/packages/react/src/components/Tag/Tag.chromatic.tsx b/packages/react/src/components/tag/tag.chromatic.tsx
similarity index 85%
rename from packages/react/src/components/Tag/Tag.chromatic.tsx
rename to packages/react/src/components/tag/tag.chromatic.tsx
index 0a204954..2f6deb16 100644
--- a/packages/react/src/components/Tag/Tag.chromatic.tsx
+++ b/packages/react/src/components/tag/tag.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Tag } from '.';
-import * as TagStories from './Tag.stories';
+import * as TagStories from './tag.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Tag',
diff --git a/packages/react/src/components/Tag/Tag.mdx b/packages/react/src/components/tag/tag.mdx
similarity index 97%
rename from packages/react/src/components/Tag/Tag.mdx
rename to packages/react/src/components/tag/tag.mdx
index 4200a1e7..ee30127b 100644
--- a/packages/react/src/components/Tag/Tag.mdx
+++ b/packages/react/src/components/tag/tag.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/tag.css?inline';
-import * as TagStories from './Tag.stories';
+import * as TagStories from './tag.stories';
 
 <Meta of={TagStories} />
 
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/tag/tag.tsx
similarity index 100%
rename from packages/react/src/components/Tag/Tag.tsx
rename to packages/react/src/components/tag/tag.tsx
diff --git a/packages/react/src/components/textarea/index.ts b/packages/react/src/components/textarea/index.ts
new file mode 100644
index 00000000..282e5503
--- /dev/null
+++ b/packages/react/src/components/textarea/index.ts
@@ -0,0 +1,2 @@
+export type { TextareaProps } from './textarea';
+export { Textarea } from './textarea';
diff --git a/packages/react/src/components/Textarea/Textarea.chromatic.tsx b/packages/react/src/components/textarea/textarea.chromatic.tsx
similarity index 84%
rename from packages/react/src/components/Textarea/Textarea.chromatic.tsx
rename to packages/react/src/components/textarea/textarea.chromatic.tsx
index ec8df7c0..72610624 100644
--- a/packages/react/src/components/Textarea/Textarea.chromatic.tsx
+++ b/packages/react/src/components/textarea/textarea.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Textarea } from '.';
-import * as TextareaStories from './Textarea.stories';
+import * as TextareaStories from './textarea.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Textarea',
diff --git a/packages/react/src/components/Textarea/Textarea.mdx b/packages/react/src/components/textarea/textarea.mdx
similarity index 98%
rename from packages/react/src/components/Textarea/Textarea.mdx
rename to packages/react/src/components/textarea/textarea.mdx
index 55adc1a3..739e82a2 100644
--- a/packages/react/src/components/Textarea/Textarea.mdx
+++ b/packages/react/src/components/textarea/textarea.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/input.css?inline';
-import * as TextareaStories from './Textarea.stories';
+import * as TextareaStories from './textarea.stories';
 
 <Meta of={TextareaStories} />
 
diff --git a/packages/react/src/components/Textarea/Textarea.tsx b/packages/react/src/components/textarea/textarea.tsx
similarity index 100%
rename from packages/react/src/components/Textarea/Textarea.tsx
rename to packages/react/src/components/textarea/textarea.tsx
diff --git a/packages/react/src/components/textfield/index.ts b/packages/react/src/components/textfield/index.ts
new file mode 100644
index 00000000..c21953bc
--- /dev/null
+++ b/packages/react/src/components/textfield/index.ts
@@ -0,0 +1,2 @@
+export type { TextfieldProps } from './textfield';
+export { Textfield } from './textfield';
diff --git a/packages/react/src/components/Textfield/Textfield.chromatic.tsx b/packages/react/src/components/textfield/textfield.chromatic.tsx
similarity index 83%
rename from packages/react/src/components/Textfield/Textfield.chromatic.tsx
rename to packages/react/src/components/textfield/textfield.chromatic.tsx
index a6c3f3e8..9f9355af 100644
--- a/packages/react/src/components/Textfield/Textfield.chromatic.tsx
+++ b/packages/react/src/components/textfield/textfield.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { Textfield } from '.';
-import * as TextfieldStories from './Textfield.stories';
+import * as TextfieldStories from './textfield.stories';
 
 const meta: Meta = {
   title: 'Chromatic/Textfield',
diff --git a/packages/react/src/components/Textfield/Textfield.mdx b/packages/react/src/components/textfield/textfield.mdx
similarity index 97%
rename from packages/react/src/components/Textfield/Textfield.mdx
rename to packages/react/src/components/textfield/textfield.mdx
index 99ce8ba7..4e0a29c9 100644
--- a/packages/react/src/components/Textfield/Textfield.mdx
+++ b/packages/react/src/components/textfield/textfield.mdx
@@ -1,5 +1,5 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
-import * as TextfieldStories from './Textfield.stories';
+import * as TextfieldStories from './textfield.stories';
 
 <Meta of={TextfieldStories} />
 
@@ -83,4 +83,4 @@ Ikke bruk deaktivert tilstand (`disabled`) på tekstfelt. Tenk heller over om du
 
 ### Prefiks og suffiks
 
-Prefiks og suffiks er et ekstra visuelt hjelpemiddel, som blir ignorert av skjermlesere. Vi må alltid ha en beskrivende ledetekst. Prefiks og suffiks er plassert utenfor inndatafeltene de tilhører. Da unngår vi at de ikke skaper trøbbel i noen nettlesere, som kan sette inn et ikon i inndatafeltet (for eksempel ikoner for å vise eller lage passord).
\ No newline at end of file
+Prefiks og suffiks er et ekstra visuelt hjelpemiddel, som blir ignorert av skjermlesere. Vi må alltid ha en beskrivende ledetekst. Prefiks og suffiks er plassert utenfor inndatafeltene de tilhører. Da unngår vi at de ikke skaper trøbbel i noen nettlesere, som kan sette inn et ikon i inndatafeltet (for eksempel ikoner for å vise eller lage passord).
diff --git a/packages/react/src/components/Textfield/Textfield.tsx b/packages/react/src/components/textfield/textfield.tsx
similarity index 93%
rename from packages/react/src/components/Textfield/Textfield.tsx
rename to packages/react/src/components/textfield/textfield.tsx
index 650fc9dc..aa2d5c39 100644
--- a/packages/react/src/components/Textfield/Textfield.tsx
+++ b/packages/react/src/components/textfield/textfield.tsx
@@ -7,11 +7,11 @@ import {
   FieldAffixes,
   type FieldCounterProps,
   FieldDescription,
-} from '../Field';
-import { Input, type InputProps } from '../Input';
-import { Label } from '../Label';
-import { Textarea, type TextareaProps } from '../Textarea';
-import { ValidationMessage } from '../ValidationMessage';
+} from '../field';
+import { Input, type InputProps } from '../input';
+import { Label } from '../label';
+import { Textarea, type TextareaProps } from '../textarea';
+import { ValidationMessage } from '../validation-message';
 
 type InputProps_ = Omit<
   InputProps,
diff --git a/packages/react/src/components/ToggleGroup/index.ts b/packages/react/src/components/toggle-group/index.ts
similarity index 68%
rename from packages/react/src/components/ToggleGroup/index.ts
rename to packages/react/src/components/toggle-group/index.ts
index 3221d40c..23c5c474 100644
--- a/packages/react/src/components/ToggleGroup/index.ts
+++ b/packages/react/src/components/toggle-group/index.ts
@@ -1,5 +1,5 @@
-import { ToggleGroup as ToggleGroupParent } from './ToggleGroup';
-import { ToggleGroupItem } from './ToggleGroupItem';
+import { ToggleGroup as ToggleGroupParent } from './toggle-group';
+import { ToggleGroupItem } from './toggle-group-item';
 
 /**
  * Display a group of buttons that can be toggled between.
@@ -17,6 +17,6 @@ const ToggleGroup = Object.assign(ToggleGroupParent, {
 
 ToggleGroup.Item.displayName = 'ToggleGroup.Item';
 
-export type { ToggleGroupProps } from './ToggleGroup';
-export type { ToggleGroupItemProps } from './ToggleGroupItem';
+export type { ToggleGroupProps } from './toggle-group';
+export type { ToggleGroupItemProps } from './toggle-group-item';
 export { ToggleGroup, ToggleGroupItem };
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx b/packages/react/src/components/toggle-group/toggle-group-item.tsx
similarity index 79%
rename from packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx
rename to packages/react/src/components/toggle-group/toggle-group-item.tsx
index 256d8cf2..5d0e7580 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx
+++ b/packages/react/src/components/toggle-group/toggle-group-item.tsx
@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
 
-import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem';
-import { Button, type ButtonProps } from '../Button/Button';
+import { RovingFocusItem } from '../../utilities/roving-focus/roving-focus-item';
+import { Button, type ButtonProps } from '../button/button';
 
-import { useToggleGroupItem } from './useToggleGroupitem';
+import { useToggleGroupItem } from './use-toggle-groupitem';
 
 export type ToggleGroupItemProps = {
   /**
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.chromatic.tsx b/packages/react/src/components/toggle-group/toggle-group.chromatic.tsx
similarity index 88%
rename from packages/react/src/components/ToggleGroup/ToggleGroup.chromatic.tsx
rename to packages/react/src/components/toggle-group/toggle-group.chromatic.tsx
index 166e4dd4..b42e4b73 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroup.chromatic.tsx
+++ b/packages/react/src/components/toggle-group/toggle-group.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { ToggleGroup } from '.';
-import * as ToggleGroupStories from './ToggleGroup.stories';
+import * as ToggleGroupStories from './toggle-group.stories';
 
 const meta: Meta = {
   title: 'Chromatic/ToggleGroup',
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.mdx b/packages/react/src/components/toggle-group/toggle-group.mdx
similarity index 98%
rename from packages/react/src/components/ToggleGroup/ToggleGroup.mdx
rename to packages/react/src/components/toggle-group/toggle-group.mdx
index a51973de..8c77239d 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroup.mdx
+++ b/packages/react/src/components/toggle-group/toggle-group.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/togglegroup.css?inline';
-import * as ToggleGroupStories from './ToggleGroup.stories';
+import * as ToggleGroupStories from './toggle-group.stories';
 
 <Meta of={ToggleGroupStories} />
 
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.stories.tsx b/packages/react/src/components/toggle-group/toggle-group.stories.tsx
similarity index 94%
rename from packages/react/src/components/ToggleGroup/ToggleGroup.stories.tsx
rename to packages/react/src/components/toggle-group/toggle-group.stories.tsx
index 4bd414ab..676eef73 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroup.stories.tsx
+++ b/packages/react/src/components/toggle-group/toggle-group.stories.tsx
@@ -10,10 +10,10 @@ import {
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { useState } from 'react';
 
-import { Button } from '../Button';
-import { Divider } from '../Divider';
-import { Paragraph } from '../Paragraph';
-import { Tooltip } from '../Tooltip';
+import { Button } from '../button';
+import { Divider } from '../divider';
+import { Paragraph } from '../paragraph';
+import { Tooltip } from '../tooltip';
 import { ToggleGroup } from '.';
 
 export default {
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.test.tsx b/packages/react/src/components/toggle-group/toggle-group.test.tsx
similarity index 100%
rename from packages/react/src/components/ToggleGroup/ToggleGroup.test.tsx
rename to packages/react/src/components/toggle-group/toggle-group.test.tsx
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx b/packages/react/src/components/toggle-group/toggle-group.tsx
similarity index 97%
rename from packages/react/src/components/ToggleGroup/ToggleGroup.tsx
rename to packages/react/src/components/toggle-group/toggle-group.tsx
index 2eb9dc2a..57babfa4 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
+++ b/packages/react/src/components/toggle-group/toggle-group.tsx
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'react';
 import { createContext, forwardRef, useId, useState } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
-import { RovingFocusRoot } from '../../utilities/RovingFocus';
+import { RovingFocusRoot } from '../../utilities/roving-focus';
 
 export type ToggleGroupContextProps = {
   value?: string;
diff --git a/packages/react/src/components/ToggleGroup/useToggleGroupitem.ts b/packages/react/src/components/toggle-group/use-toggle-groupitem.ts
similarity index 85%
rename from packages/react/src/components/ToggleGroup/useToggleGroupitem.ts
rename to packages/react/src/components/toggle-group/use-toggle-groupitem.ts
index c8b863db..283837d9 100644
--- a/packages/react/src/components/ToggleGroup/useToggleGroupitem.ts
+++ b/packages/react/src/components/toggle-group/use-toggle-groupitem.ts
@@ -1,9 +1,9 @@
 import { useContext, useId } from 'react';
 
-import type { ButtonProps } from '../Button';
-import { ToggleGroupContext } from './ToggleGroup';
+import type { ButtonProps } from '../button';
+import { ToggleGroupContext } from './toggle-group';
 
-import type { ToggleGroupItemProps } from './ToggleGroupItem';
+import type { ToggleGroupItemProps } from './toggle-group-item';
 
 type UseToggleGroupItem = (props: ToggleGroupItemProps) => {
   active: boolean;
diff --git a/packages/react/src/components/tooltip/index.ts b/packages/react/src/components/tooltip/index.ts
new file mode 100644
index 00000000..13663aba
--- /dev/null
+++ b/packages/react/src/components/tooltip/index.ts
@@ -0,0 +1,2 @@
+export type { TooltipProps } from './tooltip';
+export { Tooltip } from './tooltip';
diff --git a/packages/react/src/components/Tooltip/Tooltip.mdx b/packages/react/src/components/tooltip/tooltip.mdx
similarity index 98%
rename from packages/react/src/components/Tooltip/Tooltip.mdx
rename to packages/react/src/components/tooltip/tooltip.mdx
index e442b0e5..dc261f98 100644
--- a/packages/react/src/components/Tooltip/Tooltip.mdx
+++ b/packages/react/src/components/tooltip/tooltip.mdx
@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/tooltip.css?inline';
-import * as TooltipStories from './Tooltip.stories.tsx';
+import * as TooltipStories from './tooltip.stories.tsx';
 
 <Meta of={TooltipStories} />
 
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/tooltip/tooltip.tsx
similarity index 100%
rename from packages/react/src/components/Tooltip/Tooltip.tsx
rename to packages/react/src/components/tooltip/tooltip.tsx
diff --git a/packages/react/src/components/validation-message/index.ts b/packages/react/src/components/validation-message/index.ts
new file mode 100644
index 00000000..b084aa9c
--- /dev/null
+++ b/packages/react/src/components/validation-message/index.ts
@@ -0,0 +1,2 @@
+export type { ValidationMessageProps } from './validation-message';
+export { ValidationMessage } from './validation-message';
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.chromatic.tsx b/packages/react/src/components/validation-message/validation-message.chromatic.tsx
similarity index 82%
rename from packages/react/src/components/ValidationMessage/ValidationMessage.chromatic.tsx
rename to packages/react/src/components/validation-message/validation-message.chromatic.tsx
index 886c562b..79185f7c 100644
--- a/packages/react/src/components/ValidationMessage/ValidationMessage.chromatic.tsx
+++ b/packages/react/src/components/validation-message/validation-message.chromatic.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
-import { createSingleStory } from '../../../stories/utils/createSingleStory';
+import { createSingleStory } from '../../../stories/utils/create-single-story';
 import { ValidationMessage } from '.';
-import * as ValidationMessageStories from './ValidationMessage.stories';
+import * as ValidationMessageStories from './validation-message.stories';
 
 const meta: Meta = {
   title: 'Chromatic/ValidationMessage',
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.stories.tsx b/packages/react/src/components/validation-message/validation-message.stories.tsx
similarity index 100%
rename from packages/react/src/components/ValidationMessage/ValidationMessage.stories.tsx
rename to packages/react/src/components/validation-message/validation-message.stories.tsx
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/validation-message/validation-message.tsx
similarity index 100%
rename from packages/react/src/components/ValidationMessage/ValidationMessage.tsx
rename to packages/react/src/components/validation-message/validation-message.tsx
diff --git a/packages/react/src/utilities/hooks/index.ts b/packages/react/src/utilities/hooks/index.ts
index c7c7dc54..562166b3 100644
--- a/packages/react/src/utilities/hooks/index.ts
+++ b/packages/react/src/utilities/hooks/index.ts
@@ -1,12 +1,11 @@
-export type { UseCheckboxGroupProps } from './useCheckboxGroup/useCheckboxGroup';
-export { useCheckboxGroup } from './useCheckboxGroup/useCheckboxGroup';
-export { useDebounceCallback } from './useDebounceCallback/useDebounceCallback';
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
-export { useMediaQuery } from './useMediaQuery/useMediaQuery';
-export { useMergeRefs } from './useMergeRefs/useMergeRefs';
-export type { UsePaginationProps } from './usePagination/usePagination';
-export { usePagination } from './usePagination/usePagination';
-
-export type { UseRadioGroupProps } from './useRadioGroup/useRadioGroup';
-export { useRadioGroup } from './useRadioGroup/useRadioGroup';
-export { useSynchronizedAnimation } from './useSynchronizedAnimation/useSynchronizedAnimation';
+export type { UseCheckboxGroupProps } from './use-checkbox-group/use-checkbox-group';
+export { useCheckboxGroup } from './use-checkbox-group/use-checkbox-group';
+export { useDebounceCallback } from './use-debounce-callback/use-debounce-callback';
+export { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect/use-isomorphic-layout-effect';
+export { useMediaQuery } from './use-media-query/use-media-query';
+export { useMergeRefs } from './use-merge-refs/use-merge-refs';
+export type { UsePaginationProps } from './use-pagination/use-pagination';
+export { usePagination } from './use-pagination/use-pagination';
+export type { UseRadioGroupProps } from './use-radio-group/use-radio-group';
+export { useRadioGroup } from './use-radio-group/use-radio-group';
+export { useSynchronizedAnimation } from './use-synchronized-animation/use-synchronized-animation';
diff --git a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.mdx b/packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.mdx
similarity index 94%
rename from packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.mdx
rename to packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.mdx
index 78a48331..58f984c5 100644
--- a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.mdx
+++ b/packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.mdx
@@ -1,6 +1,6 @@
 import { Meta, Primary, Controls, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
-import * as useCheckboxGroupStories from './useCheckboxGroup.stories';
-import { useCheckboxGroup } from './useCheckboxGroup';
+import * as useCheckboxGroupStories from './use-checkbox-group.stories';
+import { useCheckboxGroup } from './use-checkbox-group';
 
 <Meta of={useCheckboxGroupStories} />
 
diff --git a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories.tsx b/packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.stories.tsx
similarity index 99%
rename from packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories.tsx
rename to packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.stories.tsx
index f1b0fb0e..05b9fecb 100644
--- a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories.tsx
+++ b/packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.stories.tsx
@@ -8,7 +8,7 @@ import {
 import {
   type UseCheckboxGroupProps,
   useCheckboxGroup,
-} from './useCheckboxGroup';
+} from './use-checkbox-group';
 
 const meta: Meta = {
   title: 'Utilities/useCheckboxGroup',
diff --git a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.ts b/packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.ts
similarity index 100%
rename from packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.ts
rename to packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.ts
diff --git a/packages/react/src/utilities/hooks/useDebounceCallback/useDebounceCallback.mdx b/packages/react/src/utilities/hooks/use-debounce-callback/use-debounce-callback.mdx
similarity index 91%
rename from packages/react/src/utilities/hooks/useDebounceCallback/useDebounceCallback.mdx
rename to packages/react/src/utilities/hooks/use-debounce-callback/use-debounce-callback.mdx
index 2b8ef293..e4b25638 100644
--- a/packages/react/src/utilities/hooks/useDebounceCallback/useDebounceCallback.mdx
+++ b/packages/react/src/utilities/hooks/use-debounce-callback/use-debounce-callback.mdx
@@ -1,6 +1,6 @@
 import { Meta, Primary, ArgTypes } from '@storybook/addon-docs/blocks';
 
-import * as SyncStories from './useDebounceCallback.stories';
+import * as SyncStories from './use-debounce-callback.stories';
 import { useDebounceCallback } from '../';
 
 <Meta of={SyncStories} />
diff --git a/packages/react/src/utilities/hooks/useDebounceCallback/useDebounceCallback.stories.tsx b/packages/react/src/utilities/hooks/use-debounce-callback/use-debounce-callback.stories.tsx
similarity index 91%
rename from packages/react/src/utilities/hooks/useDebounceCallback/useDebounceCallback.stories.tsx
rename to packages/react/src/utilities/hooks/use-debounce-callback/use-debounce-callback.stories.tsx
index 29037b62..699cc499 100644
--- a/packages/react/src/utilities/hooks/useDebounceCallback/useDebounceCallback.stories.tsx
+++ b/packages/react/src/utilities/hooks/use-debounce-callback/use-debounce-callback.stories.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 
 import { Paragraph, Textfield } from '../../../components';
 
-import { useDebounceCallback } from './useDebounceCallback';
+import { useDebounceCallback } from './use-debounce-callback';
 
 const meta: Meta = {
   title: 'Utilities/useDebounceCallback',
diff --git a/packages/react/src/utilities/hooks/useDebounceCallback/useDebounceCallback.ts b/packages/react/src/utilities/hooks/use-debounce-callback/use-debounce-callback.ts
similarity index 100%
rename from packages/react/src/utilities/hooks/useDebounceCallback/useDebounceCallback.ts
rename to packages/react/src/utilities/hooks/use-debounce-callback/use-debounce-callback.ts
diff --git a/packages/react/src/utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mdx b/packages/react/src/utilities/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.mdx
similarity index 100%
rename from packages/react/src/utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mdx
rename to packages/react/src/utilities/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.mdx
diff --git a/packages/react/src/utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts b/packages/react/src/utilities/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.ts
similarity index 100%
rename from packages/react/src/utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts
rename to packages/react/src/utilities/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.ts
diff --git a/packages/react/src/utilities/hooks/useMediaQuery/useMediaQuery.mdx b/packages/react/src/utilities/hooks/use-media-query/use-media-query.mdx
similarity index 90%
rename from packages/react/src/utilities/hooks/useMediaQuery/useMediaQuery.mdx
rename to packages/react/src/utilities/hooks/use-media-query/use-media-query.mdx
index 6e956d2b..508dfc7e 100644
--- a/packages/react/src/utilities/hooks/useMediaQuery/useMediaQuery.mdx
+++ b/packages/react/src/utilities/hooks/use-media-query/use-media-query.mdx
@@ -1,6 +1,6 @@
 import { Meta, Primary, ArgTypes } from '@storybook/addon-docs/blocks';
 
-import * as SyncStories from './useMediaQuery.stories';
+import * as SyncStories from './use-media-query.stories';
 import { useMediaQuery } from '../';
 
 <Meta of={SyncStories} />
diff --git a/packages/react/src/utilities/hooks/useMediaQuery/useMediaQuery.stories.tsx b/packages/react/src/utilities/hooks/use-media-query/use-media-query.stories.tsx
similarity index 90%
rename from packages/react/src/utilities/hooks/useMediaQuery/useMediaQuery.stories.tsx
rename to packages/react/src/utilities/hooks/use-media-query/use-media-query.stories.tsx
index df6a3265..41b120a0 100644
--- a/packages/react/src/utilities/hooks/useMediaQuery/useMediaQuery.stories.tsx
+++ b/packages/react/src/utilities/hooks/use-media-query/use-media-query.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta } from '@storybook/react-vite';
 
 import { Paragraph } from '../../../components';
 
-import { useMediaQuery } from './useMediaQuery';
+import { useMediaQuery } from './use-media-query';
 
 const meta: Meta = {
   title: 'Utilities/useMediaQuery',
diff --git a/packages/react/src/utilities/hooks/useMediaQuery/useMediaQuery.ts b/packages/react/src/utilities/hooks/use-media-query/use-media-query.ts
similarity index 93%
rename from packages/react/src/utilities/hooks/useMediaQuery/useMediaQuery.ts
rename to packages/react/src/utilities/hooks/use-media-query/use-media-query.ts
index 316105b4..9db430a7 100644
--- a/packages/react/src/utilities/hooks/useMediaQuery/useMediaQuery.ts
+++ b/packages/react/src/utilities/hooks/use-media-query/use-media-query.ts
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+import { useIsomorphicLayoutEffect } from '../use-isomorphic-layout-effect/use-isomorphic-layout-effect';
 
 type UseMediaQueryOptions = {
   defaultValue?: boolean;
diff --git a/packages/react/src/utilities/hooks/useMergeRefs/useMergeRefs.ts b/packages/react/src/utilities/hooks/use-merge-refs/use-merge-refs.ts
similarity index 100%
rename from packages/react/src/utilities/hooks/useMergeRefs/useMergeRefs.ts
rename to packages/react/src/utilities/hooks/use-merge-refs/use-merge-refs.ts
diff --git a/packages/react/src/utilities/hooks/usePagination/usePagination.mdx b/packages/react/src/utilities/hooks/use-pagination/use-pagination.mdx
similarity index 95%
rename from packages/react/src/utilities/hooks/usePagination/usePagination.mdx
rename to packages/react/src/utilities/hooks/use-pagination/use-pagination.mdx
index 5932c33f..d6bc2c7c 100644
--- a/packages/react/src/utilities/hooks/usePagination/usePagination.mdx
+++ b/packages/react/src/utilities/hooks/use-pagination/use-pagination.mdx
@@ -1,7 +1,7 @@
 import { Meta, Primary, ArgTypes, Controls } from '@storybook/addon-docs/blocks';
 
-import * as Stories from './usePagination.stories';
-import { usePagination } from '../';
+import * as Stories from './use-pagination.stories';
+import { usePagination } from '..';
 
 <Meta of={Stories} />
 
diff --git a/packages/react/src/utilities/hooks/usePagination/usePagination.stories.tsx b/packages/react/src/utilities/hooks/use-pagination/use-pagination.stories.tsx
similarity index 96%
rename from packages/react/src/utilities/hooks/usePagination/usePagination.stories.tsx
rename to packages/react/src/utilities/hooks/use-pagination/use-pagination.stories.tsx
index 944598ad..3397465a 100644
--- a/packages/react/src/utilities/hooks/usePagination/usePagination.stories.tsx
+++ b/packages/react/src/utilities/hooks/use-pagination/use-pagination.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { useArgs } from 'storybook/preview-api';
 import { Pagination } from '../../../components';
-import { type UsePaginationProps, usePagination } from './usePagination';
+import { type UsePaginationProps, usePagination } from './use-pagination';
 
 const meta: Meta = {
   title: 'Utilities/usePagination',
diff --git a/packages/react/src/utilities/hooks/usePagination/usePagination.ts b/packages/react/src/utilities/hooks/use-pagination/use-pagination.ts
similarity index 100%
rename from packages/react/src/utilities/hooks/usePagination/usePagination.ts
rename to packages/react/src/utilities/hooks/use-pagination/use-pagination.ts
diff --git a/packages/react/src/utilities/hooks/useRadioGroup/useRadioGroup.mdx b/packages/react/src/utilities/hooks/use-radio-group/use-radio-group.mdx
similarity index 96%
rename from packages/react/src/utilities/hooks/useRadioGroup/useRadioGroup.mdx
rename to packages/react/src/utilities/hooks/use-radio-group/use-radio-group.mdx
index 97567e98..f01d59ec 100644
--- a/packages/react/src/utilities/hooks/useRadioGroup/useRadioGroup.mdx
+++ b/packages/react/src/utilities/hooks/use-radio-group/use-radio-group.mdx
@@ -1,5 +1,5 @@
 import { Meta, ArgTypes, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
-import * as useRadioGroupStories from './useRadioGroup.stories';
+import * as useRadioGroupStories from './use-radio-group.stories';
 
 <Meta of={useRadioGroupStories} />
 
diff --git a/packages/react/src/utilities/hooks/useRadioGroup/useRadioGroup.stories.tsx b/packages/react/src/utilities/hooks/use-radio-group/use-radio-group.stories.tsx
similarity index 98%
rename from packages/react/src/utilities/hooks/useRadioGroup/useRadioGroup.stories.tsx
rename to packages/react/src/utilities/hooks/use-radio-group/use-radio-group.stories.tsx
index 0e35285b..b74c9fc8 100644
--- a/packages/react/src/utilities/hooks/useRadioGroup/useRadioGroup.stories.tsx
+++ b/packages/react/src/utilities/hooks/use-radio-group/use-radio-group.stories.tsx
@@ -9,7 +9,7 @@ import {
   Radio,
   ValidationMessage,
 } from '../../../components';
-import { type UseRadioGroupProps, useRadioGroup } from './useRadioGroup';
+import { type UseRadioGroupProps, useRadioGroup } from './use-radio-group';
 
 export const Preview: StoryFn<UseRadioGroupProps> = (args) => {
   const { getRadioProps } = useRadioGroup({
diff --git a/packages/react/src/utilities/hooks/useRadioGroup/useRadioGroup.ts b/packages/react/src/utilities/hooks/use-radio-group/use-radio-group.ts
similarity index 100%
rename from packages/react/src/utilities/hooks/useRadioGroup/useRadioGroup.ts
rename to packages/react/src/utilities/hooks/use-radio-group/use-radio-group.ts
diff --git a/packages/react/src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.mdx b/packages/react/src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.mdx
similarity index 90%
rename from packages/react/src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.mdx
rename to packages/react/src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.mdx
index 684cb29a..2450a6a6 100644
--- a/packages/react/src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.mdx
+++ b/packages/react/src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.mdx
@@ -1,6 +1,6 @@
 import { Meta, Primary, ArgTypes } from '@storybook/addon-docs/blocks';
 
-import * as SyncStories from './useSynchronizedAnimation.stories';
+import * as SyncStories from './use-synchronized-animation.stories';
 import { useSynchronizedAnimation } from '../';
 
 <Meta of={SyncStories} />
diff --git a/packages/react/src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.stories.tsx b/packages/react/src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.stories.tsx
similarity index 95%
rename from packages/react/src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.stories.tsx
rename to packages/react/src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.stories.tsx
index 3786d8c6..b72b165d 100644
--- a/packages/react/src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.stories.tsx
+++ b/packages/react/src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.stories.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 
 import { Button } from '../../../components';
 
-import { useSynchronizedAnimation } from './useSynchronizedAnimation';
+import { useSynchronizedAnimation } from './use-synchronized-animation';
 
 const meta: Meta = {
   title: 'Utilities/useSynchronizedAnimation',
diff --git a/packages/react/src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.ts b/packages/react/src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.ts
similarity index 93%
rename from packages/react/src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.ts
rename to packages/react/src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.ts
index 1b6e2e8f..cc899d6a 100644
--- a/packages/react/src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.ts
+++ b/packages/react/src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.ts
@@ -3,7 +3,7 @@
 
 import { useRef } from 'react';
 
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+import { useIsomorphicLayoutEffect } from '../use-isomorphic-layout-effect/use-isomorphic-layout-effect';
 
 /**
  * Synchronizes the css animation of multiple elements with the same `animationName`.
diff --git a/packages/react/src/utilities/index.ts b/packages/react/src/utilities/index.ts
index 8aa5ba31..a6ed9be9 100644
--- a/packages/react/src/utilities/index.ts
+++ b/packages/react/src/utilities/index.ts
@@ -13,5 +13,5 @@ export {
   useSynchronizedAnimation,
 } from './hooks';
 export * from './omit/omit';
-export * from './RovingFocus';
+export * from './roving-focus';
 export type * from './types';
diff --git a/packages/react/src/utilities/RovingFocus/index.ts b/packages/react/src/utilities/roving-focus/index.ts
similarity index 57%
rename from packages/react/src/utilities/RovingFocus/index.ts
rename to packages/react/src/utilities/roving-focus/index.ts
index da425948..c4776f6d 100644
--- a/packages/react/src/utilities/RovingFocus/index.ts
+++ b/packages/react/src/utilities/roving-focus/index.ts
@@ -4,6 +4,6 @@ export {
   getNextFocusableValue,
   getPrevFocusableValue,
   RovingFocusItem,
-} from './RovingFocusItem';
-export { RovingFocusRoot } from './RovingFocusRoot';
-export { useRovingFocus } from './useRovingFocus';
+} from './roving-focus-item';
+export { RovingFocusRoot } from './roving-focus-root';
+export { useRovingFocus } from './use-roving-focus';
diff --git a/packages/react/src/utilities/RovingFocus/RovingFocusItem.tsx b/packages/react/src/utilities/roving-focus/roving-focus-item.tsx
similarity index 96%
rename from packages/react/src/utilities/RovingFocus/RovingFocusItem.tsx
rename to packages/react/src/utilities/roving-focus/roving-focus-item.tsx
index 7f8f19d2..b5889d6d 100644
--- a/packages/react/src/utilities/RovingFocus/RovingFocusItem.tsx
+++ b/packages/react/src/utilities/roving-focus/roving-focus-item.tsx
@@ -6,8 +6,8 @@ import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import { useMergeRefs } from '../hooks';
 
-import type { RovingFocusElement } from './RovingFocusRoot';
-import { useRovingFocus } from './useRovingFocus';
+import type { RovingFocusElement } from './roving-focus-root';
+import { useRovingFocus } from './use-roving-focus';
 
 type RovingFocusItemProps = {
   /** The value of the `RovingFocusItem` used to determine which item should have focus. */
diff --git a/packages/react/src/utilities/RovingFocus/RovingFocusRoot.tsx b/packages/react/src/utilities/roving-focus/roving-focus-root.tsx
similarity index 100%
rename from packages/react/src/utilities/RovingFocus/RovingFocusRoot.tsx
rename to packages/react/src/utilities/roving-focus/roving-focus-root.tsx
diff --git a/packages/react/src/utilities/RovingFocus/RovingFocus.mdx b/packages/react/src/utilities/roving-focus/roving-focus.mdx
similarity index 100%
rename from packages/react/src/utilities/RovingFocus/RovingFocus.mdx
rename to packages/react/src/utilities/roving-focus/roving-focus.mdx
diff --git a/packages/react/src/utilities/RovingFocus/useRovingFocus.ts b/packages/react/src/utilities/roving-focus/use-roving-focus.ts
similarity index 95%
rename from packages/react/src/utilities/RovingFocus/useRovingFocus.ts
rename to packages/react/src/utilities/roving-focus/use-roving-focus.ts
index 9cb84245..c0566eda 100644
--- a/packages/react/src/utilities/RovingFocus/useRovingFocus.ts
+++ b/packages/react/src/utilities/roving-focus/use-roving-focus.ts
@@ -4,7 +4,7 @@
 import type { HTMLAttributes } from 'react';
 import { useContext } from 'react';
 
-import { RovingFocusContext } from './RovingFocusRoot';
+import { RovingFocusContext } from './roving-focus-root';
 
 /** Handles props for `RovingFocus` in context with `RovingFocusRoot` */
 export const useRovingFocus = (value: string) => {
diff --git a/packages/react/stories/Loaders.mdx b/packages/react/stories/loaders.mdx
similarity index 92%
rename from packages/react/stories/Loaders.mdx
rename to packages/react/stories/loaders.mdx
index ff728419..e49ed9a6 100644
--- a/packages/react/stories/Loaders.mdx
+++ b/packages/react/stories/loaders.mdx
@@ -2,8 +2,8 @@ import { Meta, Primary, Controls, Canvas } from '@storybook/addon-docs/blocks';
 import { CssVariables } from '@doc-components';
 import cssSpinner from '@digdir/designsystemet-css/spinner.css?inline';
 import cssSkeleton from '@digdir/designsystemet-css/skeleton.css?inline';
-import * as SkeletonStories from '../src/components/Skeleton/Skeleton.stories';
-import * as SpinnerStories from '../src/components/Spinner/Spinner.stories';
+import * as SkeletonStories from '../src/components/skeleton/skeleton.stories';
+import * as SpinnerStories from '../src/components/spinner/spinner.stories';
 
 <Meta title="Komponenter/Loaders" />
 
diff --git a/packages/react/stories/Typography.mdx b/packages/react/stories/typography.mdx
similarity index 88%
rename from packages/react/stories/Typography.mdx
rename to packages/react/stories/typography.mdx
index 8f74bd95..f6658f11 100644
--- a/packages/react/stories/Typography.mdx
+++ b/packages/react/stories/typography.mdx
@@ -1,10 +1,10 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 
-import * as typographyStories from './Typography.stories';
-import * as HeadingStories from '../src/components/Heading/Heading.stories';
-import * as ParagraphStories from '../src/components/Paragraph/Paragraph.stories';
-import * as LabelStories from '../src/components/Label/Label.stories';
-import * as ValidationMessageStories from '../src/components/ValidationMessage/ValidationMessage.stories';
+import * as typographyStories from './typography.stories';
+import * as HeadingStories from '../src/components/heading/heading.stories';
+import * as ParagraphStories from '../src/components/paragraph/paragraph.stories';
+import * as LabelStories from '../src/components/label/label.stories';
+import * as ValidationMessageStories from '../src/components/validation-message/validation-message.stories';
 
 <Meta of={typographyStories} />
 
diff --git a/packages/react/stories/Typography.stories.tsx b/packages/react/stories/typography.stories.tsx
similarity index 100%
rename from packages/react/stories/Typography.stories.tsx
rename to packages/react/stories/typography.stories.tsx
diff --git a/packages/react/stories/utils/createSingleStory.tsx b/packages/react/stories/utils/create-single-story.tsx
similarity index 100%
rename from packages/react/stories/utils/createSingleStory.tsx
rename to packages/react/stories/utils/create-single-story.tsx
diff --git a/packages/theme/src/themes/colors.d.ts b/packages/theme/src/themes/colors.d.ts
index eaf61083..b1003990 100644
--- a/packages/theme/src/themes/colors.d.ts
+++ b/packages/theme/src/themes/colors.d.ts
@@ -2,9 +2,9 @@ import type {} from '@digdir/designsystemet-react/colors';
 
 declare module '@digdir/designsystemet-react/colors' {
   export interface MainAndSupportColors {
-    'accent': never;
-    'brand1': never;
-    'brand2': never;
-    'brand3': never;
+    accent: never;
+    brand1: never;
+    brand2: never;
+    brand3: never;
   }
 }
diff --git a/packages/theme/src/themes/designsystemet.css b/packages/theme/src/themes/designsystemet.css
index 33562634..2f419eb0 100644
--- a/packages/theme/src/themes/designsystemet.css
+++ b/packages/theme/src/themes/designsystemet.css
@@ -156,7 +156,7 @@ design-tokens: v1.1.3
 
   color-scheme: light;
 }
-
+ 
 @media (prefers-color-scheme: light) {
   [data-color-scheme="auto"] {
   --ds-color-accent-background-default: #ffffff;
@@ -652,7 +652,7 @@ design-tokens: v1.1.3
 
   color-scheme: dark;
 }
-
+ 
 @media (prefers-color-scheme: dark) {
   [data-color-scheme="auto"] {
   --ds-color-accent-background-default: #0c1927;


Test patch:
diff --git a/packages/react/src/components/Combobox/useFormField/useFormField.test.tsx b/packages/react/src/components/Combobox/useFormField/useFormField.test.tsx
index 912bb7c4..e765077f 100644
--- a/packages/react/src/components/Combobox/useFormField/useFormField.test.tsx
+++ b/packages/react/src/components/Combobox/useFormField/useFormField.test.tsx
@@ -1,8 +1,8 @@
 import { renderHook } from '@testing-library/react';
 import type { ReactNode } from 'react';
 
-import type { FieldsetProps } from '../../../components/Fieldset';
-import { Fieldset } from '../../../components/Fieldset';
+import type { FieldsetProps } from '../../../components/fieldset';
+import { Fieldset } from '../../../components/fieldset';
 import type { FormField } from './useFormField';
 import { useFormField } from './useFormField';
 
diff --git a/packages/react/src/components/Alert/Alert.stories.tsx b/packages/react/src/components/alert/alert.stories.tsx
similarity index 100%
rename from packages/react/src/components/Alert/Alert.stories.tsx
rename to packages/react/src/components/alert/alert.stories.tsx
diff --git a/packages/react/src/components/Alert/Alert.test.tsx b/packages/react/src/components/alert/alert.test.tsx
similarity index 96%
rename from packages/react/src/components/Alert/Alert.test.tsx
rename to packages/react/src/components/alert/alert.test.tsx
index bb169934..4ed76c01 100644
--- a/packages/react/src/components/Alert/Alert.test.tsx
+++ b/packages/react/src/components/alert/alert.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 
 import { Heading } from '../';
 
-import { Alert } from './Alert';
+import { Alert } from './alert';
 
 describe('Alert', () => {
   /* TODO: Add visual tests for icons */
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/react/src/components/breadcrumbs/breadcrumbs.stories.tsx
similarity index 100%
rename from packages/react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
rename to packages/react/src/components/breadcrumbs/breadcrumbs.stories.tsx
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.test.tsx b/packages/react/src/components/breadcrumbs/breadcrumbs.test.tsx
similarity index 98%
rename from packages/react/src/components/Breadcrumbs/Breadcrumbs.test.tsx
rename to packages/react/src/components/breadcrumbs/breadcrumbs.test.tsx
index aac06665..c3896f89 100644
--- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.test.tsx
+++ b/packages/react/src/components/breadcrumbs/breadcrumbs.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { Breadcrumbs } from './';
-import type { BreadcrumbsProps } from './Breadcrumbs';
+import type { BreadcrumbsProps } from './breadcrumbs';
 
 const renderWithRoot = (props?: BreadcrumbsProps) =>
   render(
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/button/button.stories.tsx
similarity index 100%
rename from packages/react/src/components/Button/Button.stories.tsx
rename to packages/react/src/components/button/button.stories.tsx
diff --git a/packages/react/src/components/Button/Button.test.tsx b/packages/react/src/components/button/button.test.tsx
similarity index 95%
rename from packages/react/src/components/Button/Button.test.tsx
rename to packages/react/src/components/button/button.test.tsx
index efe4c692..cff1e564 100644
--- a/packages/react/src/components/Button/Button.test.tsx
+++ b/packages/react/src/components/button/button.test.tsx
@@ -2,8 +2,8 @@ import { render as renderRtl, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { act } from 'react';
 
-import type { ButtonProps } from './Button';
-import { Button } from './Button';
+import type { ButtonProps } from './button';
+import { Button } from './button';
 
 const user = userEvent.setup();
 
diff --git a/packages/react/src/components/Card/Card.stories.tsx b/packages/react/src/components/card/card.stories.tsx
similarity index 100%
rename from packages/react/src/components/Card/Card.stories.tsx
rename to packages/react/src/components/card/card.stories.tsx
diff --git a/packages/react/src/components/Card/Card.test.tsx b/packages/react/src/components/card/card.test.tsx
similarity index 86%
rename from packages/react/src/components/Card/Card.test.tsx
rename to packages/react/src/components/card/card.test.tsx
index 99c5a821..3b4990f5 100644
--- a/packages/react/src/components/Card/Card.test.tsx
+++ b/packages/react/src/components/card/card.test.tsx
@@ -1,8 +1,8 @@
 import { render as renderRtl, screen } from '@testing-library/react';
 
-import type { CardProps } from './Card';
-import { Card } from './Card';
-import { CardBlock } from './CardBlock';
+import type { CardProps } from './card';
+import { Card } from './card';
+import { CardBlock } from './card-block';
 
 const renderCard = (props?: Partial<CardProps>) =>
   renderRtl(
diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.tsx b/packages/react/src/components/checkbox/checkbox.stories.tsx
similarity index 100%
rename from packages/react/src/components/Checkbox/Checkbox.stories.tsx
rename to packages/react/src/components/checkbox/checkbox.stories.tsx
diff --git a/packages/react/src/components/Checkbox/Checkbox.test.tsx b/packages/react/src/components/checkbox/checkbox.test.tsx
similarity index 98%
rename from packages/react/src/components/Checkbox/Checkbox.test.tsx
rename to packages/react/src/components/checkbox/checkbox.test.tsx
index 74144cec..03e15da7 100644
--- a/packages/react/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react/src/components/checkbox/checkbox.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { act } from 'react';
 
-import { Checkbox } from './Checkbox';
+import { Checkbox } from './checkbox';
 
 describe('Checkbox', () => {
   test('has correct value and label', () => {
diff --git a/packages/react/src/components/Dropdown/Dropdown.test.tsx b/packages/react/src/components/dropdown/dropdown.test.tsx
similarity index 96%
rename from packages/react/src/components/Dropdown/Dropdown.test.tsx
rename to packages/react/src/components/dropdown/dropdown.test.tsx
index a8022615..82d0a18d 100644
--- a/packages/react/src/components/Dropdown/Dropdown.test.tsx
+++ b/packages/react/src/components/dropdown/dropdown.test.tsx
@@ -2,7 +2,7 @@ import { render as renderRtl, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { act } from 'react';
 import { Dropdown } from '.';
-import type { DropdownTriggerContextProps } from './DropdownTriggerContext';
+import type { DropdownTriggerContextProps } from './dropdown-trigger-context';
 
 const Comp = (args: Partial<DropdownTriggerContextProps>) => {
   return (
diff --git a/packages/react/src/components/Field/FieldDescription.tsx b/packages/react/src/components/field/field-description.tsx
similarity index 100%
rename from packages/react/src/components/Field/FieldDescription.tsx
rename to packages/react/src/components/field/field-description.tsx
diff --git a/packages/react/src/components/Field/fieldObserver.test.tsx b/packages/react/src/components/field/field-observer.test.tsx
similarity index 98%
rename from packages/react/src/components/Field/fieldObserver.test.tsx
rename to packages/react/src/components/field/field-observer.test.tsx
index b61edb6a..5faf2c7a 100644
--- a/packages/react/src/components/Field/fieldObserver.test.tsx
+++ b/packages/react/src/components/field/field-observer.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 
 import { Button, Input, Label, Select, Textarea } from '../..';
-import { fieldObserver } from './fieldObserver';
+import { fieldObserver } from './field-observer';
 
 describe('fieldObserver', () => {
   it('connects input and label', () => {
diff --git a/packages/react/src/components/Input/Input.stories.tsx b/packages/react/src/components/input/input.stories.tsx
similarity index 100%
rename from packages/react/src/components/Input/Input.stories.tsx
rename to packages/react/src/components/input/input.stories.tsx
diff --git a/packages/react/src/components/Input/Input.test.tsx b/packages/react/src/components/input/input.test.tsx
similarity index 90%
rename from packages/react/src/components/Input/Input.test.tsx
rename to packages/react/src/components/input/input.test.tsx
index ff6fc10e..b9757f28 100644
--- a/packages/react/src/components/Input/Input.test.tsx
+++ b/packages/react/src/components/input/input.test.tsx
@@ -1,7 +1,7 @@
 import { render as renderRtl, screen } from '@testing-library/react';
 
-import type { InputProps } from './Input';
-import { Input } from './Input';
+import type { InputProps } from './input';
+import { Input } from './input';
 
 describe('Input', () => {
   test('has correct value and label', () => {
diff --git a/packages/react/src/components/Link/Link.test.tsx b/packages/react/src/components/link/link.test.tsx
similarity index 94%
rename from packages/react/src/components/Link/Link.test.tsx
rename to packages/react/src/components/link/link.test.tsx
index c4dd8231..6197dfb3 100644
--- a/packages/react/src/components/Link/Link.test.tsx
+++ b/packages/react/src/components/link/link.test.tsx
@@ -1,8 +1,8 @@
 import { render as renderRtl, screen } from '@testing-library/react';
 import type { ComponentProps, RefObject } from 'react';
 import { createRef } from 'react';
-import type { LinkProps } from './Link';
-import { Link } from './Link';
+import type { LinkProps } from './link';
+import { Link } from './link';
 
 // Test data:
 const href = 'https://designsystemet.no/';
diff --git a/packages/react/src/components/List/List.test.tsx b/packages/react/src/components/list/list.test.tsx
similarity index 95%
rename from packages/react/src/components/List/List.test.tsx
rename to packages/react/src/components/list/list.test.tsx
index 0e942b1e..9bbae742 100644
--- a/packages/react/src/components/List/List.test.tsx
+++ b/packages/react/src/components/list/list.test.tsx
@@ -1,6 +1,6 @@
 import { render as renderRtl, screen } from '@testing-library/react';
 import { List } from '.';
-import type { ListUnorderedProps } from './Lists';
+import type { ListUnorderedProps } from './lists';
 
 const render = (props: Partial<ListUnorderedProps> = {}) => {
   const allProps: ListUnorderedProps = {
diff --git a/packages/react/src/components/Pagination/Pagination.stories.tsx b/packages/react/src/components/pagination/pagination.stories.tsx
similarity index 100%
rename from packages/react/src/components/Pagination/Pagination.stories.tsx
rename to packages/react/src/components/pagination/pagination.stories.tsx
diff --git a/packages/react/src/components/Pagination/Pagination.test.tsx b/packages/react/src/components/pagination/pagination.test.tsx
similarity index 98%
rename from packages/react/src/components/Pagination/Pagination.test.tsx
rename to packages/react/src/components/pagination/pagination.test.tsx
index 868e4ab9..1b4e2cc9 100644
--- a/packages/react/src/components/Pagination/Pagination.test.tsx
+++ b/packages/react/src/components/pagination/pagination.test.tsx
@@ -1,6 +1,6 @@
 import { render as renderRtl, screen } from '@testing-library/react';
 import { Pagination } from './';
-import type { PaginationProps } from './Pagination';
+import type { PaginationProps } from './pagination';
 
 const renderWithRoot = (props: PaginationProps) => {
   renderRtl(
diff --git a/packages/react/src/components/Popover/Popover.stories.tsx b/packages/react/src/components/popover/popover.stories.tsx
similarity index 100%
rename from packages/react/src/components/Popover/Popover.stories.tsx
rename to packages/react/src/components/popover/popover.stories.tsx
diff --git a/packages/react/src/components/Popover/Popover.test.tsx b/packages/react/src/components/popover/popover.test.tsx
similarity index 99%
rename from packages/react/src/components/Popover/Popover.test.tsx
rename to packages/react/src/components/popover/popover.test.tsx
index adbcff86..df05e262 100644
--- a/packages/react/src/components/Popover/Popover.test.tsx
+++ b/packages/react/src/components/popover/popover.test.tsx
@@ -3,7 +3,7 @@ import { render as renderRtl, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { act, useState } from 'react';
 
-import { Button } from '../Button';
+import { Button } from '../button';
 import type { PopoverProps } from './';
 import { Popover } from './';
 
diff --git a/packages/react/src/components/Radio/Radio.stories.tsx b/packages/react/src/components/radio/radio.stories.tsx
similarity index 100%
rename from packages/react/src/components/Radio/Radio.stories.tsx
rename to packages/react/src/components/radio/radio.stories.tsx
diff --git a/packages/react/src/components/Radio/Radio.test.tsx b/packages/react/src/components/radio/radio.test.tsx
similarity index 98%
rename from packages/react/src/components/Radio/Radio.test.tsx
rename to packages/react/src/components/radio/radio.test.tsx
index 87d0a129..ecd1e3da 100644
--- a/packages/react/src/components/Radio/Radio.test.tsx
+++ b/packages/react/src/components/radio/radio.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { act } from 'react';
 
-import { Radio } from './Radio';
+import { Radio } from './radio';
 
 describe('Radio', () => {
   test('has correct value and label', () => {
diff --git a/packages/react/src/components/SkipLink/SkipLink.stories.tsx b/packages/react/src/components/skip-link/skip-link.stories.tsx
similarity index 100%
rename from packages/react/src/components/SkipLink/SkipLink.stories.tsx
rename to packages/react/src/components/skip-link/skip-link.stories.tsx
diff --git a/packages/react/src/components/SkipLink/SkipLink.test.tsx b/packages/react/src/components/skip-link/skip-link.test.tsx
similarity index 91%
rename from packages/react/src/components/SkipLink/SkipLink.test.tsx
rename to packages/react/src/components/skip-link/skip-link.test.tsx
index 21e841ec..8efcd96d 100644
--- a/packages/react/src/components/SkipLink/SkipLink.test.tsx
+++ b/packages/react/src/components/skip-link/skip-link.test.tsx
@@ -1,6 +1,6 @@
 import { render as renderRtl, screen } from '@testing-library/react';
-import type { SkipLinkProps } from './SkipLink';
-import { SkipLink } from './SkipLink';
+import type { SkipLinkProps } from './skip-link';
+import { SkipLink } from './skip-link';
 
 const href = '#main-content';
 const children = 'Hopp til hovedinnhold';
diff --git a/packages/react/src/components/Spinner/Spinner.stories.tsx b/packages/react/src/components/spinner/spinner.stories.tsx
similarity index 100%
rename from packages/react/src/components/Spinner/Spinner.stories.tsx
rename to packages/react/src/components/spinner/spinner.stories.tsx
diff --git a/packages/react/src/components/Spinner/Spinner.test.tsx b/packages/react/src/components/spinner/spinner.test.tsx
similarity index 89%
rename from packages/react/src/components/Spinner/Spinner.test.tsx
rename to packages/react/src/components/spinner/spinner.test.tsx
index fca52086..c1f0eafd 100644
--- a/packages/react/src/components/Spinner/Spinner.test.tsx
+++ b/packages/react/src/components/spinner/spinner.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 
-import { Spinner } from './Spinner';
+import { Spinner } from './spinner';
 
 beforeAll(() => {
   document.getAnimations = () => [];
diff --git a/packages/react/src/components/Switch/Switch.test.tsx b/packages/react/src/components/switch/switch.test.tsx
similarity index 98%
rename from packages/react/src/components/Switch/Switch.test.tsx
rename to packages/react/src/components/switch/switch.test.tsx
index a19dd970..28bb22b6 100644
--- a/packages/react/src/components/Switch/Switch.test.tsx
+++ b/packages/react/src/components/switch/switch.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { act } from 'react';
 
-import { Switch } from './Switch';
+import { Switch } from './switch';
 
 describe('Switch', () => {
   test('has correct value and label', () => {
diff --git a/packages/react/src/components/Table/TableBody.tsx b/packages/react/src/components/table/table-body.tsx
similarity index 100%
rename from packages/react/src/components/Table/TableBody.tsx
rename to packages/react/src/components/table/table-body.tsx
diff --git a/packages/react/src/components/Table/TableCell.tsx b/packages/react/src/components/table/table-cell.tsx
similarity index 100%
rename from packages/react/src/components/Table/TableCell.tsx
rename to packages/react/src/components/table/table-cell.tsx
diff --git a/packages/react/src/components/Table/TableFoot.tsx b/packages/react/src/components/table/table-foot.tsx
similarity index 100%
rename from packages/react/src/components/Table/TableFoot.tsx
rename to packages/react/src/components/table/table-foot.tsx
diff --git a/packages/react/src/components/Table/TableHead.tsx b/packages/react/src/components/table/table-head.tsx
similarity index 100%
rename from packages/react/src/components/Table/TableHead.tsx
rename to packages/react/src/components/table/table-head.tsx
diff --git a/packages/react/src/components/Table/TableHeaderCell.test.tsx b/packages/react/src/components/table/table-header-cell.test.tsx
similarity index 93%
rename from packages/react/src/components/Table/TableHeaderCell.test.tsx
rename to packages/react/src/components/table/table-header-cell.test.tsx
index 075931d9..fcec076f 100644
--- a/packages/react/src/components/Table/TableHeaderCell.test.tsx
+++ b/packages/react/src/components/table/table-header-cell.test.tsx
@@ -1,6 +1,6 @@
 import { render as renderRtl, screen } from '@testing-library/react';
 import { TableHeaderCell } from '.';
-import type { TableHeaderCellProps } from './TableHeaderCell';
+import type { TableHeaderCellProps } from './table-header-cell';
 
 const Comp = (args: Partial<TableHeaderCellProps>) => {
   return <TableHeaderCell {...args}>Header 1</TableHeaderCell>;
diff --git a/packages/react/src/components/Table/Table.stories.tsx b/packages/react/src/components/table/table.stories.tsx
similarity index 100%
rename from packages/react/src/components/Table/Table.stories.tsx
rename to packages/react/src/components/table/table.stories.tsx
diff --git a/packages/react/src/components/Table/Table.test.tsx b/packages/react/src/components/table/table.test.tsx
similarity index 94%
rename from packages/react/src/components/Table/Table.test.tsx
rename to packages/react/src/components/table/table.test.tsx
index b748fa86..4d79a88a 100644
--- a/packages/react/src/components/Table/Table.test.tsx
+++ b/packages/react/src/components/table/table.test.tsx
@@ -7,8 +7,8 @@ import {
   TableHeaderCell,
   TableRow,
 } from '.';
-import type { TableProps } from './Table';
-import { Table } from './Table';
+import type { TableProps } from './table';
+import { Table } from './table';
 
 const children = (
   <>
diff --git a/packages/react/src/components/Tag/Tag.stories.tsx b/packages/react/src/components/tag/tag.stories.tsx
similarity index 100%
rename from packages/react/src/components/Tag/Tag.stories.tsx
rename to packages/react/src/components/tag/tag.stories.tsx
diff --git a/packages/react/src/components/Tag/Tag.test.tsx b/packages/react/src/components/tag/tag.test.tsx
similarity index 93%
rename from packages/react/src/components/Tag/Tag.test.tsx
rename to packages/react/src/components/tag/tag.test.tsx
index 9aea8ddf..f6acebaf 100644
--- a/packages/react/src/components/Tag/Tag.test.tsx
+++ b/packages/react/src/components/tag/tag.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 
-import { Tag } from './Tag';
+import { Tag } from './tag';
 
 describe('Tag', () => {
   test('should render tag with Beta as value', (): void => {
diff --git a/packages/react/src/components/Textarea/Textarea.stories.tsx b/packages/react/src/components/textarea/textarea.stories.tsx
similarity index 100%
rename from packages/react/src/components/Textarea/Textarea.stories.tsx
rename to packages/react/src/components/textarea/textarea.stories.tsx
diff --git a/packages/react/src/components/Textarea/Textarea.test.tsx b/packages/react/src/components/textarea/textarea.test.tsx
similarity index 98%
rename from packages/react/src/components/Textarea/Textarea.test.tsx
rename to packages/react/src/components/textarea/textarea.test.tsx
index dfff34a3..08be8722 100644
--- a/packages/react/src/components/Textarea/Textarea.test.tsx
+++ b/packages/react/src/components/textarea/textarea.test.tsx
@@ -2,8 +2,8 @@ import { render as renderRtl, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { act } from 'react';
 
-import type { TextareaProps } from './Textarea';
-import { Textarea } from './Textarea';
+import type { TextareaProps } from './textarea';
+import { Textarea } from './textarea';
 
 const user = userEvent.setup();
 
diff --git a/packages/react/src/components/Textfield/Textfield.stories.tsx b/packages/react/src/components/textfield/textfield.stories.tsx
similarity index 100%
rename from packages/react/src/components/Textfield/Textfield.stories.tsx
rename to packages/react/src/components/textfield/textfield.stories.tsx
diff --git a/packages/react/src/components/Textfield/Textfield.test.tsx b/packages/react/src/components/textfield/textfield.test.tsx
similarity index 97%
rename from packages/react/src/components/Textfield/Textfield.test.tsx
rename to packages/react/src/components/textfield/textfield.test.tsx
index f01801a6..56d22235 100644
--- a/packages/react/src/components/Textfield/Textfield.test.tsx
+++ b/packages/react/src/components/textfield/textfield.test.tsx
@@ -2,8 +2,8 @@ import { render as renderRtl, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { act } from 'react';
 
-import type { TextfieldProps } from './Textfield';
-import { Textfield } from './Textfield';
+import type { TextfieldProps } from './textfield';
+import { Textfield } from './textfield';
 
 const user = userEvent.setup();
 
diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.tsx b/packages/react/src/components/tooltip/tooltip.stories.tsx
similarity index 100%
rename from packages/react/src/components/Tooltip/Tooltip.stories.tsx
rename to packages/react/src/components/tooltip/tooltip.stories.tsx
diff --git a/packages/react/src/components/Tooltip/Tooltip.test.tsx b/packages/react/src/components/tooltip/tooltip.test.tsx
similarity index 96%
rename from packages/react/src/components/Tooltip/Tooltip.test.tsx
rename to packages/react/src/components/tooltip/tooltip.test.tsx
index dbda5a5c..97344f93 100644
--- a/packages/react/src/components/Tooltip/Tooltip.test.tsx
+++ b/packages/react/src/components/tooltip/tooltip.test.tsx
@@ -2,8 +2,8 @@ import { render as renderRtl, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { act } from 'react';
 
-import type { TooltipProps } from './Tooltip';
-import { Tooltip } from './Tooltip';
+import type { TooltipProps } from './tooltip';
+import { Tooltip } from './tooltip';
 
 const render = async (props: Partial<TooltipProps> = {}) => {
   const allProps: TooltipProps = {
diff --git a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.test.tsx b/packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.test.tsx
similarity index 98%
rename from packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.test.tsx
rename to packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.test.tsx
index 9953ee6b..2d5ff13b 100644
--- a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.test.tsx
+++ b/packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.test.tsx
@@ -11,8 +11,8 @@ import {
 import type {
   GetCheckboxProps,
   UseCheckboxGroupProps,
-} from './useCheckboxGroup';
-import { useCheckboxGroup } from './useCheckboxGroup';
+} from './use-checkbox-group';
+import { useCheckboxGroup } from './use-checkbox-group';
 
 const CheckboxGroup = (args: UseCheckboxGroupProps) => {
   const { getCheckboxProps, validationMessageProps } = useCheckboxGroup(args);
diff --git a/packages/react/src/utilities/hooks/useMediaQuery/useMediaQuery.test.ts b/packages/react/src/utilities/hooks/use-media-query/use-media-query.test.ts
similarity index 97%
rename from packages/react/src/utilities/hooks/useMediaQuery/useMediaQuery.test.ts
rename to packages/react/src/utilities/hooks/use-media-query/use-media-query.test.ts
index 144eb5bc..b304182b 100644
--- a/packages/react/src/utilities/hooks/useMediaQuery/useMediaQuery.test.ts
+++ b/packages/react/src/utilities/hooks/use-media-query/use-media-query.test.ts
@@ -2,7 +2,7 @@ import { renderHook } from '@testing-library/react';
 import type { VitestUtils } from 'vitest';
 import { vi } from 'vitest';
 
-import { useMediaQuery } from './useMediaQuery';
+import { useMediaQuery } from './use-media-query';
 
 // Test data:
 const query = '(min-width: 600px)';
diff --git a/packages/react/src/utilities/hooks/useMergeRefs/useMergeRefs.test.ts b/packages/react/src/utilities/hooks/use-merge-refs/use-merge-refs.test.ts
similarity index 97%
rename from packages/react/src/utilities/hooks/useMergeRefs/useMergeRefs.test.ts
rename to packages/react/src/utilities/hooks/use-merge-refs/use-merge-refs.test.ts
index 9bebc108..df47e107 100644
--- a/packages/react/src/utilities/hooks/useMergeRefs/useMergeRefs.test.ts
+++ b/packages/react/src/utilities/hooks/use-merge-refs/use-merge-refs.test.ts
@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react';
 import * as React from 'react';
-import { useMergeRefs } from './useMergeRefs';
+import { useMergeRefs } from './use-merge-refs';
 
 describe('useMergeRefs', () => {
   it('should return null if all refs are null or undefined', () => {
diff --git a/packages/react/src/utilities/hooks/usePagination/usePagination.test.tsx b/packages/react/src/utilities/hooks/use-pagination/use-pagination.test.tsx
similarity index 98%
rename from packages/react/src/utilities/hooks/usePagination/usePagination.test.tsx
rename to packages/react/src/utilities/hooks/use-pagination/use-pagination.test.tsx
index 7caa42a0..0c868f54 100644
--- a/packages/react/src/utilities/hooks/usePagination/usePagination.test.tsx
+++ b/packages/react/src/utilities/hooks/use-pagination/use-pagination.test.tsx
@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react';
 import type { MouseEvent } from 'react';
-import { usePagination } from './usePagination';
+import { usePagination } from './use-pagination';
 
 describe('usePagination', () => {
   it('should provide correct amount of pages with 10 pages when current page is 6', () => {
diff --git a/packages/react/src/utilities/hooks/useRadioGroup/useRadioGroup.test.tsx b/packages/react/src/utilities/hooks/use-radio-group/use-radio-group.test.tsx
similarity index 99%
rename from packages/react/src/utilities/hooks/useRadioGroup/useRadioGroup.test.tsx
rename to packages/react/src/utilities/hooks/use-radio-group/use-radio-group.test.tsx
index 7810ab96..45b20fb4 100644
--- a/packages/react/src/utilities/hooks/useRadioGroup/useRadioGroup.test.tsx
+++ b/packages/react/src/utilities/hooks/use-radio-group/use-radio-group.test.tsx
@@ -12,7 +12,7 @@ import {
   type GetRadioProps,
   type UseRadioGroupProps,
   useRadioGroup,
-} from './useRadioGroup';
+} from './use-radio-group';
 
 const RadioGroup = (args: UseRadioGroupProps) => {
   const { getRadioProps, validationMessageProps } = useRadioGroup(args);
diff --git a/packages/react/src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.test.ts b/packages/react/src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.test.ts
similarity index 94%
rename from packages/react/src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.test.ts
rename to packages/react/src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.test.ts
index d0416bbd..01b2e02f 100644
--- a/packages/react/src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.test.ts
+++ b/packages/react/src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.test.ts
@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react';
 
-import { useSynchronizedAnimation } from './useSynchronizedAnimation';
+import { useSynchronizedAnimation } from './use-synchronized-animation';
 
 // Mock Animation objects
 const firstAnimation = {
diff --git a/packages/react/src/utilities/RovingFocus/RovingFocusRoot.test.tsx b/packages/react/src/utilities/roving-focus/roving-focus-root.test.tsx
similarity index 95%
rename from packages/react/src/utilities/RovingFocus/RovingFocusRoot.test.tsx
rename to packages/react/src/utilities/roving-focus/roving-focus-root.test.tsx
index cc36d25d..0bdba8b0 100644
--- a/packages/react/src/utilities/RovingFocus/RovingFocusRoot.test.tsx
+++ b/packages/react/src/utilities/roving-focus/roving-focus-root.test.tsx
@@ -2,8 +2,8 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { act } from 'react';
 
-import { RovingFocusItem } from './RovingFocusItem';
-import { RovingFocusRoot } from './RovingFocusRoot';
+import { RovingFocusItem } from './roving-focus-item';
+import { RovingFocusRoot } from './roving-focus-root';
 
 const user = userEvent.setup();