diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx
new file mode 100644
index 0000000000..ee30e17305
--- /dev/null
+++ b/packages/canon/src/components/Box/Docs.mdx
@@ -0,0 +1,112 @@
+import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks';
+import * as BoxStories from './Box.stories';
+import { Title, Text } from '../../../docs/components';
+import { PropsTable } from '../../../docs/components';
+import { spacePropsList } from '../../../docs/spaceProps';
+
+
+
+
+
+Box
+
+ Box is the lowest-level component in Canon. We use it internally to build all
+ of our components. It provides a consistent API for styling and layout.
+
+
+Usage
+Hello World!
+`} language="tsx" dark />
+
+API reference
+
+Box
+
+ This is the Box component, our lowest-level component. Here are all the
+ available properties.
+
+
+
+
+
+ Padding and margin are used to create space around your component using our
+ predefined spacing tokens. We would recommend to use padding over margin to
+ avoid collapsing margins but both are available.
+
+
+
+
+
+
+Examples
+Here are some examples of how you can use the Box component.
+
+Simple example
+A simple example of how to use the Box component.
+Hello World`}
+ language="tsx"
+ dark
+/>
+
+Responsive
+
+ Most of the values can be defined per breakpoint, making it easy to create
+ responsive designs.
+
+Hello World`}
+ language="tsx"
+ dark
+/>
+
+
diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx
new file mode 100644
index 0000000000..e4b069cbcd
--- /dev/null
+++ b/packages/canon/src/components/Button/Docs.mdx
@@ -0,0 +1,135 @@
+import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
+import * as ButtonStories from './Button.stories';
+import { Title, Text } from '../../../docs/components';
+import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
+
+
+
+
+
+Button
+A button component that can be used to trigger actions.
+
+
+
+Usage
+Click me
+`} language="tsx" dark />
+
+
+ API reference
+
+
+
+
+Examples
+
+Variants
+Here's a view when buttons have different variants.
+
+
+
+
+
+
+
+`}
+ language="tsx"
+ dark
+/>
+
+Sizes
+Here's a view when buttons have different sizes.
+
+
+
+
+
+
+`}
+ language="tsx"
+ dark
+/>
+
+With Icons
+Here's a view when buttons have icons.
+
+
+
+
+
+
+
+`}
+ language="tsx"
+ dark
+/>
+
+Full width
+Here's a view when buttons are full width.
+
+
+
+
+
+
+
+`}
+ language="tsx"
+ dark
+/>
+
+Disabled
+Here's a view when buttons are disabled.
+
+
+
+Button`} language="tsx" dark />
+
+Responsive
+Here's a view when buttons are responsive.
+
+
+
+
+ Button
+`}
+ language="tsx"
+ dark
+/>
+
+
diff --git a/packages/canon/src/components/Checkbox/Docs.mdx b/packages/canon/src/components/Checkbox/Docs.mdx
new file mode 100644
index 0000000000..12e13abf03
--- /dev/null
+++ b/packages/canon/src/components/Checkbox/Docs.mdx
@@ -0,0 +1,70 @@
+import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
+import * as CheckboxStories from './Checkbox.stories';
+import { Title, Text } from '../../../docs/components';
+import { PropsTable } from '../../../docs/components/PropsTable';
+
+
+
+
+
+Checkbox
+A checkbox component that can be used to trigger actions.
+
+
+
+Usage
+
+`} language="tsx" dark />
+
+
+ API reference
+
+
+ void",
+ responsive: false,
+ },
+ disabled: {
+ type: 'boolean',
+ responsive: false,
+ },
+ required: {
+ type: 'boolean',
+ responsive: false,
+ },
+ name: {
+ type: 'string',
+ responsive: false,
+ },
+ value: {
+ type: 'string',
+ responsive: false,
+ },
+ className: {
+ type: 'string',
+ responsive: false,
+ },
+ style: {
+ type: 'CSSProperties',
+ responsive: false,
+ },
+ }}
+/>
+
+
diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx
new file mode 100644
index 0000000000..05a0600813
--- /dev/null
+++ b/packages/canon/src/components/Container/Docs.mdx
@@ -0,0 +1,99 @@
+import { Meta, Unstyled, Source } from '@storybook/blocks';
+import * as ContainerStories from './Container.stories';
+import { Title, Text, PropsTable, getProps } from '../../../docs/components';
+import { spacePropsList } from '../../../docs/spaceProps';
+
+
+
+
+
+Container
+
+
+ The container component let you use our default max-width and center the
+ content on the page.
+
+
+Usage
+Hello World!
+`} language="tsx" dark />
+
+
+ API reference
+
+
+
+
+Examples
+
+Simple
+A simple example of how to use the Container component.
+
+
+ Hello World
+ Hello World
+ Hello World
+`}
+ language="tsx"
+ dark
+/>
+
+Responsive padding & margin
+
+ The Container component also supports responsive values, making it easy to
+ create responsive designs.
+
+
+ Hello World
+ Hello World
+ Hello World
+`}
+ language="tsx"
+ dark
+/>
+
+
diff --git a/packages/canon/src/components/Grid/Docs.mdx b/packages/canon/src/components/Grid/Docs.mdx
new file mode 100644
index 0000000000..c1a0237279
--- /dev/null
+++ b/packages/canon/src/components/Grid/Docs.mdx
@@ -0,0 +1,199 @@
+import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
+import * as GridStories from './Grid.stories';
+import { Title, Text, PropsTable } from '../../../docs/components';
+import { spacePropsList } from '../../../docs/spaceProps';
+
+
+
+
+
+Grid
+
+ A layout component that helps to create simple column-based layouts as well as
+ more complex ones.
+
+
+Usage
+
+ Hello World
+
+`} language="tsx" dark />
+
+API reference
+
+Grid
+
+ This is the grid container component. It will help to define the number of
+ columns that will be used in the grid. You can also define the gap between the
+ columns. All values are responsive.
+
+
+
+
+
+ The grid component also accepts all the spacing props from the Box component.
+
+
+
+
+Grid Item
+
+ If you need more control over the columns, you can use the grid item
+ component. This will give you access to `rowSpan`, `colSpan`, `start` and
+ `end`. All values are responsive. This component is optional, you can use any
+ elements directly if you prefer.
+
+
+
+
+Examples
+
+Simple grid
+This is a simple grid with 3 columns and a gap of md.
+
+ Hello World
+ Hello World
+ Hello World
+
+`}
+ language="tsx"
+ dark
+/>
+
+Complex grid
+
+ You can also use the grid item to create more complex layouts. In this example
+ the first column will span 1 column and the second column will span 2 columns.
+
+
+
+
+ Hello World
+
+
+ Hello World
+
+
+`}
+ language="tsx"
+ dark
+/>
+
+Mixing rows and columns
+
+ The grid item component also supports the `rowSpan` prop, which allows you to
+ span multiple rows within the grid layout. In this example, the first item
+ will span 2 rows to achieve a dynamic and flexible grid structure.
+
+
+
+
+ Hello World
+
+
+ Hello World
+
+
+ Hello World
+
+
+`}
+ language="tsx"
+ dark
+/>
+
+Responsive
+
+ The grid component also supports responsive values. In this example the grid
+ will have 1 column on small screens and 3 on large screens, with a gap of xs
+ on small screens and md on large screens.
+
+
+
+ Hello World
+
+
+ Hello World
+
+
+`}
+ language="tsx"
+ dark
+/>
+
+Start and End
+
+ The start and end props can be used to position the item in the grid.
+
+
+
+ Hello World
+
+
+`}
+ language="tsx"
+ dark
+/>
+
+
diff --git a/packages/canon/src/components/Heading/Docs.mdx b/packages/canon/src/components/Heading/Docs.mdx
new file mode 100644
index 0000000000..dd64bd59b2
--- /dev/null
+++ b/packages/canon/src/components/Heading/Docs.mdx
@@ -0,0 +1,83 @@
+import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
+import * as HeadingStories from './Heading.stories';
+import { Title, Text } from '../../../docs/components';
+import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
+
+
+
+
+
+Heading
+
+Headings are used to structure the content of your page.
+
+
+
+Usage
+Hello World!
+`} language="tsx" dark />
+
+
+ API reference
+
+
+
+
+Examples
+Here are some examples of how you can use the Heading component.
+
+All variants
+
+ The `Heading` component has a `variant` prop that can be used to change the
+ appearance of the heading.
+
+
+
+
+
+ Title 1 Lorem ipsum dolor sit amet consectetur...
+ Title 2 Lorem ipsum dolor sit amet consectetur...
+ Title 3 Lorem ipsum dolor sit amet consectetur...
+ Title 4 Lorem ipsum dolor sit amet consectetur...
+ Title 5 Lorem ipsum dolor sit amet consectetur...
+ Display Lorem ipsum dolor sit amet consectetur...
+`}
+ language="tsx"
+ dark
+/>
+
+Responsive
+
+ You can also use the `variant` prop to change the appearance of the text based
+ on the screen size.
+
+
+Responsive Lorem ipsum dolor sit amet consectetur...`}
+ language="tsx"
+ dark
+/>
+
+
diff --git a/packages/canon/src/components/Icon/Docs.mdx b/packages/canon/src/components/Icon/Docs.mdx
new file mode 100644
index 0000000000..463fe60133
--- /dev/null
+++ b/packages/canon/src/components/Icon/Docs.mdx
@@ -0,0 +1,48 @@
+import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
+import * as IconStories from './Icon.stories';
+import { Title, Text } from '../../../docs/components';
+import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
+import { defaultIcons } from './icons';
+
+
+
+
+
+Icon
+
+Icons are used to represent an action or a state.
+
+
+
+Usage
+
+`} language="tsx" dark />
+
+
+ API reference
+
+
+
+
+
diff --git a/packages/canon/src/components/Inline/Docs.mdx b/packages/canon/src/components/Inline/Docs.mdx
new file mode 100644
index 0000000000..7671122966
--- /dev/null
+++ b/packages/canon/src/components/Inline/Docs.mdx
@@ -0,0 +1,124 @@
+import { Meta, Unstyled, Source } from '@storybook/blocks';
+import * as InlineStories from './Inline.stories';
+import { Title, Text, PropsTable, getProps } from '../../../docs/components';
+import { spacePropsList } from '../../../docs/spaceProps';
+
+
+
+
+
+Inline
+
+
+ The Inline component is used to create a horizontal layout of elements. By
+ default it uses flex and flexWrap to make sure that your content always flows
+ responsively.
+
+
+Usage
+
+ Hello World
+ Hello World
+ Hello World
+
+`} language="tsx" dark />
+
+
+ API reference
+
+
+
+
+
+ The grid component also accepts all the spacing props from the Box component.
+
+
+
+
+Examples
+
+Simple
+A simple example of how to use the Inline component.
+
+
+ Hello World
+ Hello World
+ Hello World
+`}
+ language="tsx"
+ dark
+/>
+
+Responsive
+
+ The Inline component also supports responsive values, making it easy to create
+ responsive designs.
+
+
+ Hello World
+ Hello World
+ Hello World
+`}
+ language="tsx"
+ dark
+/>
+
+Align
+
+ The Inline component also supports responsive alignment, making it easy to
+ create responsive designs.
+
+
+ Hello World
+ Hello World
+ Hello World
+`}
+ language="tsx"
+ dark
+/>
+
+Align vertically
+
+ The Inline component also supports responsive vertical alignment, making it
+ easy to create responsive designs.
+
+
+ Hello World
+ Hello World
+ Hello World
+`}
+ language="tsx"
+ dark
+/>
+
+
diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx
new file mode 100644
index 0000000000..921618f49f
--- /dev/null
+++ b/packages/canon/src/components/Stack/Docs.mdx
@@ -0,0 +1,126 @@
+import { Meta, Unstyled, Source } from '@storybook/blocks';
+import * as StackStories from './Stack.stories';
+import { Title, Text, PropsTable, getProps } from '../../../docs/components';
+import { spacePropsList } from '../../../docs/spaceProps';
+
+
+
+
+
+Stack
+
+
+ This is the stack container component. It will help to define the number of
+ columns that will be used in the grid. You can also define the gap between the
+ columns. All values are responsive.
+
+
+Usage
+
+ Hello World
+ Hello World
+ Hello World
+
+`} language="tsx" dark />
+
+
+ API reference
+
+
+
+
+
+ The grid component also accepts all the spacing props from the Box component.
+
+
+
+
+Common questions
+
+Can I stack horizontally?
+
+ The Stack component only allows for stacking elements vertically. If you want
+ to create a column layout, please use the Grid component.
+
+
+
+ Hello World
+ Hello World
+ Hello World
+
+`}
+ language="tsx"
+ dark
+/>
+
+Examples
+
+Simple
+
+ A simple example of how to use the Stack component with a medium gap.
+
+
+
+ Hello World
+ Hello World
+ Hello World
+`}
+ language="tsx"
+ dark
+/>
+
+Responsive
+
+ The Stack component also supports responsive values, making it easy to create
+ responsive designs.
+
+
+ Hello World
+ Hello World
+ Hello World
+`}
+ language="tsx"
+ dark
+/>
+
+Align
+
+ The Stack component also supports responsive alignment, making it easy to
+ create responsive designs.
+
+
+ Hello World
+ Hello World
+ Hello World
+`}
+ language="tsx"
+ dark
+/>
+
+
diff --git a/packages/canon/src/components/Table/Docs.mdx b/packages/canon/src/components/Table/Docs.mdx
new file mode 100644
index 0000000000..6a6e9c8a59
--- /dev/null
+++ b/packages/canon/src/components/Table/Docs.mdx
@@ -0,0 +1,5 @@
+import { Meta, Controls } from '@storybook/blocks';
+
+
+
+# Table
diff --git a/packages/canon/src/components/Text/Docs.mdx b/packages/canon/src/components/Text/Docs.mdx
new file mode 100644
index 0000000000..685a00a33f
--- /dev/null
+++ b/packages/canon/src/components/Text/Docs.mdx
@@ -0,0 +1,101 @@
+import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
+import * as TextStories from './Text.stories';
+import { Title, Text } from '../../../docs/components';
+import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
+
+
+
+
+
+Text
+
+The `Text` component is used to display content on your page.
+
+
+
+Usage
+Hello World!`} language="tsx" dark />
+
+
+ API reference
+
+
+
+
+Examples
+Here are some examples of how you can use the Text component.
+
+All variants
+
+ The `Text` component has a `variant` prop that can be used to change the
+ appearance of the text.
+
+
+
+
+
+ Subtitle Lorem ipsum dolor sit amet consectetur...
+ Body Lorem ipsum dolor sit amet consectetur...
+ Caption Lorem ipsum dolor sit amet consectetur...
+ Label Lorem ipsum dolor sit amet consectetur...
+`}
+ language="tsx"
+ dark
+/>
+
+All weights
+
+ The `Text` component has a `weight` prop that can be used to change the
+ appearance of the text.
+
+
+
+
+
+ Regular Lorem ipsum dolor sit amet consectetur...
+ Bold Lorem ipsum dolor sit amet consectetur...
+`}
+ language="tsx"
+ dark
+/>
+
+Responsive
+
+ You can also use the `variant` prop to change the appearance of the text based
+ on the screen size.
+
+
+Responsive Lorem ipsum dolor sit amet consectetur...`}
+ language="tsx"
+ dark
+/>
+
+