diff --git a/htdocs/admin/tools/ui/class/documentation.class.php b/htdocs/admin/tools/ui/class/documentation.class.php
new file mode 100644
index 00000000000..f7f00b5dc52
--- /dev/null
+++ b/htdocs/admin/tools/ui/class/documentation.class.php
@@ -0,0 +1,403 @@
+
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see .
+ */
+
+/**
+ * \file htdocs/admint/tools/ui/class/uidoc.class.php
+ * \ingroup ui
+ * \brief File of class to manage UI documentation
+ */
+
+/**
+ * Class to manage UI documentation
+ */
+class Documentation
+{
+
+ /**
+ * Views
+ *
+ * @var array
+ */
+ public $view = array();
+
+ /**
+ * Menu - Set in setMenu in order to use dol_buildpath and called in constructor
+ *
+ * @var array
+ */
+ public $menu = array();
+
+ /**
+ * Summary - Set in setSummary and called in constructor
+ *
+ * @var array
+ */
+ public $summary = array();
+
+ /**
+ * @var DoliDB Database handler.
+ */
+ public $db;
+
+
+ /**
+ * Constructor
+ *
+ * @param DoliDB $db Database handler
+ */
+ public function __construct(DoliDB $db)
+ {
+ $this->db = $db;
+
+ // https://www.figma.com/community/file/1393171578760389765/dolibarr-ui-ux-kit
+
+ // Menu Constructor
+ $this->setMenu();
+ }
+
+ /**
+ * Set Documentation Menu
+ *
+ * @return mixed false if error, void if no errors
+ */
+ private function setMenu()
+ {
+
+ global $hookmanager;
+
+
+ $hookmanager->initHooks(array('uidocumentation'));
+
+ $baseUrl = 'admin/tools/ui';
+
+ // Go back to Dolibarr
+ $this->menu['BackToDolibarr'] = array(
+ 'url' => DOL_URL_ROOT,
+ 'icon' => 'fas fa-arrow-left pictofixedwidth',
+ 'submenu' => array(),
+ );
+
+ // Home for Ui documentation
+ $this->menu['DocumentationHome'] = array(
+ 'url' => dol_buildpath($baseUrl.'/index.php', 1),
+ 'icon' => 'fas fa-book',
+ 'submenu' => array(),
+ );
+
+ // Components
+ $this->menu['Components'] = array(
+ 'url' => dol_buildpath($baseUrl.'/components/index.php', 1),
+ 'icon' => 'fas fa-th-large',
+ 'submenu' => array(
+ 'Badges' => array(
+ 'url' => dol_buildpath($baseUrl.'/components/badges.php', 1),
+ 'icon' => 'fas fa-certificate pictofixedwidth',
+ 'submenu' => array(),
+ 'summary' => array(
+ 'DocBasicUsage' => '#badgesection-basicusage',
+ 'DocBadgeContextualVariations' => '#badgesection-contextvariations',
+ 'DocBadgeDefaultStatus' => '#badgesection-defaultstatus',
+ 'DocBadgePillBadges' => '#badgesection-pill',
+ 'DocBadgeDotBadges' => '#badgesection-dot',
+ 'DocBadgeLinks' => '#badgesection-links',
+ 'DocBadgeHelper' => '#badgesection-dolgetbadge'
+ ),
+ ),
+ 'Buttons' => array(
+ 'url' => dol_buildpath($baseUrl.'/components/buttons.php', 1),
+ 'icon' => 'fas fa-mouse pictofixedwidth',
+ 'submenu' => array(),
+ 'summary' => array(
+ 'DocBasicUsage' => '#buttonsection-basicusage',
+ 'DocButtonModal' => '#buttonsection-modals',
+ 'DocButtonSubmenu' => '#buttonsection-submenu',
+ ),
+ ),
+ 'Progress' => array(
+ 'url' => dol_buildpath($baseUrl.'/components/progress-bars.php', 1),
+ 'icon' => 'fas fa-battery-half pictofixedwidth',
+ 'submenu' => array(),
+ 'summary' => array(
+ 'DocBasicUsage' => '#progresse-section-basic-usage',
+ 'DocColorVariants' => '#progress-section-color',
+ 'DocStripedVariants' => '#progresse-section-stripped',
+ ),
+ ),
+ 'Event Message' => array(
+ 'url' => dol_buildpath($baseUrl.'/components/event-message.php', 1),
+ 'icon' => 'fas fa-comments pictofixedwidth',
+ 'submenu' => array(),
+ 'summary' => array(
+ 'DocBasicUsage' => '#seteventmessagesection-basicusage',
+ 'DocSetEventMessageContextualVariations' => '#seteventmessagesection-contextvariations',
+ )
+ ),
+ ),
+ 'summary' => array(
+ 'keySum' => '#keySum'
+ )
+ );
+
+ // Elements
+ $this->menu['Content'] = array(
+ 'url' => dol_buildpath($baseUrl.'/content/index.php', 1),
+ 'icon' => 'fas fa-th-large',
+ 'submenu' => array(
+ 'Tables' => array(
+ 'url' => dol_buildpath('admin/tools/ui/content/tables.php', 1),
+ 'icon' => 'fas fa-table pictofixedwidth',
+ 'submenu' => array(),
+ 'summary' => array(
+ 'DocBasicUsage' => '#tablesection-basicusage',
+ 'DocTableWithFilters' => '#tablesection-withfilters'
+ ),
+ ),
+ )
+ );
+
+ $parameters = array(
+ 'baseUrl' => $baseUrl,
+ );
+ $action = '';
+
+ $reshook = $hookmanager->executeHooks('setMenu', $parameters, $this, $action);
+ if ($reshook < 0) {
+ return false;
+ }
+ }
+
+ /**
+ * Output header + body
+ *
+ * @param string $title Title of page
+ * @param string[] $arrayofjs Array of complementary js files
+ * @param string[] $arrayofcss Array of complementary css files
+ * @return void
+ */
+ public function docHeader($title = '', $arrayofjs = [], $arrayofcss = [])
+ {
+ global $langs;
+ $title = (!empty($title)) ? dol_escape_htmltag($title) : $langs->trans('Documentation');
+
+ $arrayofcss[] = 'admin/tools/ui/css/documentation.css';
+
+ top_htmlhead('', $title, 0, 0, $arrayofjs, $arrayofcss);
+
+ print '';
+ }
+
+ /**
+ * Output close body + html
+ * @return void
+ */
+ public function docFooter()
+ {
+ global $conf, $langs;
+
+ // DIV FOR SCROLL ANIMATION
+ print '';
+
+ // JS
+ print '';
+ print '';
+
+ print '';
+ print '