diff --git a/components/radio-button/css/stories/default.stories.mdx b/components/radio-button/css/stories/default.stories.mdx
deleted file mode 100644
index ccea328a8c9..00000000000
--- a/components/radio-button/css/stories/default.stories.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/blocks";
-import { argTypes, defaultArgs, RadioButton } from "../story-template";
-import "../index.scss";
-
-<Meta
-  id="css-radio-button"
-  title="CSS Component/ Radio Button"
-  component={RadioButton}
-  argTypes={argTypes}
-  args={defaultArgs}
-  parameters={{
-    status: {
-      type: "WORK IN PROGRESS",
-    },
-  }}
-/>
-
-# Radio Button Component
-
-<Canvas>
-  <Story name="Default">{RadioButton.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />
diff --git a/components/radio-button/css/stories/readme.stories.mdx b/components/radio-button/css/stories/readme.stories.mdx
deleted file mode 100644
index 203787a351a..00000000000
--- a/components/radio-button/css/stories/readme.stories.mdx
+++ /dev/null
@@ -1,8 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { Markdown, Meta } from "@storybook/blocks";
-import document from "../../README.md";
-
-<Meta id="css-radio-button--readme" title="CSS Component/ Radio Button/README" />
-
-<Markdown>{document}</Markdown>
diff --git a/components/radio-button/css/stories/states.stories.mdx b/components/radio-button/css/stories/states.stories.mdx
deleted file mode 100644
index 706d27d33b7..00000000000
--- a/components/radio-button/css/stories/states.stories.mdx
+++ /dev/null
@@ -1,326 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { Canvas, Meta, Story } from "@storybook/blocks";
-import { RadioButton } from "../story-template";
-import "../index.scss";
-
-<Meta
-  id="css-radio-button--state"
-  title="CSS Component/ Radio Button/States"
-  component={RadioButton}
-  parameters={{
-    status: {
-      type: "WORK IN PROGRESS",
-    },
-  }}
-/>
-
-# radio button component states
-
-## Hover
-
-<Canvas>
-  <Story
-    name="hover"
-    args={{
-      hover: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Focus
-
-<Canvas>
-  <Story
-    name="focus"
-    args={{
-      focus: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Focus-visible
-
-<Canvas>
-  <Story
-    name="focus-visible"
-    args={{
-      focus: true,
-      focusVisible: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Active
-
-When the component is `active`, it always has `focus` too. Test these states together for accurate results.
-
-<Canvas>
-  <Story
-    name="active"
-    args={{
-      active: true,
-      focus: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Disabled
-
-<Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      disabled: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Disabled + focus
-
-<Canvas>
-  <Story
-    name="Disabled + focus"
-    args={{
-      disabled: true,
-      focus: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Disabled + focus-visible
-
-<Canvas>
-  <Story
-    name="Disabled + focus-visible"
-    args={{
-      disabled: true,
-      focus: true,
-      focusVisible: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Disabled + hover
-
-<Canvas>
-  <Story
-    name="Disabled + hover"
-    args={{
-      disabled: true,
-      hover: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Disabled + active
-
-<Canvas>
-  <Story
-    name="Disabled + active"
-    args={{
-      disabled: true,
-      active: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Checked
-
-<Canvas>
-  <Story
-    name="Checked"
-    args={{
-      checked: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Checked + focus
-
-<Canvas>
-  <Story
-    name="Checked and focus"
-    args={{
-      checked: true,
-      focus: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Checked + focus-visible
-
-<Canvas>
-  <Story
-    name="Checked and focus-visible"
-    args={{
-      checked: true,
-      focus: true,
-      focusVisible: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Checked + hover
-
-<Canvas>
-  <Story
-    name="Checked and hover"
-    args={{
-      checked: true,
-      hover: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Checked + active
-
-<Canvas>
-  <Story
-    name="Checked and active"
-    args={{
-      checked: true,
-      active: true,
-      focus: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Checked + disabled
-
-<Canvas>
-  <Story
-    name="Checked and Disabled"
-    args={{
-      checked: true,
-      disabled: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Checked + disabled + hover
-
-Should be identical to "Checked + disabled"
-
-<Canvas>
-  <Story
-    name="Checked and Disabled and hover"
-    args={{
-      checked: true,
-      disabled: true,
-      hover: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Checked + disabled + focus
-
-Should be identical to "Checked + disabled".
-
-<Canvas>
-  <Story
-    name="Checked and Disabled and focus"
-    args={{
-      checked: true,
-      disabled: true,
-      focus: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Checked + disabled + focus-visible
-
-Must have a focus ring.
-
-<Canvas>
-  <Story
-    name="Checked and Disabled and focus-visible"
-    args={{
-      checked: true,
-      disabled: true,
-      focus: true,
-      focusVisible: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Checked + disabled + active
-
-Should be identical to "Checked + disabled".
-
-<Canvas>
-  <Story
-    name="Checked and Disabled and active"
-    args={{
-      active: true,
-      checked: true,
-      disabled: true,
-      focus: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Invalid
-
-<Canvas>
-  <Story
-    name="invalid"
-    args={{
-      invalid: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
-
-## Checked + Invalid
-
-<Canvas>
-  <Story
-    name="Checked + invalid"
-    args={{
-      checked: true,
-      invalid: true,
-    }}
-  >
-    {RadioButton.bind({})}
-  </Story>
-</Canvas>
diff --git a/components/radio-button/css/stories/tokens.stories.mdx b/components/radio-button/css/stories/tokens.stories.mdx
deleted file mode 100644
index 47aba1ac907..00000000000
--- a/components/radio-button/css/stories/tokens.stories.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { Meta } from "@storybook/blocks";
-import { ComponentTokensSection } from "../../../../documentation/components/ComponentTokensSection";
-import tokens from "../../../../proprietary/design-tokens/dist/index.json";
-import tokensDefinition from "../../tokens.json";
-
-<Meta id="css-radio-button--tokens" title="CSS Component/ Radio Button/Design Tokens" />
-
-# RadioButton Design Tokens
-
-<ComponentTokensSection
-  tokens={tokens}
-  definition={tokensDefinition}
-  component="utrecht-radio-button"
-></ComponentTokensSection>
diff --git a/packages/storybook/stories/components/RadioButton.stories.tsx b/packages/storybook/stories/components/RadioButton.stories.tsx
new file mode 100644
index 00000000000..164fc96f4ee
--- /dev/null
+++ b/packages/storybook/stories/components/RadioButton.stories.tsx
@@ -0,0 +1,310 @@
+/* @license CC0-1.0 */
+
+import { Meta, StoryObj } from '@storybook/react';
+import { RadioButton } from '@utrecht/component-library-react/dist/css-module';
+import { RadioButtonProps } from '@utrecht/component-library-react/dist/css-module/RadioButton';
+import readme from '@utrecht/components/radio-button/README.md?raw';
+import tokensDefinition from '@utrecht/components/radio-button/tokens.json';
+import tokens from '@utrecht/design-tokens/dist/index.json';
+import clsx from 'clsx';
+import React from 'react';
+import { designTokenStory } from './util';
+
+interface RadioButtonStoryProps extends RadioButtonProps {
+  focus?: boolean;
+  focusVisible?: boolean;
+  hover?: boolean;
+  active?: boolean;
+}
+
+const RadioButtonStory = ({ active, focus, focusVisible, hover, ...args }: RadioButtonStoryProps) => {
+  const classNames = {
+    'utrecht-radio-button--active': active,
+    'utrecht-radio-button--focus': focus,
+    'utrecht-radio-button--focus-visible': focusVisible,
+    'utrecht-radio-button--hover': hover,
+  };
+
+  return <RadioButton className={clsx(classNames)} {...args} />;
+};
+
+const meta = {
+  title: 'CSS Component/Radio Button',
+  id: 'css-radio-button',
+  component: RadioButtonStory,
+  args: {
+    checked: false,
+    disabled: false,
+    active: false,
+    hover: false,
+    focus: false,
+    focusVisible: false,
+    invalid: false,
+    name: '',
+    id: '',
+  },
+  argTypes: {
+    checked: {
+      description: 'Checked',
+      control: 'boolean',
+    },
+    disabled: {
+      description: 'Disabled',
+      control: 'boolean',
+    },
+    active: {
+      description: 'Active',
+      control: 'boolean',
+    },
+    hover: {
+      description: 'Hover',
+      control: 'boolean',
+    },
+    focus: {
+      description: 'Focus',
+      control: 'boolean',
+    },
+    focusVisible: {
+      description: 'Focus-visible',
+      control: 'boolean',
+    },
+    invalid: {
+      description: 'Invalid',
+      control: 'boolean',
+    },
+  },
+  parameters: {
+    tokensPrefix: 'utrecht-radio-button',
+    status: {
+      type: 'WORK IN PROGRESS',
+    },
+    tokens,
+    tokensDefinition,
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof RadioButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Hover: Story = {
+  name: 'Hover State',
+  args: {
+    ...Default.args,
+    hover: true,
+  },
+};
+
+export const Focus: Story = {
+  name: 'Focus State',
+  args: {
+    ...Default.args,
+    focus: true,
+  },
+};
+
+export const FocusVisible: Story = {
+  name: 'Focus Visible State',
+  args: {
+    ...Default.args,
+    focus: true,
+    focusVisible: true,
+  },
+};
+
+export const Active: Story = {
+  name: 'Active State',
+  args: {
+    ...Default.args,
+    active: true,
+    focus: true,
+  },
+  parameters: {
+    ...Default.parameters,
+    docs: {
+      description: {
+        story: `When the component is \`active\`, it always has \`focus\` too. Test these states together for accurate results.`,
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  name: 'Disabled State',
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};
+
+export const DisabledAndFocussed: Story = {
+  name: 'Disabled and Focus State',
+  args: {
+    ...Default.args,
+    disabled: true,
+    focus: true,
+  },
+};
+
+export const DisabledAndFocusVisible: Story = {
+  name: 'Disabled and Focus-Visible State',
+  args: {
+    ...Default.args,
+    disabled: true,
+    focus: true,
+    focusVisible: true,
+  },
+};
+
+export const DisabledAndHover: Story = {
+  name: 'Disabled and Hover State',
+  args: {
+    ...Default.args,
+    disabled: true,
+    hover: true,
+  },
+};
+
+export const DisabledAndActive: Story = {
+  name: 'Disabled and Active State',
+  args: {
+    ...Default.args,
+    disabled: true,
+    active: true,
+  },
+};
+
+export const Checked: Story = {
+  name: 'Checked State',
+  args: {
+    ...Default.args,
+    checked: true,
+  },
+};
+
+export const CheckedAndFocus: Story = {
+  name: 'Checked and Focus State',
+  args: {
+    ...Default.args,
+    checked: true,
+    focus: true,
+  },
+};
+
+export const CheckedAndFocusVisible: Story = {
+  name: 'Checked and Focus-Visible State',
+  args: {
+    ...Default.args,
+    checked: true,
+    focus: true,
+    focusVisible: true,
+  },
+};
+
+export const CheckedAndHover: Story = {
+  name: 'Checked and Hover State',
+  args: {
+    ...Default.args,
+    checked: true,
+    hover: true,
+  },
+};
+
+export const CheckedAndActive: Story = {
+  name: 'Checked and Active State',
+  args: {
+    ...Default.args,
+    checked: true,
+    active: true,
+  },
+};
+
+export const CheckedAndDisabled: Story = {
+  name: 'Checked and Disabled State',
+  args: {
+    ...Default.args,
+    checked: true,
+    disabled: true,
+  },
+};
+
+export const CheckedDisabledAndHover: Story = {
+  name: 'Checked, Disabled and Hover State',
+  args: {
+    ...Default.args,
+    checked: true,
+    disabled: true,
+    hover: true,
+  },
+  parameters: {
+    ...Default.parameters,
+    docs: {
+      description: {
+        story: `Should be identical to "Checked + disabled"`,
+      },
+    },
+  },
+};
+
+export const CheckedDisabledAndFocus: Story = {
+  name: 'Checked, Disabled and Focus State',
+  args: {
+    ...Default.args,
+    checked: true,
+    disabled: true,
+    focus: true,
+  },
+  parameters: {
+    ...Default.parameters,
+    docs: {
+      description: {
+        story: `Should be identical to "Checked + disabled"`,
+      },
+    },
+  },
+};
+
+export const CheckedDisabledAndActive: Story = {
+  name: 'Checked, Disabled and Active State',
+  args: {
+    ...Default.args,
+    checked: true,
+    disabled: true,
+    active: true,
+    focus: true,
+  },
+  parameters: {
+    ...Default.parameters,
+    docs: {
+      description: {
+        story: `Should be identical to "Checked + disabled"`,
+      },
+    },
+  },
+};
+
+export const Invalid: Story = {
+  name: 'Invalid State',
+  args: {
+    ...Default.args,
+    invalid: true,
+  },
+};
+
+export const CheckedAndInvalid: Story = {
+  name: 'Checked and Invalid State',
+  args: {
+    ...Default.args,
+    checked: true,
+    invalid: true,
+  },
+};
+
+export const DesignTokens = designTokenStory(meta);