diff --git a/.changeset/stale-hotels-jump.md b/.changeset/stale-hotels-jump.md
new file mode 100644
index 0000000..30c3372
--- /dev/null
+++ b/.changeset/stale-hotels-jump.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+migrate ArgsTable to ArgTypes and rework imports
diff --git a/packages/react/src/components/Button/index.mdx b/packages/react/src/components/Button/index.mdx
index b96f4d8..e0fb15e 100644
--- a/packages/react/src/components/Button/index.mdx
+++ b/packages/react/src/components/Button/index.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
 import { Button } from "./index";
 import * as Stories from './index.stories';
 
@@ -56,7 +56,7 @@ The button can be disabled. The disabled button will render the same no matter w
 
 You can use all the props of the native html `<button>` element props plus the following.
 
-<ArgsTable of={Button} />
+<ArgTypes of={Button} />
 
 
 
diff --git a/packages/react/src/components/DataGrid/index.mdx b/packages/react/src/components/DataGrid/index.mdx
index 8601a51..247c441 100644
--- a/packages/react/src/components/DataGrid/index.mdx
+++ b/packages/react/src/components/DataGrid/index.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
 import { DataGrid } from './index';
 import { SimpleDataGrid } from './SimpleDataGrid';
 import { DataList } from './DataList';
@@ -45,7 +45,7 @@ Here a quick usage example
 
 ### Props
 
-<ArgsTable of={DataList} />
+<ArgTypes of={DataList} />
 
 ## SimpleDataGrid
 
@@ -82,7 +82,7 @@ their states.
 
 ### Props
 
-<ArgsTable of={SimpleDataGrid} />
+<ArgTypes of={SimpleDataGrid} />
 
 ## DataGrid
 
@@ -102,7 +102,7 @@ control over the state of the table, like being able to use `useEffect` to fetch
 
 ### Props
 
-<ArgsTable of={DataGrid} />
+<ArgTypes of={DataGrid} />
 
 ## Columns
 
diff --git a/packages/react/src/components/Forms/Checkbox/index.mdx b/packages/react/src/components/Forms/Checkbox/index.mdx
index d68adda..9a3a094 100644
--- a/packages/react/src/components/Forms/Checkbox/index.mdx
+++ b/packages/react/src/components/Forms/Checkbox/index.mdx
@@ -1,5 +1,6 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, ArgTypes } from '@storybook/blocks';
 import * as Stories from './index.stories';
+import { Checkbox } from './index';
 
 <Meta of={Stories}/>
 
@@ -84,6 +85,10 @@ You can also define `state`, `text` props on the group component
   <Story id="components-forms-checkbox--group-success"/>
 </Canvas>
 
+### Props
+
+<ArgTypes of={Checkbox} />
+
 ## Design tokens
 
 Here are available custom design tokens.
diff --git a/packages/react/src/components/Forms/Field/index.mdx b/packages/react/src/components/Forms/Field/index.mdx
index c120d74..d884e32 100644
--- a/packages/react/src/components/Forms/Field/index.mdx
+++ b/packages/react/src/components/Forms/Field/index.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { Field } from "./index";
 import * as Stories from './index.stories';
 
@@ -23,4 +23,4 @@ available design token to do so.
 
 ## Props
 
-<ArgsTable of={Field} exclude={["compact"]} />
\ No newline at end of file
+<ArgTypes of={Field} exclude={["compact"]} />
\ No newline at end of file
diff --git a/packages/react/src/components/Forms/Input/index.mdx b/packages/react/src/components/Forms/Input/index.mdx
index b94a577..af0e891 100644
--- a/packages/react/src/components/Forms/Input/index.mdx
+++ b/packages/react/src/components/Forms/Input/index.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
 import { Input } from "./index";
 import * as Stories from './index.stories';
 
@@ -110,7 +110,7 @@ You can use the `ref` props to get a reference to the input element. The ref to
 
 You can use all the props of the native html `<input>` element props plus the following.
 
-<ArgsTable of={Input} />
+<ArgTypes of={Input} />
 
 ## Design tokens
 
diff --git a/packages/react/src/components/Forms/Radio/index.mdx b/packages/react/src/components/Forms/Radio/index.mdx
index 3d3b783..7235527 100644
--- a/packages/react/src/components/Forms/Radio/index.mdx
+++ b/packages/react/src/components/Forms/Radio/index.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, ArgTypes } from '@storybook/blocks';
 import { Radio } from "./index";
 import * as Stories from './index.stories';
 
@@ -84,6 +84,10 @@ You can also define `state`, `text` props on the group component
   <Story id="components-forms-radio--group-success"/>
 </Canvas>
 
+### Props
+
+<ArgTypes of={Radio} />
+
 ## Design tokens
 
 Here are available custom design tokens.
diff --git a/packages/react/src/components/Forms/Select/index.mdx b/packages/react/src/components/Forms/Select/index.mdx
index cdc08eb..e84a44e 100644
--- a/packages/react/src/components/Forms/Select/index.mdx
+++ b/packages/react/src/components/Forms/Select/index.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
 import { Select } from "./index";
 import * as Stories from './mono.stories';
 
@@ -88,7 +88,7 @@ using the component in a controlled way.
 
 The props of this component are as close as possible to the native select component. You can see the list of props below.
 
-<ArgsTable of={Select} />
+<ArgTypes of={Select} />
 
 ## Design tokens
 
diff --git a/packages/react/src/components/Pagination/index.mdx b/packages/react/src/components/Pagination/index.mdx
index 809acd8..0816847 100644
--- a/packages/react/src/components/Pagination/index.mdx
+++ b/packages/react/src/components/Pagination/index.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
 import { Pagination, usePagination } from './index';
 import * as Stories from './index.stories';
 
@@ -61,8 +61,8 @@ You can also set the page programmatically, for example, if you want to use a qu
 
 ### `<Pagination/>` component
 
-<ArgsTable of={Pagination} />
+<ArgTypes of={Pagination} />
 
 ### `usePagination` hook
 
-<ArgsTable of={usePagination} />
\ No newline at end of file
+<ArgTypes of={usePagination} />
\ No newline at end of file