diff --git a/examples/css/docs-page.css b/examples/css/docs-page.css
index 022631f2..6c908b76 100644
--- a/examples/css/docs-page.css
+++ b/examples/css/docs-page.css
@@ -509,7 +509,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     background-color: var(--sd-colour-interactive--alpha-20);
 }
 
-.docs-page__nav-item.docs-page__nav-item--active {
+.docs-page__nav-item a.docs-page__nav-item--active {
     border-color: var(--sd-colour-interactive);
     background-color: var(--docs-page-color-bg-00);
     font-weight: 400;
diff --git a/examples/index.js b/examples/index.js
index 3c18c985..86639f94 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -444,11 +444,8 @@ export default angular.module('ui-docs', [
             .when('/components/:name*', {
                 template: require('../examples/pages/components.html')
             })
-            .when('/react', {
-                template: require('../examples/pages/react.html')
-            })
-            .when('/react/:name*', {
-                template: require('../examples/pages/react.html')
+            .when('/design-patterns', {
+                template: require('../examples/pages/design-patterns.html')
             })
             .when('/playgrounds', {
                 template: require('../examples/pages/playgrounds.html')
diff --git a/examples/js/doc.js b/examples/js/doc.js
index 912e0049..2e5e34a2 100644
--- a/examples/js/doc.js
+++ b/examples/js/doc.js
@@ -1,7 +1,8 @@
 /* eslint-disable */
 /* global _, PR */
 
-import { ReactDoc, ReactPlayground } from './../pages/react/Index';
+import { ReactDoc, ReactPlayground } from './../pages/components/Index';
+import { DesignPatternsDoc } from './../pages/design-patterns/Index';
 import { HashRouter } from 'react-router-dom';
 
 import React from 'react';
@@ -115,7 +116,7 @@ function docModal($modal) {
 
             scope.openTemplateModal = function () {
                 modal = $modal.open({
-                    template: require('../pages/components/modal-template.html'),
+                    template: require('../pages/components_deprecated/modal-template.html'),
                     controller: docModalController,
                     size: 'large'
                 });
@@ -152,6 +153,18 @@ function docReact() {
     };
 }
 
+docDesignPatterns.$inject = [];
+function docDesignPatterns() {
+    return {
+        link: function (scope, elem) {
+            ReactDOM.render(
+                <HashRouter>
+                    <DesignPatternsDoc />
+                </HashRouter>, elem[0]);
+        }
+    };
+}
+
 docReactPlayground.$inject = ['playgrounds'];
 function docReactPlayground(playgrounds) {
     return {
@@ -199,5 +212,6 @@ export default angular.module('ui-docs.directives', [])
     .directive('docNav', docNav)
     .directive('docModal', docModal)
     .directive('docReact', docReact)
+    .directive('docDesignPatterns', docDesignPatterns)
     .directive('docReactPlayground', docReactPlayground)
     .directive('docGifImg', docGifImg);
diff --git a/examples/js/react.js b/examples/js/react.js
index 7e6ed7ec..585a9503 100644
--- a/examples/js/react.js
+++ b/examples/js/react.js
@@ -6,7 +6,7 @@ import LineNumbers from 'prismjs/plugins/line-numbers/prism-line-numbers';
 import Markdown from 'prismjs/components/prism-markdown';
 import JSX from 'prismjs/components/prism-jsx';
 
-import { Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 
 class ReactNav extends React.PureComponent {
     render() {
@@ -17,7 +17,7 @@ class ReactNav extends React.PureComponent {
             <ul className="docs-page__nav--sub-level">
                 {Object.keys(pages[group].items).map((page) =>
                     <li key={page} className="docs-page__nav-item">
-                        <Link to={{ pathname: '/react/' + page }}>{pages[group].items[page].name}</Link>
+                        <NavLink to={{ pathname: '/components/' + page }} activeClassName="docs-page__nav-item--active">{pages[group].items[page].name}</NavLink>
                     </li>
                 )}
             </ul>
diff --git a/examples/pages/components.html b/examples/pages/components.html
index 82ab8d27..5a65bfa6 100644
--- a/examples/pages/components.html
+++ b/examples/pages/components.html
@@ -5,34 +5,13 @@ <h1 class="docs-page__h1">Superdesk UI</h1>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
+    <button class="docs-page__header-button" aria-label="Change theme" aria-haspopup="menu" aria-expanded="false">
+        <i role="presentation" class="icon-adjust"></i>
+    </button>
 </header>
 
-<aside class="docs-page__sidebar">
-    <ul class="docs-page__nav" doc-nav>
-        <li ng-repeat="group in components">
-            <span class="docs-page__nav-title">{{group.name}}</span>
-            <ul class="docs-page__nav--sub-level">
-                <li class="docs-page__nav-item" ng-repeat="(name, item) in group.items"
-                    ng-class="{'docs-page__nav-item--active': isActive(name)}"><a href="#/components/{{name}}">{{item.name}}</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</aside>
-
-<main class="docs-page__content docs-page__container-fluid" ng-if="page" ng-include="'components/' + page + '.html'"></main>
 
-<main class="docs-page__content docs-page__container-fluid" ng-if="!page">
-    <section class="docs-page__container">
-        <div class="docs-page__hero">
-            <figure class="docs-page__hero-image">
-                <img src="/illustration--components.svg" alt="Components">
-            </figure>
-            <h2 class="docs-page__hero-h2 docs-page__color--primary">Superdesk HTML/CSS and Angular UI components</h2>
-            <p class="docs-page__hero-text">Since we are moving completely to React, check fist if what you are looking for is available as a react component. If it's not – this is the right place to look.</p>
-        </div>
-    </section>
-</main>
\ No newline at end of file
+<doc-react class="sd-wrap-helper"></doc-react>
diff --git a/examples/pages/react/Alerts.tsx b/examples/pages/components/Alerts.tsx
similarity index 100%
rename from examples/pages/react/Alerts.tsx
rename to examples/pages/components/Alerts.tsx
diff --git a/examples/pages/react/Autocomplete.tsx b/examples/pages/components/Autocomplete.tsx
similarity index 100%
rename from examples/pages/react/Autocomplete.tsx
rename to examples/pages/components/Autocomplete.tsx
diff --git a/examples/pages/react/Avatar.tsx b/examples/pages/components/Avatar.tsx
similarity index 100%
rename from examples/pages/react/Avatar.tsx
rename to examples/pages/components/Avatar.tsx
diff --git a/examples/pages/react/Badges.tsx b/examples/pages/components/Badges.tsx
similarity index 100%
rename from examples/pages/react/Badges.tsx
rename to examples/pages/components/Badges.tsx
diff --git a/examples/pages/react/BigIconFont.tsx b/examples/pages/components/BigIconFont.tsx
similarity index 100%
rename from examples/pages/react/BigIconFont.tsx
rename to examples/pages/components/BigIconFont.tsx
diff --git a/examples/pages/react/BoxedList.tsx b/examples/pages/components/BoxedList.tsx
similarity index 100%
rename from examples/pages/react/BoxedList.tsx
rename to examples/pages/components/BoxedList.tsx
diff --git a/examples/pages/react/ButtonGroups.tsx b/examples/pages/components/ButtonGroups.tsx
similarity index 100%
rename from examples/pages/react/ButtonGroups.tsx
rename to examples/pages/components/ButtonGroups.tsx
diff --git a/examples/pages/react/Buttons.tsx b/examples/pages/components/Buttons.tsx
similarity index 100%
rename from examples/pages/react/Buttons.tsx
rename to examples/pages/components/Buttons.tsx
diff --git a/examples/pages/react/Carousel.tsx b/examples/pages/components/Carousel.tsx
similarity index 100%
rename from examples/pages/react/Carousel.tsx
rename to examples/pages/components/Carousel.tsx
diff --git a/examples/pages/react/Checkboxs.tsx b/examples/pages/components/Checkboxs.tsx
similarity index 100%
rename from examples/pages/react/Checkboxs.tsx
rename to examples/pages/components/Checkboxs.tsx
diff --git a/examples/pages/react/Container.tsx b/examples/pages/components/Container.tsx
similarity index 100%
rename from examples/pages/react/Container.tsx
rename to examples/pages/components/Container.tsx
diff --git a/examples/pages/react/ContentDivider.tsx b/examples/pages/components/ContentDivider.tsx
similarity index 100%
rename from examples/pages/react/ContentDivider.tsx
rename to examples/pages/components/ContentDivider.tsx
diff --git a/examples/pages/react/ContentList.tsx b/examples/pages/components/ContentList.tsx
similarity index 100%
rename from examples/pages/react/ContentList.tsx
rename to examples/pages/components/ContentList.tsx
diff --git a/examples/pages/react/CreateButton.tsx b/examples/pages/components/CreateButton.tsx
similarity index 100%
rename from examples/pages/react/CreateButton.tsx
rename to examples/pages/components/CreateButton.tsx
diff --git a/examples/pages/react/DatePicker.tsx b/examples/pages/components/DatePicker.tsx
similarity index 100%
rename from examples/pages/react/DatePicker.tsx
rename to examples/pages/components/DatePicker.tsx
diff --git a/examples/pages/react/DragHandleDocs.tsx b/examples/pages/components/DragHandleDocs.tsx
similarity index 100%
rename from examples/pages/react/DragHandleDocs.tsx
rename to examples/pages/components/DragHandleDocs.tsx
diff --git a/examples/pages/react/DropZone.tsx b/examples/pages/components/DropZone.tsx
similarity index 100%
rename from examples/pages/react/DropZone.tsx
rename to examples/pages/components/DropZone.tsx
diff --git a/examples/pages/react/Dropdowns.tsx b/examples/pages/components/Dropdowns.tsx
similarity index 100%
rename from examples/pages/react/Dropdowns.tsx
rename to examples/pages/components/Dropdowns.tsx
diff --git a/examples/pages/react/DurationInput.tsx b/examples/pages/components/DurationInput.tsx
similarity index 100%
rename from examples/pages/react/DurationInput.tsx
rename to examples/pages/components/DurationInput.tsx
diff --git a/examples/pages/react/EmptyStates.tsx b/examples/pages/components/EmptyStates.tsx
similarity index 100%
rename from examples/pages/react/EmptyStates.tsx
rename to examples/pages/components/EmptyStates.tsx
diff --git a/examples/pages/react/GridItem.tsx b/examples/pages/components/GridItem.tsx
similarity index 100%
rename from examples/pages/react/GridItem.tsx
rename to examples/pages/components/GridItem.tsx
diff --git a/examples/pages/react/GridList.tsx b/examples/pages/components/GridList.tsx
similarity index 100%
rename from examples/pages/react/GridList.tsx
rename to examples/pages/components/GridList.tsx
diff --git a/examples/pages/react/Heading.tsx b/examples/pages/components/Heading.tsx
similarity index 100%
rename from examples/pages/react/Heading.tsx
rename to examples/pages/components/Heading.tsx
diff --git a/examples/pages/react/IconButtons.tsx b/examples/pages/components/IconButtons.tsx
similarity index 100%
rename from examples/pages/react/IconButtons.tsx
rename to examples/pages/components/IconButtons.tsx
diff --git a/examples/pages/react/IconFont.tsx b/examples/pages/components/IconFont.tsx
similarity index 100%
rename from examples/pages/react/IconFont.tsx
rename to examples/pages/components/IconFont.tsx
diff --git a/examples/pages/react/IconLabels.tsx b/examples/pages/components/IconLabels.tsx
similarity index 100%
rename from examples/pages/react/IconLabels.tsx
rename to examples/pages/components/IconLabels.tsx
diff --git a/examples/pages/react/IconPicker.tsx b/examples/pages/components/IconPicker.tsx
similarity index 100%
rename from examples/pages/react/IconPicker.tsx
rename to examples/pages/components/IconPicker.tsx
diff --git a/examples/pages/react/IllustrationButton.tsx b/examples/pages/components/IllustrationButton.tsx
similarity index 100%
rename from examples/pages/react/IllustrationButton.tsx
rename to examples/pages/components/IllustrationButton.tsx
diff --git a/examples/pages/react/Index.tsx b/examples/pages/components/Index.tsx
similarity index 66%
rename from examples/pages/react/Index.tsx
rename to examples/pages/components/Index.tsx
index 1b123af5..97da8f8c 100644
--- a/examples/pages/react/Index.tsx
+++ b/examples/pages/components/Index.tsx
@@ -344,66 +344,66 @@ class ReactDoc extends React.Component<IProps, IState> {
                         </Dropdown>
                     </div>
                     <Switch>
-                        <Route path="/react/buttons" component={ButtonsDoc} />
-                        <Route path="/react/icon-buttons" component={IconButtonDoc} />
-                        <Route path="/react/button-groups" component={ButtonGroupsDoc} />
-                        <Route path="/react/labels" component={LabelsDoc} />
-                        <Route path="/react/icon-labels" component={IconLabelDoc} />
-                        <Route path="/react/badges" component={BadgesDoc} />
-                        <Route path="/react/alerts" component={AlertDoc} />
-                        <Route path="/react/avatar" component={AvatarDoc} />
-                        <Route path="/react/tooltips" component={TooltipDoc} />
-                        <Route path="/react/tags" component={TagDoc} />
-                        <Route path="/react/inputs" component={InputsDoc} />
-                        <Route path="/react/autocomplete" component={AutocompleteDoc} />
-                        <Route path="/react/select" component={SelectsDoc} />
-                        <Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
-                        <Route path="/react/with-size-observer" component={WithSizeObserverDocs} />
-                        <Route path="/react/multiselect" component={MultiselectDocs} />
-                        <Route path="/react/treeselect" component={TreeSelectDocs} />
-                        <Route path="/react/treemenu" component={TreeMenuDocs} />
-                        <Route path="/react/duration-input" component={DurationInputDoc} />
-                        <Route path="/react/with-pagination" component={WithPaginationDocs} />
-                        <Route path="/react/popover" component={PopoverDoc} />
-                        <Route path="/react/date-picker" component={DatePickerDoc} />
-                        <Route path="/react/time-picker" component={TimePickerDoc} />
-                        <Route path="/react/switch" component={SwitchDoc} />
-                        <Route path="/react/radiogroup" component={RadioGroupDoc} />
-                        <Route path="/react/checkbox" component={CheckboxsDoc} />
-                        <Route path="/react/tab" component={TabsDoc} />
-                        <Route path="/react/left-navigation" component={LeftNavigationsDoc} />
-                        <Route path="/react/Quick-navigation-bar" component={QuickNavBarDoc} />
-                        <Route path="/react/nav-buttons" component={NavButtonsDoc} />
-                        <Route path="/react/icon-font" component={IconFontDoc} />
-                        <Route path="/react/big-icon-font" component={BigIconFontDoc} />
-                        <Route path="/react/sub-navigation" component={SubNavDoc} />
-                        <Route path="/react/dropdowns" component={DropdownDoc} />
-                        <Route path="/react/toast" component={ToastsDoc} />
-                        <Route path="/react/drag-handle" component={DragHandleDocs} />
-                        <Route path="/react/tag-input" component={TagInputDocs} />
-                        <Route path="/react/empty-states" component={EmptyStateDoc} />
-                        <Route path="/react/grid-list" component={GridListDoc} />
-                        <Route path="/react/grid-item" component={GridItemDoc} />
-                        <Route path="/react/modal" component={ModalDoc} />
-                        <Route path="/react/carousel" component={CarouselDoc} />
-                        <Route path="/react/content-divider" component={ContentDividerDoc} />
-                        <Route path="/react/menu" component={MenuDocs} />
-                        <Route path="/react/togglebox" component={ToggleboxDocs} />
-                        <Route path="/react/list-items" component={ListItemsDoc} />
-                        <Route path="/react/panel" component={PanelDoc} />
-                        <Route path="/react/select-grid" component={SelectGridDocs} />
-                        <Route path="/react/icon-picker" component={IconPickerDocs} />
-                        <Route path="/react/simple-list" component={SimpleListDoc} />
-                        <Route path="/react/boxed-list" component={BoxedListDoc} />
-                        <Route path="/react/table-list" component={TableListDoc} />
-                        <Route path="/react/content-list" component={ContentListDoc} />
-                        <Route path="/react/heading" component={HeadingDoc} />
-                        <Route path="/react/text" component={TextDoc} />
-                        <Route path="/react/container" component={ContainerDoc} />
-                        <Route path="/react/dropzone" component={DropZoneDoc} />
-                        <Route path="/react/create-button" component={CreateButtonDoc} />
-                        <Route path="/react/resizable-panels" component={ResizablePanelsDoc} />
-                        <Route path="/react/illustration-button" component={IllustrationButtonDoc} />
+                        <Route path="/components/buttons" component={ButtonsDoc} />
+                        <Route path="/components/icon-buttons" component={IconButtonDoc} />
+                        <Route path="/components/button-groups" component={ButtonGroupsDoc} />
+                        <Route path="/components/labels" component={LabelsDoc} />
+                        <Route path="/components/icon-labels" component={IconLabelDoc} />
+                        <Route path="/components/badges" component={BadgesDoc} />
+                        <Route path="/components/alerts" component={AlertDoc} />
+                        <Route path="/components/avatar" component={AvatarDoc} />
+                        <Route path="/components/tooltips" component={TooltipDoc} />
+                        <Route path="/components/tags" component={TagDoc} />
+                        <Route path="/components/inputs" component={InputsDoc} />
+                        <Route path="/components/autocomplete" component={AutocompleteDoc} />
+                        <Route path="/components/select" component={SelectsDoc} />
+                        <Route path="/components/select-with-template" component={SelectWithTemplateDocs} />
+                        <Route path="/components/with-size-observer" component={WithSizeObserverDocs} />
+                        <Route path="/components/multiselect" component={MultiselectDocs} />
+                        <Route path="/components/treeselect" component={TreeSelectDocs} />
+                        <Route path="/components/treemenu" component={TreeMenuDocs} />
+                        <Route path="/components/duration-input" component={DurationInputDoc} />
+                        <Route path="/components/with-pagination" component={WithPaginationDocs} />
+                        <Route path="/components/popover" component={PopoverDoc} />
+                        <Route path="/components/date-picker" component={DatePickerDoc} />
+                        <Route path="/components/time-picker" component={TimePickerDoc} />
+                        <Route path="/components/switch" component={SwitchDoc} />
+                        <Route path="/components/radiogroup" component={RadioGroupDoc} />
+                        <Route path="/components/checkbox" component={CheckboxsDoc} />
+                        <Route path="/components/tab" component={TabsDoc} />
+                        <Route path="/components/left-navigation" component={LeftNavigationsDoc} />
+                        <Route path="/components/Quick-navigation-bar" component={QuickNavBarDoc} />
+                        <Route path="/components/nav-buttons" component={NavButtonsDoc} />
+                        <Route path="/components/icon-font" component={IconFontDoc} />
+                        <Route path="/components/big-icon-font" component={BigIconFontDoc} />
+                        <Route path="/components/sub-navigation" component={SubNavDoc} />
+                        <Route path="/components/dropdowns" component={DropdownDoc} />
+                        <Route path="/components/toast" component={ToastsDoc} />
+                        <Route path="/components/drag-handle" component={DragHandleDocs} />
+                        <Route path="/components/tag-input" component={TagInputDocs} />
+                        <Route path="/components/empty-states" component={EmptyStateDoc} />
+                        <Route path="/components/grid-list" component={GridListDoc} />
+                        <Route path="/components/grid-item" component={GridItemDoc} />
+                        <Route path="/components/modal" component={ModalDoc} />
+                        <Route path="/components/carousel" component={CarouselDoc} />
+                        <Route path="/components/content-divider" component={ContentDividerDoc} />
+                        <Route path="/components/menu" component={MenuDocs} />
+                        <Route path="/components/togglebox" component={ToggleboxDocs} />
+                        <Route path="/components/list-items" component={ListItemsDoc} />
+                        <Route path="/components/panel" component={PanelDoc} />
+                        <Route path="/components/select-grid" component={SelectGridDocs} />
+                        <Route path="/components/icon-picker" component={IconPickerDocs} />
+                        <Route path="/components/simple-list" component={SimpleListDoc} />
+                        <Route path="/components/boxed-list" component={BoxedListDoc} />
+                        <Route path="/components/table-list" component={TableListDoc} />
+                        <Route path="/components/content-list" component={ContentListDoc} />
+                        <Route path="/components/heading" component={HeadingDoc} />
+                        <Route path="/components/text" component={TextDoc} />
+                        <Route path="/components/container" component={ContainerDoc} />
+                        <Route path="/components/dropzone" component={DropZoneDoc} />
+                        <Route path="/components/create-button" component={CreateButtonDoc} />
+                        <Route path="/components/resizable-panels" component={ResizablePanelsDoc} />
+                        <Route path="/components/illustration-button" component={IllustrationButtonDoc} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>
@@ -420,7 +420,7 @@ class ReactPlayground extends React.Component<IProps> {
     render() {
         return (
             <Switch>
-                <Route path="/playgrounds/react/:id" render={(props) => parsePlayground(props, this.props.playgrounds)} />
+                <Route path="/playgrounds/components/:id" render={(props) => parsePlayground(props, this.props.playgrounds)} />
             </Switch>
         )
     }
diff --git a/examples/pages/react/Inputs.tsx b/examples/pages/components/Inputs.tsx
similarity index 100%
rename from examples/pages/react/Inputs.tsx
rename to examples/pages/components/Inputs.tsx
diff --git a/examples/pages/react/Labels.tsx b/examples/pages/components/Labels.tsx
similarity index 100%
rename from examples/pages/react/Labels.tsx
rename to examples/pages/components/Labels.tsx
diff --git a/examples/pages/react/LeftNavigations.tsx b/examples/pages/components/LeftNavigations.tsx
similarity index 100%
rename from examples/pages/react/LeftNavigations.tsx
rename to examples/pages/components/LeftNavigations.tsx
diff --git a/examples/pages/react/ListItems.tsx b/examples/pages/components/ListItems.tsx
similarity index 100%
rename from examples/pages/react/ListItems.tsx
rename to examples/pages/components/ListItems.tsx
diff --git a/examples/pages/react/Menu.tsx b/examples/pages/components/Menu.tsx
similarity index 100%
rename from examples/pages/react/Menu.tsx
rename to examples/pages/components/Menu.tsx
diff --git a/examples/pages/react/Modal.tsx b/examples/pages/components/Modal.tsx
similarity index 100%
rename from examples/pages/react/Modal.tsx
rename to examples/pages/components/Modal.tsx
diff --git a/examples/pages/react/MultiSelect.tsx b/examples/pages/components/MultiSelect.tsx
similarity index 100%
rename from examples/pages/react/MultiSelect.tsx
rename to examples/pages/components/MultiSelect.tsx
diff --git a/examples/pages/react/NavButtons.tsx b/examples/pages/components/NavButtons.tsx
similarity index 100%
rename from examples/pages/react/NavButtons.tsx
rename to examples/pages/components/NavButtons.tsx
diff --git a/examples/pages/react/Panel.tsx b/examples/pages/components/Panel.tsx
similarity index 100%
rename from examples/pages/react/Panel.tsx
rename to examples/pages/components/Panel.tsx
diff --git a/examples/pages/react/Popover.tsx b/examples/pages/components/Popover.tsx
similarity index 100%
rename from examples/pages/react/Popover.tsx
rename to examples/pages/components/Popover.tsx
diff --git a/examples/pages/react/QuickNavigationBar.tsx b/examples/pages/components/QuickNavigationBar.tsx
similarity index 100%
rename from examples/pages/react/QuickNavigationBar.tsx
rename to examples/pages/components/QuickNavigationBar.tsx
diff --git a/examples/pages/react/RadioGroup.tsx b/examples/pages/components/RadioGroup.tsx
similarity index 100%
rename from examples/pages/react/RadioGroup.tsx
rename to examples/pages/components/RadioGroup.tsx
diff --git a/examples/pages/react/ResizablePanels.tsx b/examples/pages/components/ResizablePanels.tsx
similarity index 100%
rename from examples/pages/react/ResizablePanels.tsx
rename to examples/pages/components/ResizablePanels.tsx
diff --git a/examples/pages/react/SelectGrid.tsx b/examples/pages/components/SelectGrid.tsx
similarity index 100%
rename from examples/pages/react/SelectGrid.tsx
rename to examples/pages/components/SelectGrid.tsx
diff --git a/examples/pages/react/SelectWithTemplate.tsx b/examples/pages/components/SelectWithTemplate.tsx
similarity index 100%
rename from examples/pages/react/SelectWithTemplate.tsx
rename to examples/pages/components/SelectWithTemplate.tsx
diff --git a/examples/pages/react/Selects.tsx b/examples/pages/components/Selects.tsx
similarity index 100%
rename from examples/pages/react/Selects.tsx
rename to examples/pages/components/Selects.tsx
diff --git a/examples/pages/react/SimpleList.tsx b/examples/pages/components/SimpleList.tsx
similarity index 100%
rename from examples/pages/react/SimpleList.tsx
rename to examples/pages/components/SimpleList.tsx
diff --git a/examples/pages/react/SubNav.tsx b/examples/pages/components/SubNav.tsx
similarity index 100%
rename from examples/pages/react/SubNav.tsx
rename to examples/pages/components/SubNav.tsx
diff --git a/examples/pages/react/Switch.tsx b/examples/pages/components/Switch.tsx
similarity index 100%
rename from examples/pages/react/Switch.tsx
rename to examples/pages/components/Switch.tsx
diff --git a/examples/pages/react/TableList.tsx b/examples/pages/components/TableList.tsx
similarity index 100%
rename from examples/pages/react/TableList.tsx
rename to examples/pages/components/TableList.tsx
diff --git a/examples/pages/react/Tabs.tsx b/examples/pages/components/Tabs.tsx
similarity index 100%
rename from examples/pages/react/Tabs.tsx
rename to examples/pages/components/Tabs.tsx
diff --git a/examples/pages/react/TagInputDocs.tsx b/examples/pages/components/TagInputDocs.tsx
similarity index 100%
rename from examples/pages/react/TagInputDocs.tsx
rename to examples/pages/components/TagInputDocs.tsx
diff --git a/examples/pages/react/Tags.tsx b/examples/pages/components/Tags.tsx
similarity index 100%
rename from examples/pages/react/Tags.tsx
rename to examples/pages/components/Tags.tsx
diff --git a/examples/pages/react/Text.tsx b/examples/pages/components/Text.tsx
similarity index 100%
rename from examples/pages/react/Text.tsx
rename to examples/pages/components/Text.tsx
diff --git a/examples/pages/react/TimePicker.tsx b/examples/pages/components/TimePicker.tsx
similarity index 100%
rename from examples/pages/react/TimePicker.tsx
rename to examples/pages/components/TimePicker.tsx
diff --git a/examples/pages/react/Toasts.tsx b/examples/pages/components/Toasts.tsx
similarity index 100%
rename from examples/pages/react/Toasts.tsx
rename to examples/pages/components/Toasts.tsx
diff --git a/examples/pages/react/Togglebox.tsx b/examples/pages/components/Togglebox.tsx
similarity index 100%
rename from examples/pages/react/Togglebox.tsx
rename to examples/pages/components/Togglebox.tsx
diff --git a/examples/pages/react/Tooltips.tsx b/examples/pages/components/Tooltips.tsx
similarity index 100%
rename from examples/pages/react/Tooltips.tsx
rename to examples/pages/components/Tooltips.tsx
diff --git a/examples/pages/react/TreeMenu.tsx b/examples/pages/components/TreeMenu.tsx
similarity index 100%
rename from examples/pages/react/TreeMenu.tsx
rename to examples/pages/components/TreeMenu.tsx
diff --git a/examples/pages/react/TreeSelect.tsx b/examples/pages/components/TreeSelect.tsx
similarity index 100%
rename from examples/pages/react/TreeSelect.tsx
rename to examples/pages/components/TreeSelect.tsx
diff --git a/examples/pages/react/WithPaginationDocs.tsx b/examples/pages/components/WithPaginationDocs.tsx
similarity index 100%
rename from examples/pages/react/WithPaginationDocs.tsx
rename to examples/pages/components/WithPaginationDocs.tsx
diff --git a/examples/pages/react/WithSizeObserver.tsx b/examples/pages/components/WithSizeObserver.tsx
similarity index 100%
rename from examples/pages/react/WithSizeObserver.tsx
rename to examples/pages/components/WithSizeObserver.tsx
diff --git a/examples/pages/react/tree-select/TreeSelect.tsx b/examples/pages/components/tree-select/TreeSelect.tsx
similarity index 100%
rename from examples/pages/react/tree-select/TreeSelect.tsx
rename to examples/pages/components/tree-select/TreeSelect.tsx
diff --git a/examples/pages/react/tree-select/example-1.tsx b/examples/pages/components/tree-select/example-1.tsx
similarity index 100%
rename from examples/pages/react/tree-select/example-1.tsx
rename to examples/pages/components/tree-select/example-1.tsx
diff --git a/examples/pages/react/tree-select/example-2.tsx b/examples/pages/components/tree-select/example-2.tsx
similarity index 100%
rename from examples/pages/react/tree-select/example-2.tsx
rename to examples/pages/components/tree-select/example-2.tsx
diff --git a/examples/pages/components_deprecated.html b/examples/pages/components_deprecated.html
new file mode 100644
index 00000000..c1aa8856
--- /dev/null
+++ b/examples/pages/components_deprecated.html
@@ -0,0 +1,38 @@
+<header class="docs-page__header">
+    <a href="#/" class="docs-page__header-logo"></a>
+    <h1 class="docs-page__h1">Superdesk UI</h1>
+    <ul class="docs-page__header-nav">
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
+        <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
+    </ul>
+</header>
+
+<aside class="docs-page__sidebar">
+    <ul class="docs-page__nav" doc-nav>
+        <li ng-repeat="group in components">
+            <span class="docs-page__nav-title">{{group.name}}</span>
+            <ul class="docs-page__nav--sub-level">
+                <li class="docs-page__nav-item" ng-repeat="(name, item) in group.items"
+                    ng-class="{'docs-page__nav-item--active': isActive(name)}"><a href="#/components/{{name}}">{{item.name}}</a>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</aside>
+
+<main class="docs-page__content docs-page__container-fluid" ng-if="page" ng-include="'components/' + page + '.html'"></main>
+
+<main class="docs-page__content docs-page__container-fluid" ng-if="!page">
+    <section class="docs-page__container">
+        <div class="docs-page__hero">
+            <figure class="docs-page__hero-image">
+                <img src="/illustration--components.svg" alt="Components">
+            </figure>
+            <h2 class="docs-page__hero-h2 docs-page__color--primary">Superdesk HTML/CSS and Angular UI components</h2>
+            <p class="docs-page__hero-text">Since we are moving completely to React, check fist if what you are looking for is available as a react component. If it's not – this is the right place to look.</p>
+        </div>
+    </section>
+</main>
\ No newline at end of file
diff --git a/examples/pages/components/alerts.html b/examples/pages/components_deprecated/alerts.html
similarity index 100%
rename from examples/pages/components/alerts.html
rename to examples/pages/components_deprecated/alerts.html
diff --git a/examples/pages/components/badge.html b/examples/pages/components_deprecated/badge.html
similarity index 100%
rename from examples/pages/components/badge.html
rename to examples/pages/components_deprecated/badge.html
diff --git a/examples/pages/components/basic-grid.html b/examples/pages/components_deprecated/basic-grid.html
similarity index 100%
rename from examples/pages/components/basic-grid.html
rename to examples/pages/components_deprecated/basic-grid.html
diff --git a/examples/pages/components/big-icons.html b/examples/pages/components_deprecated/big-icons.html
similarity index 100%
rename from examples/pages/components/big-icons.html
rename to examples/pages/components_deprecated/big-icons.html
diff --git a/examples/pages/components/buttons.html b/examples/pages/components_deprecated/buttons.html
similarity index 100%
rename from examples/pages/components/buttons.html
rename to examples/pages/components_deprecated/buttons.html
diff --git a/examples/pages/components/carousel.html b/examples/pages/components_deprecated/carousel.html
similarity index 100%
rename from examples/pages/components/carousel.html
rename to examples/pages/components_deprecated/carousel.html
diff --git a/examples/pages/components/checkbox.html b/examples/pages/components_deprecated/checkbox.html
similarity index 100%
rename from examples/pages/components/checkbox.html
rename to examples/pages/components_deprecated/checkbox.html
diff --git a/examples/pages/components/colors.html b/examples/pages/components_deprecated/colors.html
similarity index 100%
rename from examples/pages/components/colors.html
rename to examples/pages/components_deprecated/colors.html
diff --git a/examples/pages/components/dropdown.html b/examples/pages/components_deprecated/dropdown.html
similarity index 100%
rename from examples/pages/components/dropdown.html
rename to examples/pages/components_deprecated/dropdown.html
diff --git a/examples/pages/components/form-layout.html b/examples/pages/components_deprecated/form-layout.html
similarity index 100%
rename from examples/pages/components/form-layout.html
rename to examples/pages/components_deprecated/form-layout.html
diff --git a/examples/pages/components/icon-labels.html b/examples/pages/components_deprecated/icon-labels.html
similarity index 100%
rename from examples/pages/components/icon-labels.html
rename to examples/pages/components_deprecated/icon-labels.html
diff --git a/examples/pages/components/icons.html b/examples/pages/components_deprecated/icons.html
similarity index 100%
rename from examples/pages/components/icons.html
rename to examples/pages/components_deprecated/icons.html
diff --git a/examples/pages/components/input.html b/examples/pages/components_deprecated/input.html
similarity index 100%
rename from examples/pages/components/input.html
rename to examples/pages/components_deprecated/input.html
diff --git a/examples/pages/components/labels.html b/examples/pages/components_deprecated/labels.html
similarity index 100%
rename from examples/pages/components/labels.html
rename to examples/pages/components_deprecated/labels.html
diff --git a/examples/pages/components/layout-grid.html b/examples/pages/components_deprecated/layout-grid.html
similarity index 100%
rename from examples/pages/components/layout-grid.html
rename to examples/pages/components_deprecated/layout-grid.html
diff --git a/examples/pages/components/left-nav.html b/examples/pages/components_deprecated/left-nav.html
similarity index 100%
rename from examples/pages/components/left-nav.html
rename to examples/pages/components_deprecated/left-nav.html
diff --git a/examples/pages/components/list-item.html b/examples/pages/components_deprecated/list-item.html
similarity index 100%
rename from examples/pages/components/list-item.html
rename to examples/pages/components_deprecated/list-item.html
diff --git a/examples/pages/components/loader.html b/examples/pages/components_deprecated/loader.html
similarity index 100%
rename from examples/pages/components/loader.html
rename to examples/pages/components_deprecated/loader.html
diff --git a/examples/pages/components/modal-template.html b/examples/pages/components_deprecated/modal-template.html
similarity index 100%
rename from examples/pages/components/modal-template.html
rename to examples/pages/components_deprecated/modal-template.html
diff --git a/examples/pages/components/modals.html b/examples/pages/components_deprecated/modals.html
similarity index 100%
rename from examples/pages/components/modals.html
rename to examples/pages/components_deprecated/modals.html
diff --git a/examples/pages/components/other-elements.html b/examples/pages/components_deprecated/other-elements.html
similarity index 100%
rename from examples/pages/components/other-elements.html
rename to examples/pages/components_deprecated/other-elements.html
diff --git a/examples/pages/components/panel-info.html b/examples/pages/components_deprecated/panel-info.html
similarity index 100%
rename from examples/pages/components/panel-info.html
rename to examples/pages/components_deprecated/panel-info.html
diff --git a/examples/pages/components/radio.html b/examples/pages/components_deprecated/radio.html
similarity index 100%
rename from examples/pages/components/radio.html
rename to examples/pages/components_deprecated/radio.html
diff --git a/examples/pages/components/select.html b/examples/pages/components_deprecated/select.html
similarity index 100%
rename from examples/pages/components/select.html
rename to examples/pages/components_deprecated/select.html
diff --git a/examples/pages/components/shadows.html b/examples/pages/components_deprecated/shadows.html
similarity index 100%
rename from examples/pages/components/shadows.html
rename to examples/pages/components_deprecated/shadows.html
diff --git a/examples/pages/components/sidebar-menu.html b/examples/pages/components_deprecated/sidebar-menu.html
similarity index 100%
rename from examples/pages/components/sidebar-menu.html
rename to examples/pages/components_deprecated/sidebar-menu.html
diff --git a/examples/pages/components/simple-list.html b/examples/pages/components_deprecated/simple-list.html
similarity index 100%
rename from examples/pages/components/simple-list.html
rename to examples/pages/components_deprecated/simple-list.html
diff --git a/examples/pages/components/slider.html b/examples/pages/components_deprecated/slider.html
similarity index 100%
rename from examples/pages/components/slider.html
rename to examples/pages/components_deprecated/slider.html
diff --git a/examples/pages/components/spacing.html b/examples/pages/components_deprecated/spacing.html
similarity index 100%
rename from examples/pages/components/spacing.html
rename to examples/pages/components_deprecated/spacing.html
diff --git a/examples/pages/components/switch.html b/examples/pages/components_deprecated/switch.html
similarity index 100%
rename from examples/pages/components/switch.html
rename to examples/pages/components_deprecated/switch.html
diff --git a/examples/pages/components/tables.html b/examples/pages/components_deprecated/tables.html
similarity index 100%
rename from examples/pages/components/tables.html
rename to examples/pages/components_deprecated/tables.html
diff --git a/examples/pages/components/tabs.html b/examples/pages/components_deprecated/tabs.html
similarity index 100%
rename from examples/pages/components/tabs.html
rename to examples/pages/components_deprecated/tabs.html
diff --git a/examples/pages/components/tag-input.html b/examples/pages/components_deprecated/tag-input.html
similarity index 100%
rename from examples/pages/components/tag-input.html
rename to examples/pages/components_deprecated/tag-input.html
diff --git a/examples/pages/components/tag-labels.html b/examples/pages/components_deprecated/tag-labels.html
similarity index 100%
rename from examples/pages/components/tag-labels.html
rename to examples/pages/components_deprecated/tag-labels.html
diff --git a/examples/pages/components/text.html b/examples/pages/components_deprecated/text.html
similarity index 100%
rename from examples/pages/components/text.html
rename to examples/pages/components_deprecated/text.html
diff --git a/examples/pages/components/toggle.html b/examples/pages/components_deprecated/toggle.html
similarity index 100%
rename from examples/pages/components/toggle.html
rename to examples/pages/components_deprecated/toggle.html
diff --git a/examples/pages/components/tooltips.html b/examples/pages/components_deprecated/tooltips.html
similarity index 100%
rename from examples/pages/components/tooltips.html
rename to examples/pages/components_deprecated/tooltips.html
diff --git a/examples/pages/components/vertical-tabs.html b/examples/pages/components_deprecated/vertical-tabs.html
similarity index 100%
rename from examples/pages/components/vertical-tabs.html
rename to examples/pages/components_deprecated/vertical-tabs.html
diff --git a/examples/pages/components/wizard.html b/examples/pages/components_deprecated/wizard.html
similarity index 100%
rename from examples/pages/components/wizard.html
rename to examples/pages/components_deprecated/wizard.html
diff --git a/examples/pages/react.html b/examples/pages/design-patterns.html
similarity index 89%
rename from examples/pages/react.html
rename to examples/pages/design-patterns.html
index ba846256..c4ccea21 100644
--- a/examples/pages/react.html
+++ b/examples/pages/design-patterns.html
@@ -5,7 +5,7 @@ <h1 class="docs-page__h1">Superdesk UI</h1>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
-        <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
+        <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
     <button class="docs-page__header-button" aria-label="Change theme" aria-haspopup="menu" aria-expanded="false">
@@ -13,5 +13,4 @@ <h1 class="docs-page__h1">Superdesk UI</h1>
     </button>
 </header>
 
-
-<doc-react class="sd-wrap-helper"></doc-react>
+<doc-design-patterns class="sd-wrap-helper"></doc-react>
diff --git a/examples/pages/design-patterns/Index.tsx b/examples/pages/design-patterns/Index.tsx
new file mode 100644
index 00000000..7b216966
--- /dev/null
+++ b/examples/pages/design-patterns/Index.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+
+import { ReactNav, ReactDefault } from '../../js/react';
+
+import {
+    Switch,
+    Route,
+} from "react-router-dom";
+
+const pages = {
+    basicComponents: {
+        name: 'Basic Components',
+        items: {
+            'buttons': {
+                name: 'Buttons',
+            },
+            'icon-buttons': {
+                name: 'Icon Buttons'
+            },
+            'button-groups': {
+                name: 'Button Group & Divider'
+            },
+            'labels': {
+                name: 'Labels',
+            },
+            'icon-labels': {
+                name: 'Icon Labels'
+            },
+            'badges': {
+                name: 'Badges',
+            },
+            'alerts': {
+                name: 'Alerts'
+            },
+            'avatar': {
+                name: 'Avatar',
+            },
+            'tooltips': {
+                name: 'Tooltips'
+            },
+            'tags': {
+                name: 'Tags'
+            },
+            'dropdowns': {
+                name: 'Dropdowns'
+            },
+            'nav-buttons': {
+                name: 'Nav buttons'
+            },
+            'toast': {
+                name: 'Toasts'
+            },
+            'popover': {
+                name: 'Popover'
+            },
+            'modal': {
+                name: 'Modal'
+            },
+            'carousel': {
+                name: 'Carousel'
+            },
+            'menu': {
+                name: 'Menu',
+            },
+            'treemenu': {
+                name: 'TreeMenu',
+            },
+            "drag-handle": {
+                name: 'Drag handle'
+            },
+            "illustration-button": {
+                name: 'Illustration Button'
+            }
+        }
+    },
+}
+
+class DesignPatternsDoc extends React.Component<{}, {}> {
+    render() {
+        return (
+            <React.Fragment>
+                <ReactNav pages={pages} />
+                <main className="docs-page__content docs-page__container-fluid">
+                </main>
+            </React.Fragment>
+        )
+    }
+}
+
+export { DesignPatternsDoc };
\ No newline at end of file
diff --git a/examples/pages/design.html b/examples/pages/design.html
index b9de14ad..aaf8fa68 100644
--- a/examples/pages/design.html
+++ b/examples/pages/design.html
@@ -5,7 +5,7 @@ <h1 class="docs-page__h1">Superdesk UI</h1>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
         <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
 </header>
diff --git a/examples/pages/main.html b/examples/pages/main.html
index eaef767e..4ab0122e 100644
--- a/examples/pages/main.html
+++ b/examples/pages/main.html
@@ -5,7 +5,7 @@ <h1 class="docs-page__h1">Superdesk UI</h1>
         <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
 </header>
diff --git a/examples/pages/playgrounds.html b/examples/pages/playgrounds.html
index 5f20b7d0..7515d07b 100644
--- a/examples/pages/playgrounds.html
+++ b/examples/pages/playgrounds.html
@@ -5,7 +5,7 @@ <h1 class="docs-page__h1">Superdesk UI</h1>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
         <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
 </header>