diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
index 1b88fc3c66..f8619adc07 100644
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@@ -37,6 +37,7 @@ jobs:
           path: |
             packages/fuselage/storybook-static
             packages/fuselage-ui-kit/storybook-static
+            packages/onboarding-ui/storybook-static
       - if: github.ref == 'refs/heads/master'
         uses: actions/upload-artifact@v2
         with:
@@ -111,9 +112,10 @@ jobs:
           name: docs
           path: .
       - run: |
-          rm -rf "fuselage/${{ needs.build-and-test.outputs.branch-name }}" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}"
+          rm -rf "fuselage/${{ needs.build-and-test.outputs.branch-name }}" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}" "onboarding-ui/${{ needs.build-and-test.outputs.branch-name }}"
           mv -v "packages/fuselage/storybook-static" "fuselage/${{ needs.build-and-test.outputs.branch-name }}"
           mv -v "packages/fuselage-ui-kit/storybook-static" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}"
+          mv -v "packages/onboarding-ui/storybook-static" "onboarding-ui/${{ needs.build-and-test.outputs.branch-name }}"
           rm -rf packages
       - uses: crazy-max/ghaction-github-pages@v2
         with:
diff --git a/.github/workflows/ci-pr-closed.yml b/.github/workflows/ci-pr-closed.yml
index fc3df33f5c..bb60ebccb0 100644
--- a/.github/workflows/ci-pr-closed.yml
+++ b/.github/workflows/ci-pr-closed.yml
@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
         with:
           ref: gh-pages
-      - run: rm -rf "fuselage/${{ github.event.number }}" "fuselage-ui-kit/${{ github.event.number }}"
+      - run: rm -rf "fuselage/${{ github.event.number }}" "fuselage-ui-kit/${{ github.event.number }}" "onboarding-ui/${{ github.event.number }}"
       - uses: crazy-max/ghaction-github-pages@v2
         with:
           target_branch: gh-pages
diff --git a/.github/workflows/ci-pr-opened.yml b/.github/workflows/ci-pr-opened.yml
index 6ef2031d8d..1a449ba4c6 100644
--- a/.github/workflows/ci-pr-opened.yml
+++ b/.github/workflows/ci-pr-opened.yml
@@ -43,6 +43,7 @@ jobs:
           path: |
             fuselage/storybook-static
             fuselage-ui-kit/storybook-static
+            onboarding-ui/storybook-static
 
   publish-to-gh-pages:
     name: Publish to GitHub Pages
@@ -61,9 +62,10 @@ jobs:
           name: storybooks
           path: packages
       - run: |
-          rm -rf "fuselage/${{ needs.download-artifact.outputs.pr-number }}" "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}"
+          rm -rf "fuselage/${{ needs.download-artifact.outputs.pr-number }}" "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}" "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
           mv -v packages/fuselage/storybook-static "fuselage/${{ needs.download-artifact.outputs.pr-number }}"
           mv -v packages/fuselage-ui-kit/storybook-static "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}"
+          mv -v packages/onboarding-ui/storybook-static "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
           rm -rf packages
       - uses: crazy-max/ghaction-github-pages@v2
         with:
diff --git a/.github/workflows/ci-pr.yml b/.github/workflows/ci-pr.yml
index 9a86a1b4cb..6d54264235 100644
--- a/.github/workflows/ci-pr.yml
+++ b/.github/workflows/ci-pr.yml
@@ -35,6 +35,7 @@ jobs:
           path: |
             packages/fuselage/storybook-static
             packages/fuselage-ui-kit/storybook-static
+            packages/onboarding-ui/storybook-static
 
   test-with-loki:
     name: Test with Loki
@@ -63,11 +64,16 @@ jobs:
       - run: |
           cat packages/fuselage/package.json | sed s/\.docker/.app/ > packages/fuselage/package.json-new
           cat packages/fuselage-ui-kit/package.json | sed s/\.docker/.app/ > packages/fuselage-ui-kit/package.json-new
+          cat packages/onboarding-ui/package.json | sed s/\.docker/.app/ > packages/onboarding-ui/package.json-new
           mv packages/fuselage/package.json-new packages/fuselage/package.json
           mv packages/fuselage-ui-kit/package.json-new packages/fuselage-ui-kit/package.json
+          mv packages/onboarding-ui/package.json-new packages/onboarding-ui/package.json
       - uses: ./.github/actions/loki/test
         with:
           working_dir: ./packages/fuselage
       - uses: ./.github/actions/loki/test
         with:
           working_dir: ./packages/fuselage-ui-kit
+      - uses: ./.github/actions/loki/test
+        with:
+          working_dir: ./packages/onboarding-ui
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 32ec2af5bc..9a9a01f2a2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -40,6 +40,10 @@
       "directory": "packages/mp3-encoder",
       "changeProcessCWD": true
     },
+    {
+      "directory": "packages/onboarding-ui",
+      "changeProcessCWD": true
+    },
     {
       "directory": "packages/peggy-loader",
       "changeProcessCWD": true
diff --git a/README.md b/README.md
index 9514cdca57..deaeb7c28e 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,7 @@
 | 📦 [`@rocket.chat/fuselage-ui-kit`](/packages/@rocket.chat/fuselage-ui-kit)       | UiKit elements for Rocket.Chat Apps built under Fuselage design system | ![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-ui-kit?style=flat-square)    | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-ui-kit&style=flat-square)    |
 | 📦 [`@rocket.chat/icons`](/packages/@rocket.chat/icons)                           |                                                                        | ![npm](https://img.shields.io/npm/v/@rocket.chat/icons?style=flat-square)              | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ficons&style=flat-square)              |
 | 📦 [`@rocket.chat/image-manipulation`](/packages/@rocket.chat/image-manipulation) | Image transform functions                                              | ![npm](https://img.shields.io/npm/v/@rocket.chat/image-manipulation?style=flat-square) | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fimage-manipulation&style=flat-square) |
+| 📦 [`@rocket.chat/image-manipulation`](/packages/@rocket.chat/image-manipulation) | Image transform functions                                              | ![npm](https://img.shields.io/npm/v/@rocket.chat/image-manipulation?style=flat-square) | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fimage-manipulation&style=flat-square) |
 | 📦 [`@rocket.chat/memo`](/packages/@rocket.chat/memo)                             | Memoization utilities                                                  | ![npm](https://img.shields.io/npm/v/@rocket.chat/memo?style=flat-square)               | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fmemo&style=flat-square)               |
 | 📦 [`@rocket.chat/message-parser`](/packages/@rocket.chat/message-parser)         | Rocket.Chat parser for messages                                        | ![npm](https://img.shields.io/npm/v/@rocket.chat/message-parser?style=flat-square)     | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fmessage-parser&style=flat-square)     |
 | 📦 [`@rocket.chat/mp3-encoder`](/packages/@rocket.chat/mp3-encoder)               | A LAME encoder to be used in web workers                               | ![npm](https://img.shields.io/npm/v/@rocket.chat/mp3-encoder?style=flat-square)        | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fmp3-encoder&style=flat-square)        |
diff --git a/packages/eslint-config-alt/typescript/index.js b/packages/eslint-config-alt/typescript/index.js
index 50066d1d8b..9a29bfe2af 100644
--- a/packages/eslint-config-alt/typescript/index.js
+++ b/packages/eslint-config-alt/typescript/index.js
@@ -18,6 +18,7 @@ module.exports = {
         argsIgnorePattern: '^_',
       },
     ],
+    '@typescript-eslint/no-use-before-define': ['error'],
     'func-call-spacing': 'off',
     'indent': 'off',
     'import/order': [
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png
index 2b10e302cf..3da4a0ef17 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png
index 8a9af283cc..9bf4674c28 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_WithTitle.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_WithTitle.png
new file mode 100644
index 0000000000..cb7adeb6b0
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_WithTitle.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png
index 765c0f788a..41203e0b8f 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png
index c1bc2a1461..5088a7858b 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_WithTitle.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_WithTitle.png
new file mode 100644
index 0000000000..c307f371f4
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_WithTitle.png differ
diff --git a/packages/fuselage/README.md b/packages/fuselage/README.md
index bcc66a45e3..b7b9371234 100644
--- a/packages/fuselage/README.md
+++ b/packages/fuselage/README.md
@@ -23,11 +23,11 @@
 Firstly, install the peer dependencies (prerequisites):
 
 ```sh
-npm i @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom
+npm i @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom react-virtuoso
 
 # or, if you are using yarn:
 
-yarn add @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom
+yarn add @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom react-virtuoso
 ```
 
 Add `@rocket.chat/fuselage` as a dependency:
diff --git a/packages/fuselage/index.js b/packages/fuselage/index.js
index 6762180279..404f133e02 100644
--- a/packages/fuselage/index.js
+++ b/packages/fuselage/index.js
@@ -1,5 +1,5 @@
-module.exports = require('./dist/fuselage.development.js');
-// if (process.env.NODE_ENV === 'production') {
-//   module.exports = require('./dist/fuselage.production.js');
-// } else {
-// }
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/fuselage.production.js');
+} else {
+  module.exports = require('./dist/fuselage.development.js');
+}
diff --git a/packages/fuselage/src/components/Menu/index.d.ts b/packages/fuselage/src/components/Menu/index.d.ts
index 764e444237..a5f318c076 100644
--- a/packages/fuselage/src/components/Menu/index.d.ts
+++ b/packages/fuselage/src/components/Menu/index.d.ts
@@ -9,10 +9,7 @@ type MenuProps = Omit<ComponentProps<typeof ActionButton>, 'icon'> & {
   icon?: string;
   options: {
     [id: string]: {
-      label: {
-        title: string;
-        icon: string;
-      };
+      label: ReactElement | string;
       action: () => void;
     };
   };
diff --git a/packages/fuselage/src/components/Message/Metrics/index.tsx b/packages/fuselage/src/components/Message/Metrics/index.tsx
index 7ea67d6da3..7e4aa6c7fe 100644
--- a/packages/fuselage/src/components/Message/Metrics/index.tsx
+++ b/packages/fuselage/src/components/Message/Metrics/index.tsx
@@ -11,12 +11,6 @@ const ContentItem: FC = (props) => (
   <div className='rcx-message-metrics__content-item' {...props} />
 );
 
-export const Reply: FC<ComponentProps<typeof Button>> = (props) => (
-  <MetricsItem>
-    <Button {...props} {...{ small: true, primary: true }} />
-  </MetricsItem>
-);
-
 type IconProps = { name: 'thread' | 'user' | 'clock' | 'discussion' };
 type FollowingProps = { name: 'bell' | 'bell-off' };
 
@@ -47,6 +41,12 @@ const MetricsFollowing: FC<FollowingProps> = ({ name }) => (
   />
 );
 
+export const Reply: FC<ComponentProps<typeof Button>> = (props) => (
+  <MetricsItem>
+    <Button {...props} {...{ small: true, primary: true }} />
+  </MetricsItem>
+);
+
 Metrics.Reply = Reply;
 
 Metrics.Item = MetricsItem;
diff --git a/packages/fuselage/src/components/OptionsPaginated/index.js b/packages/fuselage/src/components/OptionsPaginated/index.js
index c50e4bb72c..ca5e0b7f34 100644
--- a/packages/fuselage/src/components/OptionsPaginated/index.js
+++ b/packages/fuselage/src/components/OptionsPaginated/index.js
@@ -28,6 +28,7 @@ export const CheckOption = React.memo(
 export const OptionsPaginated = React.forwardRef(
   (
     {
+      title,
       multiple,
       renderEmpty: EmptyComponent = Empty,
       options,
@@ -43,6 +44,7 @@ export const OptionsPaginated = React.forwardRef(
       const { value, label, selected } = data;
       return (
         <OptionComponent
+          {...(title && { title: label })}
           role='option'
           label={label}
           onMouseDown={(e) => {
diff --git a/packages/fuselage/src/components/Select/index.d.ts b/packages/fuselage/src/components/Select/index.d.ts
index c440409b5e..34d21cd407 100644
--- a/packages/fuselage/src/components/Select/index.d.ts
+++ b/packages/fuselage/src/components/Select/index.d.ts
@@ -11,3 +11,5 @@ type SelectProps = Omit<ComponentProps<typeof Box>, 'onChange'> & {
 };
 
 export const Select: ForwardRefExoticComponent<SelectProps>;
+
+export const MultiSelect: ForwardRefExoticComponent<SelectProps>;
diff --git a/packages/fuselage/src/components/SelectPaginated/PaginatedMultiSelect.js b/packages/fuselage/src/components/SelectPaginated/PaginatedMultiSelect.js
index be2dd9cc9f..b515de808c 100644
--- a/packages/fuselage/src/components/SelectPaginated/PaginatedMultiSelect.js
+++ b/packages/fuselage/src/components/SelectPaginated/PaginatedMultiSelect.js
@@ -12,7 +12,9 @@ import Margins from '../Margins';
 import { OptionsPaginated, useVisible } from '../OptionsPaginated';
 import { Focus, Addon } from '../Select';
 
-const SelectedOptions = React.memo((props) => <Chip {...props} />);
+const SelectedOptions = React.memo((props) => (
+  <Chip maxWidth='150px' withTruncatedText {...props} />
+));
 
 const prevent = (e) => {
   e.preventDefault();
@@ -21,6 +23,7 @@ const prevent = (e) => {
 };
 
 export const PaginatedMultiSelect = ({
+  withTitle,
   value,
   filter,
   options = [],
@@ -94,6 +97,11 @@ export const PaginatedMultiSelect = ({
                   />
                   {currentValue.map((value) => (
                     <SelectedOptions
+                      {...(withTitle && {
+                        title:
+                          value.label ||
+                          options.find((val) => val.value === value)?.label,
+                      })}
                       tabIndex={-1}
                       role='option'
                       key={value && value.value}
@@ -133,6 +141,7 @@ export const PaginatedMultiSelect = ({
       <AnimatedVisibility visibility={visible}>
         <Position anchor={containerRef}>
           <_Options
+            {...(withTitle && { title: withTitle })}
             width={borderBoxSize.inlineSize}
             onMouseDown={prevent}
             multiple
diff --git a/packages/fuselage/src/components/SelectPaginated/PaginatedSelect.js b/packages/fuselage/src/components/SelectPaginated/PaginatedSelect.js
index 883568964a..9b756666a1 100644
--- a/packages/fuselage/src/components/SelectPaginated/PaginatedSelect.js
+++ b/packages/fuselage/src/components/SelectPaginated/PaginatedSelect.js
@@ -50,6 +50,7 @@ const useDidUpdate = (func = []) => {
 
 export const PaginatedSelect = ({
   value,
+  withTitle,
   filter,
   setFilter,
   error,
@@ -59,6 +60,7 @@ export const PaginatedSelect = ({
   onChange = () => {},
   placeholder = '',
   renderOptions: _Options = OptionsPaginated,
+  endReached,
   ...props
 }) => {
   const [internalValue, setInternalValue] = useState(value);
@@ -144,11 +146,13 @@ export const PaginatedSelect = ({
       </Wrapper>
       <PositionAnimated visible={visible} anchor={containerRef}>
         <_Options
+          {...(withTitle && { title: withTitle })}
           width={borderBoxSize.inlineSize}
           role='listbox'
           filter={filter}
           options={options}
           onSelect={internalChangedByClick}
+          endReached={endReached}
         />
       </PositionAnimated>
     </Box>
diff --git a/packages/fuselage/src/components/SelectPaginated/SelectPaginated.stories.mdx b/packages/fuselage/src/components/SelectPaginated/SelectPaginated.stories.mdx
index a9a68ce265..6c831afc22 100644
--- a/packages/fuselage/src/components/SelectPaginated/SelectPaginated.stories.mdx
+++ b/packages/fuselage/src/components/SelectPaginated/SelectPaginated.stories.mdx
@@ -14,7 +14,10 @@ export const thumb =
   'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
 
 export const optionsEllipses = [
-  [11, 'Very very very very very very very very very large text'],
+  {
+    value: 1000,
+    label: 'Very very very very very very very very very large text',
+  },
   ...options,
 ];
 
@@ -37,6 +40,17 @@ An input for selection of options.
   </Story>
 </Canvas>
 
+<Canvas>
+  <Story name='WithTitle'>
+    <PaginatedSelect
+      withTitle
+      width='250px'
+      placeholder='Placeholder here...'
+      options={optionsEllipses}
+    />
+  </Story>
+</Canvas>
+
 <Canvas>
   <Story name='Error'>
     <PaginatedSelect
@@ -87,7 +101,7 @@ An input for selection of options.
   <Story name='Select with filter and ellipses'>
     <PaginatedSelectFiltered
       width='250px'
-      value={11}
+      value={1000}
       placeholder='Placeholder here...'
       options={optionsEllipses}
     />
@@ -125,7 +139,12 @@ An input for selection of options.
 
 <Canvas>
   <Story name='PaginatedMultiSelect'>
-    <PaginatedMultiSelect placeholder='Placeholder here...' options={options} />
+    <PaginatedMultiSelect
+      withTitle
+      placeholder='Placeholder here...'
+      value={[1000, 2, 3]}
+      options={optionsEllipses}
+    />
   </Story>
 </Canvas>
 
diff --git a/packages/icons/README.md b/packages/icons/README.md
index 6335c061f7..3b7348e0ee 100644
--- a/packages/icons/README.md
+++ b/packages/icons/README.md
@@ -53,6 +53,14 @@ yarn build
 
 <!--/yarn(build)-->
 
+After building, make sure to run at the root: 
+
+```sh
+yarn 
+
+yarn update-storybook
+```
+
 ### Linting
 
 To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
diff --git a/packages/image-manipulation/tsconfig.json b/packages/image-manipulation/tsconfig.json
index 4c812dbeeb..3d3be18538 100644
--- a/packages/image-manipulation/tsconfig.json
+++ b/packages/image-manipulation/tsconfig.json
@@ -9,6 +9,7 @@
     "sourceMap": true,
     "outDir": "./dist/esm",
     "strict": true,
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
diff --git a/packages/message-parser/src/utils.ts b/packages/message-parser/src/utils.ts
index 8fe1b3de45..5ea045bfd5 100644
--- a/packages/message-parser/src/utils.ts
+++ b/packages/message-parser/src/utils.ts
@@ -22,11 +22,6 @@ export const color = (r: number, g: number, b: number, a = 255): Color => ({
   value: { r, g, b, a },
 });
 
-export const emoji = (() => {
-  const fn = generate('EMOJI');
-  return (value: string) => fn(plain(value));
-})();
-
 export const heading = (
   value: Heading['value'],
   level: Heading['level'] = 1
@@ -89,6 +84,11 @@ export const mentionUser = (() => {
   return (value: string) => fn(plain(value));
 })();
 
+export const emoji = (() => {
+  const fn = generate('EMOJI');
+  return (value: string) => fn(plain(value));
+})();
+
 export const reducePlainTexts = (
   values: Paragraph['value']
 ): Paragraph['value'] =>
diff --git a/packages/onboarding-ui/.eslintignore b/packages/onboarding-ui/.eslintignore
new file mode 100644
index 0000000000..5066b993be
--- /dev/null
+++ b/packages/onboarding-ui/.eslintignore
@@ -0,0 +1,3 @@
+/node_modules
+/dist
+!/.storybook
diff --git a/packages/onboarding-ui/.eslintrc.js b/packages/onboarding-ui/.eslintrc.js
new file mode 100644
index 0000000000..d11c05a965
--- /dev/null
+++ b/packages/onboarding-ui/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: '@rocket.chat/eslint-config-alt/typescript',
+  env: {
+    jest: true,
+  },
+};
diff --git a/packages/onboarding-ui/.gitignore b/packages/onboarding-ui/.gitignore
new file mode 100644
index 0000000000..9f5dd2822c
--- /dev/null
+++ b/packages/onboarding-ui/.gitignore
@@ -0,0 +1,2 @@
+/.storybook/jest-results.json
+/dist
diff --git a/packages/onboarding-ui/.loki/reference/chrome_iphone7_MyComponent_My_Component.png b/packages/onboarding-ui/.loki/reference/chrome_iphone7_MyComponent_My_Component.png
new file mode 100644
index 0000000000..00fe269d5b
Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/chrome_iphone7_MyComponent_My_Component.png differ
diff --git a/packages/onboarding-ui/.loki/reference/chrome_laptop_MyComponent_My_Component.png b/packages/onboarding-ui/.loki/reference/chrome_laptop_MyComponent_My_Component.png
new file mode 100644
index 0000000000..9e441c748f
Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/chrome_laptop_MyComponent_My_Component.png differ
diff --git a/packages/onboarding-ui/.prettierignore b/packages/onboarding-ui/.prettierignore
new file mode 100644
index 0000000000..8225baa4a7
--- /dev/null
+++ b/packages/onboarding-ui/.prettierignore
@@ -0,0 +1,2 @@
+/node_modules
+/dist
diff --git a/packages/onboarding-ui/.prettierrc.js b/packages/onboarding-ui/.prettierrc.js
new file mode 100644
index 0000000000..b57f474edb
--- /dev/null
+++ b/packages/onboarding-ui/.prettierrc.js
@@ -0,0 +1 @@
+module.exports = require('@rocket.chat/prettier-config/fuselage');
diff --git a/packages/onboarding-ui/.storybook/logo.svg b/packages/onboarding-ui/.storybook/logo.svg
new file mode 100644
index 0000000000..6ae18fa4b9
--- /dev/null
+++ b/packages/onboarding-ui/.storybook/logo.svg
@@ -0,0 +1,47 @@
+<svg width="768" height="221" viewBox="0 0 768 221" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M687.178 68.3765H699.452V85.2808H710.808V96.4023H699.452V126.607H710.193V137.528C708.453 137.935 706.305 138.141 703.849 138.141C692.7 138.141 687.174 132.326 687.174 120.692V68.3765H687.178Z"
+		fill="#F5455C" />
+	<path
+		d="M663.995 92.7303V85.2809H676.268V136.708H663.995V129.259C662.255 134.259 656.017 137.83 647.526 137.83C640.265 137.83 634.123 135.28 629.111 130.179C624.2 124.973 621.744 118.65 621.744 110.994C621.744 103.339 624.2 97.0159 629.111 91.9107C634.123 86.7048 640.26 84.1545 647.526 84.1545C656.013 84.1591 662.255 87.7305 663.995 92.7303ZM660.309 122.221C663.38 119.263 664.913 115.486 664.913 110.999C664.913 106.512 663.38 102.735 660.309 99.7722C657.344 96.8145 653.557 95.2806 649.16 95.2806C644.763 95.2806 641.183 96.8099 638.213 99.7722C635.349 102.73 633.917 106.507 633.917 110.999C633.917 115.491 635.349 119.263 638.213 122.221C641.178 125.179 644.758 126.713 649.16 126.713C653.562 126.713 657.344 125.179 660.309 122.221Z"
+		fill="#F5455C" />
+	<path
+		d="M209.724 136.708V85.2808H221.896V92.9317C224.352 87.5243 229.979 84.2598 237.24 84.2598C238.672 84.2598 239.903 84.3605 240.922 84.5665V96.4023C239.388 96.0955 237.649 95.8941 235.808 95.8941C227.317 95.8941 221.896 101.201 221.896 109.671V136.713H209.724V136.708Z"
+		fill="#F5455C" />
+	<path
+		d="M243.992 110.995C243.992 103.339 246.755 96.8099 252.176 91.604C257.597 86.3981 264.248 83.7471 272.124 83.7471C280 83.7471 286.651 86.3981 292.072 91.604C297.493 96.8099 300.256 103.339 300.256 110.995C300.256 118.645 297.493 125.179 292.072 130.38C286.651 135.586 280 138.237 272.124 138.237C264.248 138.237 257.597 135.586 252.176 130.38C246.755 125.179 243.992 118.645 243.992 110.995ZM283.479 122.524C286.55 119.36 288.083 115.582 288.083 110.995C288.083 106.402 286.55 102.625 283.479 99.5662C280.409 96.4024 276.627 94.8731 272.124 94.8731C267.52 94.8731 263.738 96.4024 260.667 99.5662C257.702 102.629 256.165 106.402 256.165 110.995C256.165 115.587 257.698 119.36 260.667 122.524C263.738 125.587 267.52 127.116 272.124 127.116C276.627 127.116 280.409 125.587 283.479 122.524Z"
+		fill="#F5455C" />
+	<path
+		d="M351.3 88.852V101.095C346.903 96.9104 341.583 94.7676 335.446 94.7676C330.641 94.7676 326.647 96.2969 323.48 99.36C320.309 102.423 318.776 106.301 318.776 110.889C318.776 115.481 320.309 119.359 323.48 122.418C326.652 125.481 330.641 127.01 335.446 127.01C341.689 127.01 347.004 124.868 351.3 120.683V132.926C347.004 136.397 341.482 138.132 334.73 138.132C326.753 138.132 320.102 135.582 314.682 130.376C309.261 125.17 306.599 118.741 306.599 110.884C306.599 103.027 309.256 96.5991 314.682 91.3932C320.102 86.1873 326.753 83.637 334.73 83.637C341.377 83.6461 346.903 85.3814 351.3 88.852Z"
+		fill="#F5455C" />
+	<path
+		d="M360.407 136.708V68.3765H372.58V107.217L389.971 85.2762H403.883L384.344 109.868L405.517 136.703H391.197L372.58 112.927V136.703H360.407V136.708Z"
+		fill="#F5455C" />
+	<path
+		d="M405.824 110.994C405.824 102.931 408.28 96.4023 413.292 91.5031C418.304 86.5033 424.749 84.0537 432.524 84.0537C439.992 84.0537 446.028 86.5033 450.631 91.5031C455.336 96.4023 457.691 102.524 457.691 109.767C457.691 111.297 457.59 112.83 457.484 114.154H417.997C418.405 122.317 424.441 127.523 433.548 127.523C441.63 127.523 447.767 125.586 452.063 121.603V133.031C447.051 136.502 440.708 138.237 433.038 138.237C424.955 138.237 418.309 135.788 413.297 130.994C408.284 126.095 405.829 119.566 405.829 111.503V110.994H405.824ZM445.206 105.486C445.206 102.528 443.98 99.8729 441.525 97.7301C439.069 95.5873 436.104 94.4655 432.524 94.4655C428.737 94.4655 425.465 95.5873 422.706 97.7301C419.943 99.8729 418.511 102.423 418.309 105.486H445.206Z"
+		fill="#F5455C" />
+	<path
+		d="M466.944 68.3765H479.218V85.2808H490.573V96.4023H479.218V126.607H489.958V137.528C488.218 137.935 486.07 138.141 483.615 138.141C472.466 138.141 466.939 132.326 466.939 120.692V68.3765H466.944Z"
+		fill="#F5455C" />
+	<path
+		d="M502.713 123.215C498.642 123.215 495.342 126.493 495.342 130.536C495.342 134.579 498.642 137.857 502.713 137.857C506.785 137.857 510.085 134.579 510.085 130.536C510.085 126.493 506.785 123.215 502.713 123.215Z"
+		fill="#F5455C" />
+	<path
+		d="M558.22 88.852V101.095C553.823 96.9104 548.503 94.7676 542.366 94.7676C537.561 94.7676 533.567 96.2969 530.4 99.36C527.229 102.423 525.696 106.301 525.696 110.889C525.696 115.481 527.229 119.359 530.4 122.418C533.572 125.481 537.561 127.01 542.366 127.01C548.604 127.01 553.924 124.868 558.22 120.683V132.926C553.924 136.397 548.402 138.132 541.65 138.132C533.673 138.132 527.022 135.582 521.601 130.376C516.181 125.17 513.519 118.741 513.519 110.884C513.519 103.027 516.176 96.5991 521.601 91.3932C527.022 86.1873 533.673 83.637 541.65 83.637C548.297 83.6461 553.823 85.3814 558.22 88.852Z"
+		fill="#F5455C" />
+	<path
+		d="M567.326 136.708V68.3765H579.499V92.4234C581.853 87.5243 587.476 84.2597 594.535 84.2597C606.4 84.2597 613.359 92.1167 613.359 104.873V136.708H601.186V106.603C601.186 99.5615 597.399 95.1752 590.854 95.1752C584.203 95.1752 579.499 100.074 579.499 107.112V136.703H567.326V136.708Z"
+		fill="#F5455C" />
+	<path
+		d="M174.643 91.8055C171.307 86.6179 166.629 82.0255 160.75 78.152C149.39 70.6796 134.463 66.5635 118.72 66.5635C113.46 66.5635 108.277 67.0213 103.247 67.9279C100.126 64.9197 96.4767 62.2138 92.612 60.0755C78.273 52.9191 65.6323 55.5885 59.2477 57.8824C57.1501 58.6378 56.5029 61.298 58.0543 62.896C62.557 67.5479 70.0065 76.7418 68.1751 85.1023C61.0515 92.3824 57.1914 101.155 57.1914 110.289C57.1914 119.598 61.0515 128.37 68.1705 135.646C70.0019 144.006 62.5525 153.205 58.0497 157.857C56.5029 159.455 57.1455 162.11 59.2431 162.866C65.6277 165.164 78.2638 167.834 92.6074 160.677C96.4721 158.539 100.121 155.833 103.242 152.825C108.273 153.731 113.455 154.189 118.715 154.189C134.463 154.189 149.39 150.078 160.745 142.605C166.625 138.732 171.302 134.144 174.639 128.952C178.357 123.174 180.239 116.951 180.239 110.468C180.243 103.801 178.357 97.5883 174.643 91.8055ZM118.077 143.397C111.27 143.397 104.78 142.518 98.8635 140.93L94.5398 145.092C92.1897 147.353 89.4358 149.4 86.5625 151.012C82.7574 152.875 78.9982 153.896 75.2804 154.203C75.4915 153.823 75.6843 153.438 75.8908 153.054C80.2237 145.087 81.3942 137.926 79.3975 131.575C72.3107 126.003 68.0604 118.87 68.0604 111.1C68.0604 93.266 90.4547 78.8067 118.077 78.8067C145.699 78.8067 168.098 93.266 168.098 111.1C168.094 128.943 145.699 143.397 118.077 143.397Z"
+		fill="#F5455C" />
+	<path
+		d="M94.1449 103.678C90.0736 103.678 86.7734 106.956 86.7734 110.999C86.7734 115.042 90.0736 118.32 94.1449 118.32C98.2162 118.32 101.516 115.042 101.516 110.999C101.516 106.956 98.2162 103.678 94.1449 103.678Z"
+		fill="#F5455C" />
+	<path
+		d="M117.875 103.678C113.804 103.678 110.504 106.956 110.504 110.999C110.504 115.042 113.804 118.32 117.875 118.32C121.947 118.32 125.247 115.042 125.247 110.999C125.247 106.956 121.947 103.678 117.875 103.678Z"
+		fill="#F5455C" />
+	<path
+		d="M141.605 103.678C137.534 103.678 134.233 106.956 134.233 110.999C134.233 115.042 137.534 118.32 141.605 118.32C145.676 118.32 148.976 115.042 148.976 110.999C148.976 106.956 145.672 103.678 141.605 103.678Z"
+		fill="#F5455C" />
+</svg>
diff --git a/packages/onboarding-ui/.storybook/logo.svg.d.ts b/packages/onboarding-ui/.storybook/logo.svg.d.ts
new file mode 100644
index 0000000000..27c0914b23
--- /dev/null
+++ b/packages/onboarding-ui/.storybook/logo.svg.d.ts
@@ -0,0 +1,3 @@
+declare const path: string;
+
+export = path;
diff --git a/packages/onboarding-ui/.storybook/main.ts b/packages/onboarding-ui/.storybook/main.ts
new file mode 100644
index 0000000000..9c7cce1c74
--- /dev/null
+++ b/packages/onboarding-ui/.storybook/main.ts
@@ -0,0 +1,7 @@
+module.exports = {
+  addons: ['@storybook/addon-essentials'],
+  stories: ['../src/**/*.stories.tsx'],
+  features: {
+    postcss: false,
+  },
+};
diff --git a/packages/onboarding-ui/.storybook/manager.ts b/packages/onboarding-ui/.storybook/manager.ts
new file mode 100644
index 0000000000..15f19a1a23
--- /dev/null
+++ b/packages/onboarding-ui/.storybook/manager.ts
@@ -0,0 +1,17 @@
+import colorTokens from '@rocket.chat/fuselage-tokens/colors.json';
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming';
+
+import manifest from '../package.json';
+import logo from './logo.svg';
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: manifest.name,
+    brandImage: logo,
+    brandUrl: manifest.homepage,
+    colorPrimary: colorTokens.n500,
+    colorSecondary: colorTokens.b500,
+  }),
+});
diff --git a/packages/onboarding-ui/.storybook/preview-head.html b/packages/onboarding-ui/.storybook/preview-head.html
new file mode 100644
index 0000000000..fda57d2749
--- /dev/null
+++ b/packages/onboarding-ui/.storybook/preview-head.html
@@ -0,0 +1,6 @@
+<style>
+body {
+  margin: 0;
+  padding: 16px;
+}
+</style>
diff --git a/packages/onboarding-ui/.storybook/preview.ts b/packages/onboarding-ui/.storybook/preview.ts
new file mode 100644
index 0000000000..b74b6e0b33
--- /dev/null
+++ b/packages/onboarding-ui/.storybook/preview.ts
@@ -0,0 +1,22 @@
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+import { addParameters } from '@storybook/react';
+import 'loki/configure-react';
+import '@rocket.chat/icons/dist/rocketchat.css';
+import '@rocket.chat/fuselage-polyfills';
+
+addParameters({
+  backgrounds: {
+    grid: {
+      cellSize: 4,
+      cellAmount: 4,
+      opacity: 0.5,
+    },
+  },
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },
+  options: {
+    storySort: ([, a], [, b]) => a.kind.localeCompare(b.kind),
+  },
+});
diff --git a/packages/onboarding-ui/CHANGELOG.md b/packages/onboarding-ui/CHANGELOG.md
new file mode 100644
index 0000000000..29aa6317f9
--- /dev/null
+++ b/packages/onboarding-ui/CHANGELOG.md
@@ -0,0 +1,38 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.26.0](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.25.0...v0.26.0) (2021-05-28)
+
+**Note:** Version bump only for package @rocket.chat/string-helpers
+
+
+
+
+
+# [0.25.0](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.24.0...v0.25.0) (2021-05-19)
+
+
+### Bug Fixes
+
+* **fuselage:** fix duplicated values on paginated multi select ([#456](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/456)) ([4518a4e](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/4518a4e661cb525d957f6140d59a641a50fc7b20))
+* **string-helpers:** Wrong typesVersions declaration ([256758c](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/256758c60ff8ed5ec7d86ff027ad3ea82f84aaf6))
+* Location in typesVersions field ([#449](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/449)) ([491f98b](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/491f98b8cbc5e30f73adde377965f79fe565438b))
+
+
+### Features
+
+* [@rocket](https://github.com/rocket).chat/message-parser ([#443](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/443)) ([4722cdf](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/4722cdff46f5987f335d989be59649c7652bb12a))
+* Peggy loader ([#450](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/450)) ([0496cad](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/0496cad457d76f8a4d6a217209e4a55e315e8365))
+
+
+
+
+
+# [0.24.0](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.23.0...v0.24.0) (2021-04-28)
+
+
+### Features
+
+* [@rocket](https://github.com/rocket).chat/string-helpers ([#431](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/431)) ([2509d6a](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/2509d6acdbe5ec8b216e8d4430373797c5f5dfe2))
diff --git a/packages/onboarding-ui/README.md b/packages/onboarding-ui/README.md
new file mode 100644
index 0000000000..d3c1e9db67
--- /dev/null
+++ b/packages/onboarding-ui/README.md
@@ -0,0 +1,91 @@
+<!--header-->
+
+<p align="center">
+  <a href="https://rocket.chat" title="Rocket.Chat">
+    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
+  </a>
+</p>
+
+# `@rocket.chat/onboarding-ui`
+
+> Set of components and functions for the onboarding experience on Rocket.Chat
+
+---
+
+![npm@latest](https://img.shields.io/npm/v/@rocket.chat/onboarding-ui/latest?style=flat-square) ![npm@next](https://img.shields.io/npm/v/@rocket.chat/onboarding-ui/next?style=flat-square) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/onboarding-ui?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/onboarding-ui?style=flat-square)
+
+![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fonboarding-ui&style=flat-square) ![peer deps](https://img.shields.io/david/peer/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fonboarding-ui&style=flat-square) ![dev deps](https://img.shields.io/david/dev/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fonboarding-ui&style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/onboarding-ui?style=flat-square)
+
+<!--/header-->
+
+## Install
+
+<!--install-->
+
+Add `@rocket.chat/onboarding-ui` as a dependency:
+
+```sh
+npm i @rocket.chat/onboarding-ui
+
+# or, if you are using yarn:
+
+yarn add @rocket.chat/onboarding-ui
+```
+
+<!--/install-->
+
+## Contributing
+
+<!--contributing(msg)-->
+
+Contributions, issues, and feature requests are welcome!<br />
+Feel free to check the [issues](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
+
+<!--/contributing(msg)-->
+
+### Building
+
+As this package dependends on others in this monorepo, before anything run the following at the root directory:
+
+<!--yarn(build)-->
+
+```sh
+yarn build
+```
+
+<!--/yarn(build)-->
+
+### Linting
+
+To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
+Before commiting, check if your code fits our style by running:
+
+<!--yarn(lint)-->
+
+```sh
+yarn lint
+```
+
+<!--/yarn(lint)-->
+
+Some linter warnings and errors can be automatically fixed:
+
+<!--yarn(lint-fix)-->
+
+```sh
+yarn lint-fix
+```
+
+<!--/yarn(lint-fix)-->
+
+### Running tests
+
+Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:
+
+<!--yarn(test)-->
+
+```sh
+yarn test
+```
+
+<!--/yarn(test)-->
diff --git a/packages/onboarding-ui/babel.config.js b/packages/onboarding-ui/babel.config.js
new file mode 100644
index 0000000000..04d5a5be5c
--- /dev/null
+++ b/packages/onboarding-ui/babel.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+  ],
+};
diff --git a/packages/onboarding-ui/jest.config.js b/packages/onboarding-ui/jest.config.js
new file mode 100644
index 0000000000..aba24c1c97
--- /dev/null
+++ b/packages/onboarding-ui/jest.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+  preset: 'ts-jest',
+  errorOnDeprecated: true,
+  testMatch: ['<rootDir>/src/**/*.spec.[jt]s?(x)'],
+  globals: {
+    'ts-jest': {
+      tsconfig: {
+        noUnusedLocals: false,
+        noUnusedParameters: false,
+      },
+    },
+  },
+};
diff --git a/packages/onboarding-ui/package.json b/packages/onboarding-ui/package.json
new file mode 100644
index 0000000000..9137bae7b1
--- /dev/null
+++ b/packages/onboarding-ui/package.json
@@ -0,0 +1,102 @@
+{
+  "name": "@rocket.chat/onboarding-ui",
+  "version": "0.26.0",
+  "description": "Set of components and functions for the onboarding experience on Rocket.Chat",
+  "keywords": [
+    "rocketchat"
+  ],
+  "author": {
+    "name": "Rocket.Chat",
+    "url": "https://rocket.chat/"
+  },
+  "homepage": "https://github.com/RocketChat/Rocket.Chat.Fuselage#readme",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RocketChat/Rocket.Chat.Fuselage.git",
+    "directory": "packages/onboarding-ui"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts3.4/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "build": "run-s .:build:clean .:build:esm .:build:cjs .:build:ts3.4",
+    ".:build:clean": "rimraf dist",
+    ".:build:esm": "tsc -p tsconfig-esm.json",
+    ".:build:cjs": "tsc -p tsconfig-cjs.json",
+    ".:build:ts3.4": "downlevel-dts dist/esm/ dist/ts3.4/ --to=3.4",
+    "lint": "eslint src",
+    "lint-fix": "eslint --fix src",
+    "lint-staged": "lint-staged",
+    "test": "jest --runInBand",
+    "docs": "typedoc",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "update-storybook": "run-s .:update-storybook:build-storybook .:update-storybook:loki-update",
+    ".:update-storybook:build-storybook": "run-s build-storybook",
+    ".:update-storybook:loki-update": "loki update --chromeDockerImage=chinello/alpine-chrome:latest --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
+    "loki:test": "loki test --chromeDockerImage=chinello/alpine-chrome:latest --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static"
+  },
+  "bugs": {
+    "url": "https://github.com/RocketChat/Rocket.Chat.Fuselage/issues"
+  },
+  "devDependencies": {
+    "@rocket.chat/eslint-config-alt": "^0.26.0",
+    "@rocket.chat/fuselage-tokens": "workspace:packages/fuselage-tokens",
+    "@rocket.chat/prettier-config": "^0.26.0",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addons": "^6.2.9",
+    "@storybook/react": "^6.2.9",
+    "@storybook/source-loader": "^6.2.9",
+    "@storybook/theming": "^6.2.9",
+    "@types/jest": "^26.0.23",
+    "@types/react": "^17.0.8",
+    "@types/react-dom": "^17.0.5",
+    "downlevel-dts": "^0.7.0",
+    "eslint": "^7.26.0",
+    "jest": "^26.6.3",
+    "lint-staged": "^11.0.0",
+    "loki": "^0.28.1",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.2.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^26.5.6",
+    "typedoc": "^0.20.36",
+    "typescript": "^4.2.4"
+  },
+  "dependencies": {
+    "@rocket.chat/fuselage": "workspace:packages/fuselage",
+    "@rocket.chat/fuselage-hooks": "workspace:packages/fuselage-hooks",
+    "@rocket.chat/fuselage-polyfills": "workspace:packages/fuselage-polyfills",
+    "@rocket.chat/icons": "workspace:packages/icons",
+    "tslib": "^2.2.0"
+  },
+  "peerDependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "loki": {
+    "configurations": {
+      "chrome.laptop": {
+        "target": "chrome.docker",
+        "width": 1366,
+        "height": 768,
+        "deviceScaleFactor": 1,
+        "mobile": false,
+        "fitWindow": false
+      },
+      "chrome.iphone7": {
+        "target": "chrome.docker",
+        "preset": "iPhone 7"
+      }
+    }
+  }
+}
diff --git a/packages/onboarding-ui/src/MyComponent.spec.tsx b/packages/onboarding-ui/src/MyComponent.spec.tsx
new file mode 100644
index 0000000000..0ae56d0765
--- /dev/null
+++ b/packages/onboarding-ui/src/MyComponent.spec.tsx
@@ -0,0 +1,9 @@
+import ReactDOM from 'react-dom';
+
+import MyComponent from './MyComponent';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<MyComponent />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/packages/onboarding-ui/src/MyComponent.stories.tsx b/packages/onboarding-ui/src/MyComponent.stories.tsx
new file mode 100644
index 0000000000..3ed6c3f27b
--- /dev/null
+++ b/packages/onboarding-ui/src/MyComponent.stories.tsx
@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+
+import MyComponent from './MyComponent';
+
+export default {
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+export const _MyComponent = (): ReactElement => <MyComponent />;
diff --git a/packages/onboarding-ui/src/MyComponent.tsx b/packages/onboarding-ui/src/MyComponent.tsx
new file mode 100644
index 0000000000..5657043ec4
--- /dev/null
+++ b/packages/onboarding-ui/src/MyComponent.tsx
@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+
+const MyComponent = (): ReactElement => <div>Hello, World!</div>;
+
+export default MyComponent;
diff --git a/packages/onboarding-ui/src/common/.gitignore b/packages/onboarding-ui/src/common/.gitignore
new file mode 100644
index 0000000000..d6b7ef32c8
--- /dev/null
+++ b/packages/onboarding-ui/src/common/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/packages/onboarding-ui/src/emails/.gitignore b/packages/onboarding-ui/src/emails/.gitignore
new file mode 100644
index 0000000000..d6b7ef32c8
--- /dev/null
+++ b/packages/onboarding-ui/src/emails/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/packages/onboarding-ui/src/forms/.gitignore b/packages/onboarding-ui/src/forms/.gitignore
new file mode 100644
index 0000000000..d6b7ef32c8
--- /dev/null
+++ b/packages/onboarding-ui/src/forms/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/packages/onboarding-ui/src/index.ts b/packages/onboarding-ui/src/index.ts
new file mode 100644
index 0000000000..a68cfe323f
--- /dev/null
+++ b/packages/onboarding-ui/src/index.ts
@@ -0,0 +1 @@
+export { default as MyComponent } from './MyComponent';
diff --git a/packages/onboarding-ui/src/pages/.gitignore b/packages/onboarding-ui/src/pages/.gitignore
new file mode 100644
index 0000000000..d6b7ef32c8
--- /dev/null
+++ b/packages/onboarding-ui/src/pages/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/packages/onboarding-ui/tsconfig-cjs.json b/packages/onboarding-ui/tsconfig-cjs.json
new file mode 100644
index 0000000000..94db2d7e97
--- /dev/null
+++ b/packages/onboarding-ui/tsconfig-cjs.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "./dist/cjs"
+  },
+  "exclude": ["./**/*.stories.tsx", "./**/*.spec.tsx"]
+}
diff --git a/packages/onboarding-ui/tsconfig-esm.json b/packages/onboarding-ui/tsconfig-esm.json
new file mode 100644
index 0000000000..5201be01de
--- /dev/null
+++ b/packages/onboarding-ui/tsconfig-esm.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["./**/*.stories.tsx", "./**/*.spec.tsx"]
+}
diff --git a/packages/onboarding-ui/tsconfig.json b/packages/onboarding-ui/tsconfig.json
new file mode 100644
index 0000000000..0c9ff42708
--- /dev/null
+++ b/packages/onboarding-ui/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "target": "es5",
+    "module": "ESNext",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist/esm",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "react-jsx"
+  }
+}
diff --git a/packages/onboarding-ui/typedoc.json b/packages/onboarding-ui/typedoc.json
new file mode 100644
index 0000000000..2c42f9dfd6
--- /dev/null
+++ b/packages/onboarding-ui/typedoc.json
@@ -0,0 +1,6 @@
+{
+  "entryPoints": [
+    "src/index.ts"
+  ],
+  "out": "../../static/onboarding-ui"
+}
diff --git a/packages/string-helpers/package.json b/packages/string-helpers/package.json
index c1b65f4bc3..2d376327ad 100644
--- a/packages/string-helpers/package.json
+++ b/packages/string-helpers/package.json
@@ -22,11 +22,11 @@
   },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/ts3.4/index.d.ts",
+  "types": "dist/esm/index.d.ts",
   "typesVersions": {
-    ">=4.1": {
+    "<4.1": {
       "*": [
-        "dist/esm/*"
+        "dist/ts3.4/*"
       ]
     }
   },
diff --git a/packages/ui-kit/src/index.ts b/packages/ui-kit/src/index.ts
index a32e29ec88..c0fb2f9af3 100644
--- a/packages/ui-kit/src/index.ts
+++ b/packages/ui-kit/src/index.ts
@@ -42,10 +42,15 @@ export { BlockContext } from './rendering/BlockContext';
 
 export * from './blocks/deprecations';
 
+export { uiKitAttachment } from './rendering/surfaces/uiKitAttachment';
 export { uiKitBanner } from './rendering/surfaces/uiKitBanner';
 export { uiKitMessage } from './rendering/surfaces/uiKitMessage';
 export { uiKitModal } from './rendering/surfaces/uiKitModal';
 
+export {
+  UiKitParserAttachment,
+  AttachmentSurfaceLayout,
+} from './rendering/surfaces/UiKitParserAttachment';
 export {
   UiKitParserBanner,
   BannerSurfaceLayout,
diff --git a/packages/ui-kit/src/rendering/surfaces/UiKitParserAttachment.spec.ts b/packages/ui-kit/src/rendering/surfaces/UiKitParserAttachment.spec.ts
new file mode 100644
index 0000000000..81b301bd0e
--- /dev/null
+++ b/packages/ui-kit/src/rendering/surfaces/UiKitParserAttachment.spec.ts
@@ -0,0 +1,1473 @@
+import { uiKitAttachment, UiKitParserAttachment } from '../..';
+import { BlockContext } from '../BlockContext';
+
+class TestParser extends UiKitParserAttachment<unknown> {
+  plain_text = (element: any, context: any, index: any): any => ({
+    component: 'text',
+    props: {
+      key: index,
+      children: element.text,
+      emoji: element.emoji,
+      block: context === BlockContext.BLOCK,
+    },
+  });
+
+  mrkdwn = (element: any, context: any, index: any): any => ({
+    component: 'markdown',
+    props: {
+      key: index,
+      children: element.text,
+      verbatim: Boolean(element.verbatim),
+      block: context === BlockContext.BLOCK,
+    },
+  });
+
+  divider = (_element: any, context: any, index: any): any => ({
+    component: 'divider',
+    props: {
+      key: index,
+      block: context === BlockContext.BLOCK,
+    },
+  });
+
+  section = (element: any, context: any, index: any): any => {
+    let key = 0;
+    return {
+      component: 'section',
+      props: {
+        key: index,
+        children: [
+          ...(element.text
+            ? [this.text(element.text, BlockContext.SECTION, key++)]
+            : []),
+          ...(element.fields?.map((field: any) =>
+            this.text(field, BlockContext.SECTION, key++)
+          ) ?? []),
+          ...(element.accessory
+            ? [
+                this.renderAccessories(
+                  element.accessory,
+                  BlockContext.SECTION,
+                  undefined,
+                  key++
+                ),
+              ]
+            : []),
+        ],
+        block: context === BlockContext.BLOCK,
+      },
+    };
+  };
+
+  actions = (element: any, context: any, index: any): any => ({
+    component: 'actions',
+    props: {
+      key: index,
+      children: element.elements.map((element: any, key: number) =>
+        this.renderActions(element, BlockContext.ACTION, undefined, key)
+      ),
+      block: context === BlockContext.BLOCK,
+    },
+  });
+
+  context = (element: any, context: any, index: any): any => ({
+    component: 'context',
+    props: {
+      key: index,
+      children: element.elements.map((element: any, key: number) =>
+        this.renderContext(element, BlockContext.CONTEXT, undefined, key)
+      ),
+      block: context === BlockContext.BLOCK,
+    },
+  });
+
+  button = (element: any, context: any, index: any): any => ({
+    component: 'button',
+    props: {
+      key: index,
+      children: element.text
+        ? [this.text(element.text, BlockContext.SECTION, 0)]
+        : [],
+      ...(element.url && { href: element.url }),
+      ...(element.value && { value: element.value }),
+      variant: element.style ?? 'normal',
+      block: context === BlockContext.BLOCK,
+    },
+  });
+
+  image = (element: any, context: any, index: any): any => {
+    if (context === BlockContext.BLOCK) {
+      let key = 0;
+      return {
+        component: 'image-container',
+        props: {
+          key: index,
+          children: [
+            {
+              component: 'image',
+              props: {
+                key: key++,
+                src: element.imageUrl,
+                alt: element.altText,
+                block: false,
+              },
+            },
+            ...(element.title
+              ? [this.plainText(element.title, -1, key++)]
+              : []),
+          ],
+          block: true,
+        },
+      };
+    }
+
+    return {
+      component: 'image',
+      props: {
+        key: index,
+        src: element.imageUrl,
+        alt: element.altText,
+        block: false,
+      },
+    };
+  };
+
+  overflow = (element: any, _context: any, index: any): any => ({
+    component: 'menu',
+    props: {
+      key: index,
+      children: element.options.map((option: any, key: any) => ({
+        component: 'menu-item',
+        props: {
+          key,
+          children: [
+            this.text(option.text, -1, 0),
+            ...(option.description
+              ? [this.plainText(option.description, -1, 1)]
+              : []),
+          ],
+          value: option.value,
+          ...(option.url && { url: option.url }),
+        },
+      })),
+    },
+  });
+
+  datePicker = (element: any, _context: any, index: any): any => ({
+    component: 'input',
+    props: {
+      key: index,
+      type: 'date',
+      ...(element.placeholder && {
+        placeholder: this.text(element.placeholder, -1, 0),
+      }),
+      ...(element.initialDate && { defaultValue: element.initialDate }),
+    },
+  });
+
+  staticSelect = (element: any, _context: any, index: any): any => ({
+    component: 'select',
+    props: {
+      key: index,
+      ...(element.placeholder && {
+        placeholder: this.text(element.placeholder, -1, 0),
+      }),
+      children: element.options.map((option: any, key: any) => ({
+        component: 'option',
+        props: {
+          key,
+          children: this.text(option.text, -1, 0),
+          value: option.value,
+          ...(option.description && {
+            description: this.text(option.description, -1, 0),
+          }),
+        },
+      })),
+      ...(element.initialOption && {
+        defaultValue: element.options.find(
+          (option: any) => option.value === element.initialOption.value
+        )?.value,
+      }),
+    },
+  });
+
+  multiStaticSelect = (element: any, _context: any, index: any): any => ({
+    component: 'select',
+    props: {
+      key: index,
+      ...(element.placeholder && {
+        placeholder: this.text(element.placeholder, -1, 0),
+      }),
+      multiple: true,
+      children: element.options.map((option: any, key: any) => ({
+        component: 'option',
+        props: {
+          key,
+          children: this.text(option.text, -1, 0),
+          value: option.value,
+          ...(option.description && {
+            description: this.text(option.description, -1, 0),
+          }),
+        },
+      })),
+      ...(element.initialOptions && {
+        defaultValue: element.options
+          .filter((option: any) =>
+            element.initialOptions.some(
+              (initialOption: any) => option.value === initialOption.value
+            )
+          )
+          .map((option: any) => option.value),
+      }),
+    },
+  });
+}
+
+const parser = new TestParser();
+const parse = uiKitAttachment(parser);
+
+const conditionalParse = uiKitAttachment(parser, {
+  engine: 'rocket.chat',
+});
+
+describe('divider', () => {
+  it('renders', () => {
+    const payload = [
+      {
+        type: 'divider',
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'divider',
+        props: {
+          key: 0,
+          block: true,
+        },
+      },
+    ]);
+  });
+});
+
+describe('section', () => {
+  it('renders text as plain_text', () => {
+    const payload = [
+      {
+        type: 'section',
+        text: {
+          type: 'plain_text',
+          text: 'This is a plain text section block.',
+          emoji: true,
+        },
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'section',
+        props: {
+          key: 0,
+          children: [
+            {
+              component: 'text',
+              props: {
+                key: 0,
+                children: 'This is a plain text section block.',
+                emoji: true,
+                block: false,
+              },
+            },
+          ],
+          block: true,
+        },
+      },
+    ]);
+  });
+
+  it('render text as mrkdwn', () => {
+    const payload = [
+      {
+        type: 'section',
+        text: {
+          type: 'mrkdwn',
+          text:
+            'This is a mrkdwn section block :ghost: *this is bold*, and ~this is crossed out~, and <https://google.com|this is a link>',
+        },
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'section',
+        props: {
+          key: 0,
+          children: [
+            {
+              component: 'markdown',
+              props: {
+                key: 0,
+                children:
+                  'This is a mrkdwn section block :ghost: *this is bold*, and ~this is crossed out~, and <https://google.com|this is a link>',
+                verbatim: false,
+                block: false,
+              },
+            },
+          ],
+          block: true,
+        },
+      },
+    ]);
+  });
+
+  it('renders text fields', () => {
+    const payload = [
+      {
+        type: 'section',
+        fields: [
+          {
+            type: 'plain_text',
+            text: '*this is plain_text text*',
+            emoji: true,
+          },
+          {
+            type: 'plain_text',
+            text: '*this is plain_text text*',
+            emoji: true,
+          },
+          {
+            type: 'plain_text',
+            text: '*this is plain_text text*',
+            emoji: true,
+          },
+          {
+            type: 'plain_text',
+            text: '*this is plain_text text*',
+            emoji: true,
+          },
+          {
+            type: 'plain_text',
+            text: '*this is plain_text text*',
+            emoji: true,
+          },
+        ],
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'section',
+        props: {
+          key: 0,
+          block: true,
+          children: [
+            {
+              component: 'text',
+              props: {
+                key: 0,
+                children: '*this is plain_text text*',
+                emoji: true,
+                block: false,
+              },
+            },
+            {
+              component: 'text',
+              props: {
+                key: 1,
+                children: '*this is plain_text text*',
+                emoji: true,
+                block: false,
+              },
+            },
+            {
+              component: 'text',
+              props: {
+                key: 2,
+                children: '*this is plain_text text*',
+                emoji: true,
+                block: false,
+              },
+            },
+            {
+              component: 'text',
+              props: {
+                key: 3,
+                children: '*this is plain_text text*',
+                emoji: true,
+                block: false,
+              },
+            },
+            {
+              component: 'text',
+              props: {
+                key: 4,
+                children: '*this is plain_text text*',
+                emoji: true,
+                block: false,
+              },
+            },
+          ],
+        },
+      },
+    ]);
+  });
+
+  it('renders accessory as button', () => {
+    const payload = [
+      {
+        type: 'section',
+        text: {
+          type: 'mrkdwn',
+          text: 'This is a section block with a button.',
+        },
+        accessory: {
+          type: 'button',
+          text: {
+            type: 'plain_text',
+            text: 'Click Me',
+            emoji: true,
+          },
+          value: 'click_me_123',
+        },
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'section',
+        props: {
+          key: 0,
+          block: true,
+          children: [
+            {
+              component: 'markdown',
+              props: {
+                key: 0,
+                children: 'This is a section block with a button.',
+                verbatim: false,
+                block: false,
+              },
+            },
+            {
+              component: 'button',
+              props: {
+                key: 1,
+                children: [
+                  {
+                    component: 'text',
+                    props: {
+                      key: 0,
+                      children: 'Click Me',
+                      emoji: true,
+                      block: false,
+                    },
+                  },
+                ],
+                value: 'click_me_123',
+                variant: 'normal',
+                block: false,
+              },
+            },
+          ],
+        },
+      },
+    ]);
+  });
+
+  it('renders accessory as image', () => {
+    const payload = [
+      {
+        type: 'section',
+        text: {
+          type: 'mrkdwn',
+          text: 'This is a section block with an accessory image.',
+        },
+        accessory: {
+          type: 'image',
+          imageUrl:
+            'https://pbs.twimg.com/profile_images/625633822235693056/lNGUneLX_400x400.jpg',
+          altText: 'cute cat',
+        },
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'section',
+        props: {
+          key: 0,
+          block: true,
+          children: [
+            {
+              component: 'markdown',
+              props: {
+                key: 0,
+                children: 'This is a section block with an accessory image.',
+                verbatim: false,
+                block: false,
+              },
+            },
+            {
+              component: 'image',
+              props: {
+                key: 1,
+                src:
+                  'https://pbs.twimg.com/profile_images/625633822235693056/lNGUneLX_400x400.jpg',
+                alt: 'cute cat',
+                block: false,
+              },
+            },
+          ],
+        },
+      },
+    ]);
+  });
+
+  it('renders accessory as overflow menu', () => {
+    const payload = [
+      {
+        type: 'section',
+        text: {
+          type: 'mrkdwn',
+          text: 'This is a section block with an overflow menu.',
+        },
+        accessory: {
+          type: 'overflow',
+          options: [
+            {
+              text: {
+                type: 'plain_text',
+                text: '*this is plain_text text*',
+                emoji: true,
+              },
+              value: 'value-0',
+            },
+            {
+              text: {
+                type: 'plain_text',
+                text: '*this is plain_text text*',
+                emoji: true,
+              },
+              value: 'value-1',
+            },
+            {
+              text: {
+                type: 'plain_text',
+                text: '*this is plain_text text*',
+                emoji: true,
+              },
+              value: 'value-2',
+            },
+            {
+              text: {
+                type: 'plain_text',
+                text: '*this is plain_text text*',
+                emoji: true,
+              },
+              value: 'value-3',
+            },
+            {
+              text: {
+                type: 'plain_text',
+                text: '*this is plain_text text*',
+                emoji: true,
+              },
+              value: 'value-4',
+            },
+          ],
+        },
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'section',
+        props: {
+          key: 0,
+          block: true,
+          children: [
+            {
+              component: 'markdown',
+              props: {
+                key: 0,
+                children: 'This is a section block with an overflow menu.',
+                verbatim: false,
+                block: false,
+              },
+            },
+            {
+              component: 'menu',
+              props: {
+                key: 1,
+                children: [
+                  {
+                    component: 'menu-item',
+                    props: {
+                      key: 0,
+                      children: [
+                        {
+                          component: 'text',
+                          props: {
+                            key: 0,
+                            children: '*this is plain_text text*',
+                            emoji: true,
+                            block: false,
+                          },
+                        },
+                      ],
+                      value: 'value-0',
+                    },
+                  },
+                  {
+                    component: 'menu-item',
+                    props: {
+                      key: 1,
+                      children: [
+                        {
+                          component: 'text',
+                          props: {
+                            key: 0,
+                            children: '*this is plain_text text*',
+                            emoji: true,
+                            block: false,
+                          },
+                        },
+                      ],
+                      value: 'value-1',
+                    },
+                  },
+                  {
+                    component: 'menu-item',
+                    props: {
+                      key: 2,
+                      children: [
+                        {
+                          component: 'text',
+                          props: {
+                            key: 0,
+                            children: '*this is plain_text text*',
+                            emoji: true,
+                            block: false,
+                          },
+                        },
+                      ],
+                      value: 'value-2',
+                    },
+                  },
+                  {
+                    component: 'menu-item',
+                    props: {
+                      key: 3,
+                      children: [
+                        {
+                          component: 'text',
+                          props: {
+                            key: 0,
+                            children: '*this is plain_text text*',
+                            emoji: true,
+                            block: false,
+                          },
+                        },
+                      ],
+                      value: 'value-3',
+                    },
+                  },
+                  {
+                    component: 'menu-item',
+                    props: {
+                      key: 4,
+                      children: [
+                        {
+                          component: 'text',
+                          props: {
+                            key: 0,
+                            children: '*this is plain_text text*',
+                            emoji: true,
+                            block: false,
+                          },
+                        },
+                      ],
+                      value: 'value-4',
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ]);
+  });
+
+  it('renders accessory as datepicker', () => {
+    const payload = [
+      {
+        type: 'section',
+        text: {
+          type: 'mrkdwn',
+          text: 'Pick a date for the deadline.',
+        },
+        accessory: {
+          type: 'datepicker',
+          initial_date: '1990-04-28',
+          placeholder: {
+            type: 'plain_text',
+            text: 'Select a date',
+            emoji: true,
+          },
+        },
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'section',
+        props: {
+          key: 0,
+          block: true,
+          children: [
+            {
+              component: 'markdown',
+              props: {
+                key: 0,
+                children: 'Pick a date for the deadline.',
+                verbatim: false,
+                block: false,
+              },
+            },
+            {
+              component: 'input',
+              props: {
+                key: 1,
+                type: 'date',
+                placeholder: {
+                  component: 'text',
+                  props: {
+                    key: 0,
+                    children: 'Select a date',
+                    emoji: true,
+                    block: false,
+                  },
+                },
+              },
+            },
+          ],
+        },
+      },
+    ]);
+  });
+});
+
+describe('image', () => {
+  it('renders with title', () => {
+    const payload = [
+      {
+        type: 'image',
+        title: {
+          type: 'plain_text',
+          text: 'I Need a Marg',
+          emoji: true,
+        },
+        imageUrl:
+          'https://assets3.thrillist.com/v1/image/1682388/size/tl-horizontal_main.jpg',
+        altText: 'marg',
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'image-container',
+        props: {
+          key: 0,
+          children: [
+            {
+              component: 'image',
+              props: {
+                key: 0,
+                src:
+                  'https://assets3.thrillist.com/v1/image/1682388/size/tl-horizontal_main.jpg',
+                alt: 'marg',
+                block: false,
+              },
+            },
+            {
+              component: 'text',
+              props: {
+                key: 1,
+                children: 'I Need a Marg',
+                emoji: true,
+                block: false,
+              },
+            },
+          ],
+          block: true,
+        },
+      },
+    ]);
+  });
+
+  it('renders with no title', () => {
+    const payload = [
+      {
+        type: 'image',
+        imageUrl:
+          'https://i1.wp.com/thetempest.co/wp-content/uploads/2017/08/The-wise-words-of-Michael-Scott-Imgur-2.jpg?w=1024&ssl=1',
+        altText: 'inspiration',
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'image-container',
+        props: {
+          key: 0,
+          children: [
+            {
+              component: 'image',
+              props: {
+                key: 0,
+                src:
+                  'https://i1.wp.com/thetempest.co/wp-content/uploads/2017/08/The-wise-words-of-Michael-Scott-Imgur-2.jpg?w=1024&ssl=1',
+                alt: 'inspiration',
+                block: false,
+              },
+            },
+          ],
+          block: true,
+        },
+      },
+    ]);
+  });
+});
+
+describe('actions', () => {
+  it('renders all selects', () => {
+    const payload = [
+      {
+        type: 'actions',
+        elements: [
+          {
+            type: 'conversations_select',
+            placeholder: {
+              type: 'plain_text',
+              text: 'Select a conversation',
+              emoji: true,
+            },
+          },
+          {
+            type: 'channels_select',
+            placeholder: {
+              type: 'plain_text',
+              text: 'Select a channel',
+              emoji: true,
+            },
+          },
+          {
+            type: 'users_select',
+            placeholder: {
+              type: 'plain_text',
+              text: 'Select a user',
+              emoji: true,
+            },
+          },
+          {
+            type: 'static_select',
+            placeholder: {
+              type: 'plain_text',
+              text: 'Select an item',
+              emoji: true,
+            },
+            options: [
+              {
+                text: {
+                  type: 'plain_text',
+                  text: '*this is plain_text text*',
+                  emoji: true,
+                },
+                value: 'value-0',
+              },
+              {
+                text: {
+                  type: 'plain_text',
+                  text: '*this is plain_text text*',
+                  emoji: true,
+                },
+                value: 'value-1',
+              },
+              {
+                text: {
+                  type: 'plain_text',
+                  text: '*this is plain_text text*',
+                  emoji: true,
+                },
+                value: 'value-2',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'actions',
+        props: {
+          key: 0,
+          children: [
+            null,
+            null,
+            null,
+            {
+              component: 'select',
+              props: {
+                key: 3,
+                children: [
+                  {
+                    component: 'option',
+                    props: {
+                      key: 0,
+                      children: {
+                        component: 'text',
+                        props: {
+                          key: 0,
+                          children: '*this is plain_text text*',
+                          emoji: true,
+                          block: false,
+                        },
+                      },
+                      value: 'value-0',
+                    },
+                  },
+                  {
+                    component: 'option',
+                    props: {
+                      key: 1,
+                      children: {
+                        component: 'text',
+                        props: {
+                          key: 0,
+                          children: '*this is plain_text text*',
+                          emoji: true,
+                          block: false,
+                        },
+                      },
+                      value: 'value-1',
+                    },
+                  },
+                  {
+                    component: 'option',
+                    props: {
+                      key: 2,
+                      children: {
+                        component: 'text',
+                        props: {
+                          key: 0,
+                          children: '*this is plain_text text*',
+                          emoji: true,
+                          block: false,
+                        },
+                      },
+                      value: 'value-2',
+                    },
+                  },
+                ],
+                placeholder: {
+                  component: 'text',
+                  props: {
+                    key: 0,
+                    children: 'Select an item',
+                    emoji: true,
+                    block: false,
+                  },
+                },
+              },
+            },
+          ],
+          block: true,
+        },
+      },
+    ]);
+  });
+
+  it('renders filtered conversations select', () => {
+    const payload = [
+      {
+        type: 'actions',
+        elements: [
+          {
+            type: 'conversations_select',
+            placeholder: {
+              type: 'plain_text',
+              text: 'Select private conversation',
+              emoji: true,
+            },
+            filter: {
+              include: ['private'],
+            },
+          },
+        ],
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'actions',
+        props: {
+          key: 0,
+          children: [null],
+          block: true,
+        },
+      },
+    ]);
+  });
+
+  it('renders selects with initial options', () => {
+    const payload = [
+      {
+        type: 'actions',
+        elements: [
+          {
+            type: 'conversations_select',
+            placeholder: {
+              type: 'plain_text',
+              text: 'Select a conversation',
+              emoji: true,
+            },
+            initialConversation: 'D123',
+          },
+          {
+            type: 'users_select',
+            placeholder: {
+              type: 'plain_text',
+              text: 'Select a user',
+              emoji: true,
+            },
+            initialUser: 'U123',
+          },
+          {
+            type: 'channels_select',
+            placeholder: {
+              type: 'plain_text',
+              text: 'Select a channel',
+              emoji: true,
+            },
+            initialChannel: 'C123',
+          },
+        ],
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'actions',
+        props: {
+          key: 0,
+          children: [null, null, null],
+          block: true,
+        },
+      },
+    ]);
+  });
+
+  it('renders button', () => {
+    const payload = [
+      {
+        type: 'actions',
+        elements: [
+          {
+            type: 'button',
+            text: {
+              type: 'plain_text',
+              text: 'Click Me',
+              emoji: true,
+            },
+            value: 'click_me_123',
+          },
+        ],
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'actions',
+        props: {
+          key: 0,
+          children: [
+            {
+              component: 'button',
+              props: {
+                key: 0,
+                children: [
+                  {
+                    component: 'text',
+                    props: {
+                      key: 0,
+                      children: 'Click Me',
+                      emoji: true,
+                      block: false,
+                    },
+                  },
+                ],
+                value: 'click_me_123',
+                variant: 'normal',
+                block: false,
+              },
+            },
+          ],
+          block: true,
+        },
+      },
+    ]);
+  });
+
+  it('renders datepicker', () => {
+    const payload = [
+      {
+        type: 'actions',
+        elements: [
+          {
+            type: 'datepicker',
+            initialDate: '1990-04-28',
+            placeholder: {
+              type: 'plain_text',
+              text: 'Select a date',
+              emoji: true,
+            },
+          },
+          {
+            type: 'datepicker',
+            initialDate: '1990-04-28',
+            placeholder: {
+              type: 'plain_text',
+              text: 'Select a date',
+              emoji: true,
+            },
+          },
+        ],
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'actions',
+        props: {
+          key: 0,
+          children: [
+            {
+              component: 'input',
+              props: {
+                key: 0,
+                type: 'date',
+                defaultValue: '1990-04-28',
+                placeholder: {
+                  component: 'text',
+                  props: {
+                    key: 0,
+                    children: 'Select a date',
+                    emoji: true,
+                    block: false,
+                  },
+                },
+              },
+            },
+            {
+              component: 'input',
+              props: {
+                key: 1,
+                type: 'date',
+                defaultValue: '1990-04-28',
+                placeholder: {
+                  component: 'text',
+                  props: {
+                    key: 0,
+                    children: 'Select a date',
+                    emoji: true,
+                    block: false,
+                  },
+                },
+              },
+            },
+          ],
+          block: true,
+        },
+      },
+    ]);
+  });
+});
+
+describe('context', () => {
+  it('renders plain text', () => {
+    const payload = [
+      {
+        type: 'context',
+        elements: [
+          {
+            type: 'plain_text',
+            text: 'Author: K A Applegate',
+            emoji: true,
+          },
+        ],
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'context',
+        props: {
+          key: 0,
+          children: [
+            {
+              component: 'text',
+              props: {
+                key: 0,
+                children: 'Author: K A Applegate',
+                emoji: true,
+                block: false,
+              },
+            },
+          ],
+          block: true,
+        },
+      },
+    ]);
+  });
+
+  it('renders mrkdwn', () => {
+    const payload = [
+      {
+        type: 'context',
+        elements: [
+          {
+            type: 'image',
+            imageUrl:
+              'https://pbs.twimg.com/profile_images/625633822235693056/lNGUneLX_400x400.jpg',
+            altText: 'cute cat',
+          },
+          {
+            type: 'mrkdwn',
+            text: '*Cat* has approved this message.',
+          },
+        ],
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'context',
+        props: {
+          key: 0,
+          children: [
+            {
+              component: 'image',
+              props: {
+                key: 0,
+                src:
+                  'https://pbs.twimg.com/profile_images/625633822235693056/lNGUneLX_400x400.jpg',
+                alt: 'cute cat',
+                block: false,
+              },
+            },
+            {
+              component: 'markdown',
+              props: {
+                key: 1,
+                children: '*Cat* has approved this message.',
+                verbatim: false,
+                block: false,
+              },
+            },
+          ],
+          block: true,
+        },
+      },
+    ]);
+  });
+
+  it('renders text and images', () => {
+    const payload = [
+      {
+        type: 'context',
+        elements: [
+          {
+            type: 'mrkdwn',
+            text: '*This* is :smile: markdown',
+          },
+          {
+            type: 'image',
+            imageUrl:
+              'https://pbs.twimg.com/profile_images/625633822235693056/lNGUneLX_400x400.jpg',
+            altText: 'cute cat',
+          },
+          {
+            type: 'image',
+            imageUrl:
+              'https://pbs.twimg.com/profile_images/625633822235693056/lNGUneLX_400x400.jpg',
+            altText: 'cute cat',
+          },
+          {
+            type: 'image',
+            imageUrl:
+              'https://pbs.twimg.com/profile_images/625633822235693056/lNGUneLX_400x400.jpg',
+            altText: 'cute cat',
+          },
+          {
+            type: 'plain_text',
+            text: 'Author: K A Applegate',
+            emoji: true,
+          },
+        ],
+      },
+    ];
+    expect(parse(payload)).toStrictEqual([
+      {
+        component: 'context',
+        props: {
+          key: 0,
+          children: [
+            {
+              component: 'markdown',
+              props: {
+                key: 0,
+                children: '*This* is :smile: markdown',
+                verbatim: false,
+                block: false,
+              },
+            },
+            {
+              component: 'image',
+              props: {
+                key: 1,
+                src:
+                  'https://pbs.twimg.com/profile_images/625633822235693056/lNGUneLX_400x400.jpg',
+                alt: 'cute cat',
+                block: false,
+              },
+            },
+            {
+              component: 'image',
+              props: {
+                key: 2,
+                src:
+                  'https://pbs.twimg.com/profile_images/625633822235693056/lNGUneLX_400x400.jpg',
+                alt: 'cute cat',
+                block: false,
+              },
+            },
+            {
+              component: 'image',
+              props: {
+                key: 3,
+                src:
+                  'https://pbs.twimg.com/profile_images/625633822235693056/lNGUneLX_400x400.jpg',
+                alt: 'cute cat',
+                block: false,
+              },
+            },
+            {
+              component: 'text',
+              props: {
+                key: 4,
+                children: 'Author: K A Applegate',
+                emoji: true,
+                block: false,
+              },
+            },
+          ],
+          block: true,
+        },
+      },
+    ]);
+  });
+});
+
+describe('conditional', () => {
+  it('renders when conditions match', () => {
+    const blocks = [
+      {
+        type: 'conditional',
+        when: {
+          engine: ['rocket.chat'],
+        },
+        render: [
+          {
+            type: 'section',
+            text: {
+              type: 'plain_text',
+              text: 'This is a plain text section block.',
+              emoji: true,
+            },
+          },
+        ],
+      },
+    ];
+
+    expect(conditionalParse(blocks)).toStrictEqual([
+      {
+        component: 'section',
+        props: {
+          key: 0,
+          children: [
+            {
+              component: 'text',
+              props: {
+                key: 0,
+                children: 'This is a plain text section block.',
+                emoji: true,
+                block: false,
+              },
+            },
+          ],
+          block: true,
+        },
+      },
+    ]);
+  });
+
+  it('renders when no conditions are set', () => {
+    const blocks = [
+      {
+        type: 'conditional',
+        when: {
+          engine: ['rocket.chat'],
+        },
+        render: [
+          {
+            type: 'section',
+            text: {
+              type: 'plain_text',
+              text: 'This is a plain text section block.',
+              emoji: true,
+            },
+          },
+        ],
+      },
+    ];
+
+    expect(parse(blocks)).toStrictEqual([
+      {
+        component: 'section',
+        props: {
+          key: 0,
+          children: [
+            {
+              component: 'text',
+              props: {
+                key: 0,
+                children: 'This is a plain text section block.',
+                emoji: true,
+                block: false,
+              },
+            },
+          ],
+          block: true,
+        },
+      },
+    ]);
+  });
+
+  it('does not render when conditions match', () => {
+    const blocks = [
+      {
+        type: 'conditional',
+        when: {
+          engine: ['livechat'],
+        },
+        render: [
+          {
+            type: 'section',
+            text: {
+              type: 'plain_text',
+              text: 'This is a plain text section block.',
+              emoji: true,
+            },
+          },
+        ],
+      },
+    ];
+
+    expect(conditionalParse(blocks)).toStrictEqual([]);
+  });
+});
diff --git a/packages/ui-kit/src/rendering/surfaces/UiKitParserAttachment.ts b/packages/ui-kit/src/rendering/surfaces/UiKitParserAttachment.ts
new file mode 100644
index 0000000000..631295d8b9
--- /dev/null
+++ b/packages/ui-kit/src/rendering/surfaces/UiKitParserAttachment.ts
@@ -0,0 +1,26 @@
+import { LayoutBlockType } from '../../blocks/LayoutBlockType';
+import { BaseSurfaceRenderer } from '../BaseSurfaceRenderer';
+import { GenericSurfaceLayout } from './GenericSurfaceLayout';
+
+type AllowedLayoutsAttachment =
+  | LayoutBlockType.ACTIONS
+  | LayoutBlockType.CONTEXT
+  | LayoutBlockType.DIVIDER
+  | LayoutBlockType.IMAGE
+  | LayoutBlockType.SECTION;
+
+export abstract class UiKitParserAttachment<
+  OutputElement
+> extends BaseSurfaceRenderer<OutputElement, AllowedLayoutsAttachment> {
+  public constructor() {
+    super([
+      LayoutBlockType.ACTIONS,
+      LayoutBlockType.CONTEXT,
+      LayoutBlockType.DIVIDER,
+      LayoutBlockType.IMAGE,
+      LayoutBlockType.SECTION,
+    ]);
+  }
+}
+
+export type AttachmentSurfaceLayout = GenericSurfaceLayout<AllowedLayoutsAttachment>;
diff --git a/packages/ui-kit/src/rendering/surfaces/uiKitAttachment.ts b/packages/ui-kit/src/rendering/surfaces/uiKitAttachment.ts
new file mode 100644
index 0000000000..ad8c0a9bd8
--- /dev/null
+++ b/packages/ui-kit/src/rendering/surfaces/uiKitAttachment.ts
@@ -0,0 +1,3 @@
+import { createSurfaceRenderer } from '../createSurfaceRenderer';
+
+export const uiKitAttachment = createSurfaceRenderer();
diff --git a/yarn.lock b/yarn.lock
index 2ccc4875c1..1fd07396bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4467,6 +4467,45 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@rocket.chat/onboarding-ui@workspace:packages/onboarding-ui":
+  version: 0.0.0-use.local
+  resolution: "@rocket.chat/onboarding-ui@workspace:packages/onboarding-ui"
+  dependencies:
+    "@rocket.chat/eslint-config-alt": ^0.26.0
+    "@rocket.chat/fuselage": "workspace:packages/fuselage"
+    "@rocket.chat/fuselage-hooks": "workspace:packages/fuselage-hooks"
+    "@rocket.chat/fuselage-polyfills": "workspace:packages/fuselage-polyfills"
+    "@rocket.chat/fuselage-tokens": "workspace:packages/fuselage-tokens"
+    "@rocket.chat/icons": "workspace:packages/icons"
+    "@rocket.chat/prettier-config": ^0.26.0
+    "@storybook/addon-essentials": ^6.2.9
+    "@storybook/addons": ^6.2.9
+    "@storybook/react": ^6.2.9
+    "@storybook/source-loader": ^6.2.9
+    "@storybook/theming": ^6.2.9
+    "@types/jest": ^26.0.23
+    "@types/react": ^17.0.8
+    "@types/react-dom": ^17.0.5
+    downlevel-dts: ^0.7.0
+    eslint: ^7.26.0
+    jest: ^26.6.3
+    lint-staged: ^11.0.0
+    loki: ^0.28.1
+    npm-run-all: ^4.1.5
+    prettier: ^2.2.1
+    react: ^17.0.2
+    react-dom: ^17.0.2
+    rimraf: ^3.0.2
+    ts-jest: ^26.5.6
+    tslib: ^2.2.0
+    typedoc: ^0.20.36
+    typescript: ^4.2.4
+  peerDependencies:
+    react: 17.0.2
+    react-dom: 17.0.2
+  languageName: unknown
+  linkType: soft
+
 "@rocket.chat/peggy-loader@^0.26.0, @rocket.chat/peggy-loader@workspace:packages/peggy-loader":
   version: 0.0.0-use.local
   resolution: "@rocket.chat/peggy-loader@workspace:packages/peggy-loader"
@@ -6106,6 +6145,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-dom@npm:^17.0.5":
+  version: 17.0.5
+  resolution: "@types/react-dom@npm:17.0.5"
+  dependencies:
+    "@types/react": "*"
+  checksum: b3e23acb7be9405050abb4bcd443d14b16b2f3ded2d1853528199e4307b17b25186f905ddd236c27b6ef0297e6779b7fedd11fd24ee9170771be45a7e8e70f4b
+  languageName: node
+  linkType: hard
+
 "@types/react-syntax-highlighter@npm:11.0.5":
   version: 11.0.5
   resolution: "@types/react-syntax-highlighter@npm:11.0.5"
@@ -6136,6 +6184,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^17.0.8":
+  version: 17.0.8
+  resolution: "@types/react@npm:17.0.8"
+  dependencies:
+    "@types/prop-types": "*"
+    "@types/scheduler": "*"
+    csstype: ^3.0.2
+  checksum: b59a3abafd240b2880f9e6a11b2b7f75165888260c56e95a77ed10a7dd55570b307fb2356eda7fde2a8e1255d2def11797e4ae9800ae114a1f578546acabda67
+  languageName: node
+  linkType: hard
+
 "@types/resize-observer-browser@npm:^0.1.5":
   version: 0.1.5
   resolution: "@types/resize-observer-browser@npm:0.1.5"