diff --git a/docs/.registry/index.tsx b/docs/.registry/index.tsx
deleted file mode 100644
index 4d16399630..0000000000
--- a/docs/.registry/index.tsx
+++ /dev/null
@@ -1,381 +0,0 @@
-// @ts-nocheck
-// This file is autogenerated by scripts/build-registry.ts
-// Do not edit this file directly.
-import dynamic from 'next/dynamic';
-
-export const registry = {
-  'accordion-basic': {
-    name: 'accordion-basic',
-    demo: dynamic(
-      () => import('@/content/components/accordion/accordion-basic.demo')
-    ),
-    file: 'content/components/accordion/accordion-basic.demo.tsx',
-  },
-  'basic-accordion': {
-    name: 'basic-accordion',
-    demo: dynamic(
-      () => import('@/content/components/accordion/basic-accordion.demo')
-    ),
-    file: 'content/components/accordion/basic-accordion.demo.tsx',
-  },
-  'multi-select-accordion': {
-    name: 'multi-select-accordion',
-    demo: dynamic(
-      () => import('@/content/components/accordion/multi-select-accordion.demo')
-    ),
-    file: 'content/components/accordion/multi-select-accordion.demo.tsx',
-  },
-  'single-select-accordion': {
-    name: 'single-select-accordion',
-    demo: dynamic(
-      () =>
-        import('@/content/components/accordion/single-select-accordion.demo')
-    ),
-    file: 'content/components/accordion/single-select-accordion.demo.tsx',
-  },
-  'badge-dark': {
-    name: 'badge-dark',
-    demo: dynamic(() => import('@/content/components/badge/badge-dark.demo')),
-    file: 'content/components/badge/badge-dark.demo.tsx',
-  },
-  'basic-badge': {
-    name: 'basic-badge',
-    demo: dynamic(() => import('@/content/components/badge/basic-badge.demo')),
-    file: 'content/components/badge/basic-badge.demo.tsx',
-  },
-  'icon-badge': {
-    name: 'icon-badge',
-    demo: dynamic(() => import('@/content/components/badge/icon-badge.demo')),
-    file: 'content/components/badge/icon-badge.demo.tsx',
-  },
-  rightside: {
-    name: 'rightside',
-    demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
-    file: 'content/components/aside/rightside.demo.tsx',
-  },
-  space: {
-    name: 'space',
-    demo: dynamic(() => import('@/content/components/aside/space.demo')),
-    file: 'content/components/aside/space.demo.tsx',
-  },
-  'golden-aspect': {
-    name: 'golden-aspect',
-    demo: dynamic(
-      () => import('@/content/components/aspect/golden-aspect.demo')
-    ),
-    file: 'content/components/aspect/golden-aspect.demo.tsx',
-  },
-  map: {
-    name: 'map',
-    demo: dynamic(() => import('@/content/components/aspect/map.demo')),
-    file: 'content/components/aspect/map.demo.tsx',
-  },
-  'ratio-square': {
-    name: 'ratio-square',
-    demo: dynamic(
-      () => import('@/content/components/aspect/ratio-square.demo')
-    ),
-    file: 'content/components/aspect/ratio-square.demo.tsx',
-  },
-  video: {
-    name: 'video',
-    demo: dynamic(() => import('@/content/components/aspect/video.demo')),
-    file: 'content/components/aspect/video.demo.tsx',
-  },
-  'horizontal-breakout': {
-    name: 'horizontal-breakout',
-    demo: dynamic(
-      () => import('@/content/components/breakout/horizontal-breakout.demo')
-    ),
-    file: 'content/components/breakout/horizontal-breakout.demo.tsx',
-  },
-  'iframe-breakout': {
-    name: 'iframe-breakout',
-    demo: dynamic(
-      () => import('@/content/components/breakout/iframe-breakout.demo')
-    ),
-    file: 'content/components/breakout/iframe-breakout.demo.tsx',
-  },
-  'vertical-breakout': {
-    name: 'vertical-breakout',
-    demo: dynamic(
-      () => import('@/content/components/breakout/vertical-breakout.demo')
-    ),
-    file: 'content/components/breakout/vertical-breakout.demo.tsx',
-  },
-  'button-ghost': {
-    name: 'button-ghost',
-    demo: dynamic(
-      () => import('@/content/components/button/button-ghost.demo')
-    ),
-    file: 'content/components/button/button-ghost.demo.tsx',
-  },
-  'button-icon': {
-    name: 'button-icon',
-    demo: dynamic(() => import('@/content/components/button/button-icon.demo')),
-    file: 'content/components/button/button-icon.demo.tsx',
-  },
-  'button-link': {
-    name: 'button-link',
-    demo: dynamic(() => import('@/content/components/button/button-link.demo')),
-    file: 'content/components/button/button-link.demo.tsx',
-  },
-  'button-primary': {
-    name: 'button-primary',
-    demo: dynamic(
-      () => import('@/content/components/button/button-primary.demo')
-    ),
-    file: 'content/components/button/button-primary.demo.tsx',
-  },
-  'button-secondary': {
-    name: 'button-secondary',
-    demo: dynamic(
-      () => import('@/content/components/button/button-secondary.demo')
-    ),
-    file: 'content/components/button/button-secondary.demo.tsx',
-  },
-  'button-size': {
-    name: 'button-size',
-    demo: dynamic(() => import('@/content/components/button/button-size.demo')),
-    file: 'content/components/button/button-size.demo.tsx',
-  },
-  'button-text': {
-    name: 'button-text',
-    demo: dynamic(() => import('@/content/components/button/button-text.demo')),
-    file: 'content/components/button/button-text.demo.tsx',
-  },
-  'basic-calendar': {
-    name: 'basic-calendar',
-    demo: dynamic(
-      () => import('@/content/components/calendar/basic-calendar.demo')
-    ),
-    file: 'content/components/calendar/basic-calendar.demo.tsx',
-  },
-  'disabled-calendar': {
-    name: 'disabled-calendar',
-    demo: dynamic(
-      () => import('@/content/components/calendar/disabled-calendar.demo')
-    ),
-    file: 'content/components/calendar/disabled-calendar.demo.tsx',
-  },
-  'range-calendar': {
-    name: 'range-calendar',
-    demo: dynamic(
-      () => import('@/content/components/calendar/range-calendar.demo')
-    ),
-    file: 'content/components/calendar/range-calendar.demo.tsx',
-  },
-  'card-form': {
-    name: 'card-form',
-    demo: dynamic(() => import('@/content/components/card/card-form.demo')),
-    file: 'content/components/card/card-form.demo.tsx',
-  },
-  'card-infos': {
-    name: 'card-infos',
-    demo: dynamic(() => import('@/content/components/card/card-infos.demo')),
-    file: 'content/components/card/card-infos.demo.tsx',
-  },
-  'collapse-columns': {
-    name: 'collapse-columns',
-    demo: dynamic(
-      () => import('@/content/components/columns/collapse-columns.demo')
-    ),
-    file: 'content/components/columns/collapse-columns.demo.tsx',
-  },
-  'layout-columns': {
-    name: 'layout-columns',
-    demo: dynamic(
-      () => import('@/content/components/columns/layout-columns.demo')
-    ),
-    file: 'content/components/columns/layout-columns.demo.tsx',
-  },
-  'space-columns': {
-    name: 'space-columns',
-    demo: dynamic(
-      () => import('@/content/components/columns/space-columns.demo')
-    ),
-    file: 'content/components/columns/space-columns.demo.tsx',
-  },
-  'stretch-columns-switch': {
-    name: 'stretch-columns-switch',
-    demo: dynamic(
-      () => import('@/content/components/columns/stretch-columns-switch.demo')
-    ),
-    file: 'content/components/columns/stretch-columns-switch.demo.tsx',
-  },
-  'stretch-columns': {
-    name: 'stretch-columns',
-    demo: dynamic(
-      () => import('@/content/components/columns/stretch-columns.demo')
-    ),
-    file: 'content/components/columns/stretch-columns.demo.tsx',
-  },
-  'full-container': {
-    name: 'full-container',
-    demo: dynamic(
-      () => import('@/content/components/container/full-container.demo')
-    ),
-    file: 'content/components/container/full-container.demo.tsx',
-  },
-  'small-container': {
-    name: 'small-container',
-    demo: dynamic(
-      () => import('@/content/components/container/small-container.demo')
-    ),
-    file: 'content/components/container/small-container.demo.tsx',
-  },
-  'date-field-basic': {
-    name: 'date-field-basic',
-    demo: dynamic(
-      () => import('@/content/components/datefield/date-field-basic.demo')
-    ),
-    file: 'content/components/datefield/date-field-basic.demo.tsx',
-  },
-  'date-field-disabled': {
-    name: 'date-field-disabled',
-    demo: dynamic(
-      () => import('@/content/components/datefield/date-field-disabled.demo')
-    ),
-    file: 'content/components/datefield/date-field-disabled.demo.tsx',
-  },
-  'date-field-error': {
-    name: 'date-field-error',
-    demo: dynamic(
-      () => import('@/content/components/datefield/date-field-error.demo')
-    ),
-    file: 'content/components/datefield/date-field-error.demo.tsx',
-  },
-  'date-field-required': {
-    name: 'date-field-required',
-    demo: dynamic(
-      () => import('@/content/components/datefield/date-field-required.demo')
-    ),
-    file: 'content/components/datefield/date-field-required.demo.tsx',
-  },
-  'inline-alignments': {
-    name: 'inline-alignments',
-    demo: dynamic(
-      () => import('@/content/components/inline/inline-alignments.demo')
-    ),
-    file: 'content/components/inline/inline-alignments.demo.tsx',
-  },
-  'inline-elements': {
-    name: 'inline-elements',
-    demo: dynamic(
-      () => import('@/content/components/inline/inline-elements.demo')
-    ),
-    file: 'content/components/inline/inline-elements.demo.tsx',
-  },
-  'inline-nested': {
-    name: 'inline-nested',
-    demo: dynamic(
-      () => import('@/content/components/inline/inline-nested.demo')
-    ),
-    file: 'content/components/inline/inline-nested.demo.tsx',
-  },
-  'inline-spacing': {
-    name: 'inline-spacing',
-    demo: dynamic(
-      () => import('@/content/components/inline/inline-spacing.demo')
-    ),
-    file: 'content/components/inline/inline-spacing.demo.tsx',
-  },
-  'inset-equal': {
-    name: 'inset-equal',
-    demo: dynamic(() => import('@/content/components/inset/inset-equal.demo')),
-    file: 'content/components/inset/inset-equal.demo.tsx',
-  },
-  'inset-hv': {
-    name: 'inset-hv',
-    demo: dynamic(() => import('@/content/components/inset/inset-hv.demo')),
-    file: 'content/components/inset/inset-hv.demo.tsx',
-  },
-  'split-inline': {
-    name: 'split-inline',
-    demo: dynamic(() => import('@/content/components/split/split-inline.demo')),
-    file: 'content/components/split/split-inline.demo.tsx',
-  },
-  'split-stack': {
-    name: 'split-stack',
-    demo: dynamic(() => import('@/content/components/split/split-stack.demo')),
-    file: 'content/components/split/split-stack.demo.tsx',
-  },
-  'stack-horizontal': {
-    name: 'stack-horizontal',
-    demo: dynamic(
-      () => import('@/content/components/stack/stack-horizontal.demo')
-    ),
-    file: 'content/components/stack/stack-horizontal.demo.tsx',
-  },
-  'stack-nested': {
-    name: 'stack-nested',
-    demo: dynamic(() => import('@/content/components/stack/stack-nested.demo')),
-    file: 'content/components/stack/stack-nested.demo.tsx',
-  },
-  'stack-spacing': {
-    name: 'stack-spacing',
-    demo: dynamic(
-      () => import('@/content/components/stack/stack-spacing.demo')
-    ),
-    file: 'content/components/stack/stack-spacing.demo.tsx',
-  },
-  'stack-vertical': {
-    name: 'stack-vertical',
-    demo: dynamic(
-      () => import('@/content/components/stack/stack-vertical.demo')
-    ),
-    file: 'content/components/stack/stack-vertical.demo.tsx',
-  },
-  'tabs-disabled': {
-    name: 'tabs-disabled',
-    demo: dynamic(() => import('@/content/components/tabs/tabs-disabled.demo')),
-    file: 'content/components/tabs/tabs-disabled.demo.tsx',
-  },
-  'tabs-large': {
-    name: 'tabs-large',
-    demo: dynamic(() => import('@/content/components/tabs/tabs-large.demo')),
-    file: 'content/components/tabs/tabs-large.demo.tsx',
-  },
-  'tabs-selectedKey': {
-    name: 'tabs-selectedKey',
-    demo: dynamic(
-      () => import('@/content/components/tabs/tabs-selectedKey.demo')
-    ),
-    file: 'content/components/tabs/tabs-selectedKey.demo.tsx',
-  },
-  'tiles-autoRows': {
-    name: 'tiles-autoRows',
-    demo: dynamic(
-      () => import('@/content/components/tiles/tiles-autoRows.demo')
-    ),
-    file: 'content/components/tiles/tiles-autoRows.demo.tsx',
-  },
-  'tiles-complex': {
-    name: 'tiles-complex',
-    demo: dynamic(
-      () => import('@/content/components/tiles/tiles-complex.demo')
-    ),
-    file: 'content/components/tiles/tiles-complex.demo.tsx',
-  },
-  'tiles-itemwidth': {
-    name: 'tiles-itemwidth',
-    demo: dynamic(
-      () => import('@/content/components/tiles/tiles-itemwidth.demo')
-    ),
-    file: 'content/components/tiles/tiles-itemwidth.demo.tsx',
-  },
-  'tiles-spacing': {
-    name: 'tiles-spacing',
-    demo: dynamic(
-      () => import('@/content/components/tiles/tiles-spacing.demo')
-    ),
-    file: 'content/components/tiles/tiles-spacing.demo.tsx',
-  },
-  'tiles-stretch': {
-    name: 'tiles-stretch',
-    demo: dynamic(
-      () => import('@/content/components/tiles/tiles-stretch.demo')
-    ),
-    file: 'content/components/tiles/tiles-stretch.demo.tsx',
-  },
-} as const;
diff --git a/docs/content/components/checkbox/checkbox-disabled.demo.tsx b/docs/content/components/checkbox/checkbox-disabled.demo.tsx
new file mode 100644
index 0000000000..472d24d50f
--- /dev/null
+++ b/docs/content/components/checkbox/checkbox-disabled.demo.tsx
@@ -0,0 +1,10 @@
+import { Checkbox, Stack } from '@marigold/components';
+
+export default () => (
+  <Stack space={2}>
+    <Checkbox disabled>Disabled</Checkbox>
+    <Checkbox checked disabled>
+      Checked and disabled
+    </Checkbox>
+  </Stack>
+);
diff --git a/docs/content/components/checkbox/checkbox-group.demo.tsx b/docs/content/components/checkbox/checkbox-group.demo.tsx
new file mode 100644
index 0000000000..3816cf9556
--- /dev/null
+++ b/docs/content/components/checkbox/checkbox-group.demo.tsx
@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import { Checkbox, CheckboxGroup } from '@marigold/components';
+
+export default () => {
+  const [selected, setSelected] = useState<string[]>([]);
+  return (
+    <>
+      <CheckboxGroup
+        label="Choose your toppings:"
+        onChange={setSelected}
+        description="Just click on the options"
+      >
+        <Checkbox value="ham">🐖 Ham</Checkbox>
+        <Checkbox value="beef" disabled>
+          🐄 Beef (out of stock)
+        </Checkbox>
+        <Checkbox value="tuna">🐟 Tuna</Checkbox>
+        <Checkbox value="tomatos">🍅 Tomatos</Checkbox>
+        <Checkbox value="onions">🧅 Onions</Checkbox>
+        <Checkbox value="pineapple">🍍 Pineapple</Checkbox>
+      </CheckboxGroup>
+      <hr />
+      <pre>Selected values: {selected.join(', ')}</pre>
+    </>
+  );
+};
diff --git a/docs/content/components/checkbox/checkbox-indeterminate.demo.tsx b/docs/content/components/checkbox/checkbox-indeterminate.demo.tsx
new file mode 100644
index 0000000000..3c55d8ca37
--- /dev/null
+++ b/docs/content/components/checkbox/checkbox-indeterminate.demo.tsx
@@ -0,0 +1,7 @@
+import { Checkbox } from '@marigold/components';
+
+export default () => (
+  <Checkbox defaultChecked indeterminate>
+    Select all
+  </Checkbox>
+);
diff --git a/docs/content/components/checkbox/checkbox.mdx b/docs/content/components/checkbox/checkbox.mdx
index 955cecb4b1..e1824a9822 100644
--- a/docs/content/components/checkbox/checkbox.mdx
+++ b/docs/content/components/checkbox/checkbox.mdx
@@ -9,3 +9,172 @@ The `<Checkbox>` component allows users to select one or more options from a set
 There are several props for the `<Checkbox>` and the `<CheckboxGroup>`.
 
 You don't have to click on the `<Checkbox>` itself, you can also just click on the label next to the box.
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx onlyCode
+import { Checkbox, CheckboxGroup } from '@marigold/components';
+```
+
+### Appearance
+
+<AppearanceTable component={title} />
+
+### Props
+
+<PropsTable
+  props={[
+    {
+      property: 'error',
+      type: 'boolean',
+      description:
+        'If `true`, the checkbox is considered invalid and if set the `errorMessage` is shown instead of the `description`.',
+      default: 'false',
+    },
+    {
+      property: 'width',
+      type: 'string',
+      description: 'Control the width of the field.',
+      default: '100%',
+    },
+    {
+      property: 'defaultChecked',
+      type: 'boolean',
+      description: 'Select the checkbox by default',
+      default: 'false',
+    },
+    {
+      property: 'checked',
+      type: 'boolean',
+      description: 'Select the checkbox.',
+      default: 'false',
+    },
+    {
+      property: 'indeterminate',
+      type: 'boolean',
+      description:
+        'Use when it represents both selected and not selected values.',
+      default: 'false',
+    },
+    {
+      property: 'readOnly',
+      type: 'boolean',
+      description: 'Sets the checkbox on read only.',
+      default: 'false',
+    },
+    {
+      property: 'required',
+      type: 'boolean',
+      description: 'Sets the checkbox as required.',
+      default: 'false',
+    },
+    {
+      property: '...',
+      type: '',
+      description: 'You can use all native attributes of `input`',
+      default: '',
+    },
+  ]}
+/>
+
+### Group Props
+
+<PropsTable
+  props={[
+     {
+      property: 'label',
+      type: 'string',
+      description: 'Set the label for the checkbox group.',
+      default: 'none',
+    },
+    {
+      property: 'error',
+      type: 'boolean',
+      description:
+        'If `true`, the checkbox is considered invalid and if set the `errorMessage` is shown instead of the `description`.',
+      default: 'false',
+    },
+
+    {
+      property: 'defaultChecked',
+      type: 'boolean',
+      description: 'Select the checkbox by default',
+      default: 'false',
+    },
+    {
+      property: 'checked',
+      type: 'boolean',
+      description: 'Select the checkbox.',
+      default: 'false',
+    },
+
+    {
+      property: 'readOnly',
+      type: 'boolean',
+      description: 'Sets the checkbox on read only.',
+      default: 'false',
+    },
+    {
+      property: 'required',
+      type: 'boolean',
+      description: 'Sets the checkbox as required.',
+      default: 'false',
+    },
+    {
+      property: 'value',
+      type: 'string[]',
+      description: 'Set the values of the group.',
+      default: 'none',
+    },
+    {
+
+      property: 'defaultValue',
+      type: 'string[]',
+      description: 'Set the default values of the group.',
+      default: 'none',
+    },
+     {
+      property: 'onChange',
+      type: '(value: string[]) => void',
+      description: 'Handler that is called when the checkbox value changes.',
+      default: 'none',
+    },
+    {
+      property: 'description',
+      type: 'string',
+      description: 'Sets a helptext for the group.',
+      default: 'none',
+    },
+    {
+      property: 'errorMessage',
+      type: 'string',
+      description: 'Sets a error message for the group if a error occured.',
+      default: 'none',
+    }
+
+]}
+/>
+
+## Examples
+
+### Checkbox disabled
+
+Here you can see how the `disabled` property is to use.
+
+<ComponentDemo file="./checkbox-disabled.demo.tsx" />
+
+### Indeterminate Checkbox
+
+Use indeterminate state when it represents both selected and not selected values.
+
+<ComponentDemo file="./checkbox-indeterminate.demo.tsx" />
+
+### Group checkboxes
+
+In this example the `<Checkbox>` are wrapped within the `<CheckboxGroup>`. You see that the `onChange` property is also set. It has also a helptext within which you can set with the `description` property for the `<CheckboxGroup>`.
+
+<ComponentDemo file="./checkbox-group.demo.tsx" />